@okta/odyssey-react-mui 1.11.0 → 1.12.0

package/dist/NativeSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativeSelect.js","names":["React","forwardRef","memo","useCallback","useMemo","useRef","Field","getControlState","useInputValues","jsx","_jsx","NativeSelect","_ref","ref","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","hint","HintLinkComponent","id","idOverride","isDisabled","isFullWidth","isMultiSelect","isOptional","label","onBlur","onChange","onChangeProp","onFocus","testId","translate","value","children","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","child","undefined","renderFieldComponent","_ref2","ariaDescribedBy","errorMessageElementId","labelElementId","_Select","inputProps","name","multiple","native","fieldType","hasVisibleLabel","MemoizedNativeSelect","displayName"],"sources":["../src/NativeSelect.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport React, {\n  ReactElement,\n  forwardRef,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  Select as MuiSelect,\n  SelectProps as MuiSelectProps,\n} from \"@mui/material\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\nimport { ForwardRefWithType } from \"./@types/react-augment\";\n\nexport type NativeSelectOption = {\n  text: string;\n  value?: string;\n  type?: \"heading\" | \"option\";\n};\n\nexport type NativeSelectValueType<HasMultipleChoices> =\n  HasMultipleChoices extends true ? string[] : string;\n\nexport type NativeSelectProps<\n  Value extends NativeSelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean\n> = {\n  /**\n   * The options or optgroup elements within the NativeSelect\n   */\n  children?: ReactElement<\"option\"> | ReactElement<\"optgroup\">;\n  /**\n   * The default value of the NativeSelect. Use when component is uncontrolled\n   */\n  defaultValue?: Value;\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the NativeSelect\n   */\n  label: string;\n  /**\n   * Callback fired when the NativeSelect loses focus\n   */\n  onBlur?: MuiSelectProps<Value>[\"onBlur\"];\n  /**\n   * Callback fired when the value of the NativeSelect changes\n   */\n  onChange?: MuiSelectProps<Value>[\"onChange\"];\n  /**\n   * Callback fired when the NativeSelect gains focus\n   */\n  onFocus?: MuiSelectProps<Value>[\"onFocus\"];\n  options: Value;\n  /**\n   * The value or values selected in the NativeSelect. Use when component is controlled\n   */\n  value?: Value;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n> &\n  AllowedProps;\n\nconst NativeSelect: ForwardRefWithType = forwardRef(\n  <\n    Value extends NativeSelectValueType<HasMultipleChoices>,\n    HasMultipleChoices extends boolean\n  >(\n    {\n      defaultValue,\n      errorMessage,\n      errorMessageList,\n      hasMultipleChoices: hasMultipleChoicesProp,\n      hint,\n      HintLinkComponent,\n      id: idOverride,\n      isDisabled = false,\n      isFullWidth = false,\n      isMultiSelect,\n      isOptional = false,\n      label,\n      onBlur,\n      onChange: onChangeProp,\n      onFocus,\n      testId,\n      translate,\n      value,\n      children,\n    }: NativeSelectProps<Value, HasMultipleChoices>,\n    ref?: React.Ref<ReactElement>\n  ) => {\n    const controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      })\n    );\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const onChange = useCallback<\n      NonNullable<MuiSelectProps<Value>[\"onChange\"]>\n    >(\n      (event, child) => {\n        onChangeProp?.(event, child);\n      },\n      [onChangeProp]\n    );\n\n    const hasMultipleChoices = useMemo(\n      () =>\n        hasMultipleChoicesProp === undefined\n          ? isMultiSelect\n          : hasMultipleChoicesProp,\n      [hasMultipleChoicesProp, isMultiSelect]\n    );\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, errorMessageElementId, labelElementId }) => (\n        <MuiSelect\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          children={children}\n          data-se={testId}\n          id={idOverride}\n          inputProps={{\n            \"aria-errormessage\": errorMessageElementId,\n            \"aria-labelledby\": labelElementId,\n          }}\n          name={idOverride}\n          multiple={hasMultipleChoices}\n          native={true}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          ref={ref}\n          translate={translate}\n        />\n      ),\n      [\n        children,\n        idOverride,\n        inputValues,\n        hasMultipleChoices,\n        onBlur,\n        onChange,\n        onFocus,\n        ref,\n        testId,\n        translate,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        errorMessageList={errorMessageList}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        HintLinkComponent={HintLinkComponent}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedNativeSelect = memo(NativeSelect);\nMemoizedNativeSelect.displayName = \"NativeSelect\";\n\nexport { MemoizedNativeSelect as NativeSelect };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAEVC,UAAU,EACVC,IAAI,EACJC,WAAW,EACXC,OAAO,EACPC,MAAM,QACD,OAAO;AAAC,SAKNC,KAAK;AAAA,SAGLC,eAAe,EAAEC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAmExC,MAAMC,YAAgC,GAAGV,UAAU,CACjD,CAAAW,IAAA,EAyBEC,GAA6B,KAC1B;EAAA,IAtBH;IACEC,YAAY;IACZC,YAAY;IACZC,gBAAgB;IAChBC,kBAAkB,EAAEC,sBAAsB;IAC1CC,IAAI;IACJC,iBAAiB;IACjBC,EAAE,EAAEC,UAAU;IACdC,UAAU,GAAG,KAAK;IAClBC,WAAW,GAAG,KAAK;IACnBC,aAAa;IACbC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC,MAAM;IACNC,QAAQ,EAAEC,YAAY;IACtBC,OAAO;IACPC,MAAM;IACNC,SAAS;IACTC,KAAK;IACLC;EAC4C,CAAC,GAAAvB,IAAA;EAG/C,MAAMwB,kBAAkB,GAAG/B,MAAM,CAC/BE,eAAe,CAAC;IACd8B,eAAe,EAAEH,KAAK;IACtBI,iBAAiB,EAAExB;EACrB,CAAC,CACH,CAAC;EACD,MAAMyB,WAAW,GAAG/B,cAAc,CAAC;IACjCM,YAAY;IACZoB,KAAK;IACLM,YAAY,EAAEJ,kBAAkB,CAACK;EACnC,CAAC,CAAC;EAEF,MAAMZ,QAAQ,GAAG1B,WAAW,CAG1B,CAACuC,KAAK,EAAEC,KAAK,KAAK;IAChBb,YAAY,GAAGY,KAAK,EAAEC,KAAK,CAAC;EAC9B,CAAC,EACD,CAACb,YAAY,CACf,CAAC;EAED,MAAMb,kBAAkB,GAAGb,OAAO,CAChC,MACEc,sBAAsB,KAAK0B,SAAS,GAChCnB,aAAa,GACbP,sBAAsB,EAC5B,CAACA,sBAAsB,EAAEO,aAAa,CACxC,CAAC;EACD,MAAMoB,oBAAoB,GAAG1C,WAAW,CACtC2C,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEC,qBAAqB;MAAEC;IAAe,CAAC,GAAAH,KAAA;IAAA,OACzDpC,IAAA,CAAAwC,OAAA;MAAA,GACMX,WAAW;MACf,oBAAkBQ,eAAgB;MAClCZ,QAAQ,EAAEA,QAAS;MACnB,WAASH,MAAO;MAChBX,EAAE,EAAEC,UAAW;MACf6B,UAAU,EAAE;QACV,mBAAmB,EAAEH,qBAAqB;QAC1C,iBAAiB,EAAEC;MACrB,CAAE;MACFG,IAAI,EAAE9B,UAAW;MACjB+B,QAAQ,EAAEpC,kBAAmB;MAC7BqC,MAAM,EAAE,IAAK;MACb1B,MAAM,EAAEA,MAAO;MACfC,QAAQ,EAAEA,QAAS;MACnBE,OAAO,EAAEA,OAAQ;MACjBlB,GAAG,EAAEA,GAAI;MACToB,SAAS,EAAEA;IAAU,CACtB,CAAC;EAAA,CACH,EACD,CACEE,QAAQ,EACRb,UAAU,EACViB,WAAW,EACXtB,kBAAkB,EAClBW,MAAM,EACNC,QAAQ,EACRE,OAAO,EACPlB,GAAG,EACHmB,MAAM,EACNC,SAAS,CAEb,CAAC;EAED,OACEvB,IAAA,CAACJ,KAAK;IACJS,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCuC,SAAS,EAAC,QAAQ;IAClBC,eAAe;IACfrC,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,WAAW,EAAEA,WAAY;IACzBE,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbkB,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CACF,CAAC;AAED,MAAMY,oBAAoB,GAAGvD,IAAI,CAACS,YAAY,CAAC;AAC/C8C,oBAAoB,CAACC,WAAW,GAAG,cAAc;AAEjD,SAASD,oBAAoB,IAAI9C,YAAY"}
+{"version":3,"file":"NativeSelect.js","names":["React","forwardRef","memo","useCallback","useImperativeHandle","useMemo","useRef","Field","getControlState","useInputValues","jsx","_jsx","NativeSelect","_ref","ref","ariaDescribedBy","autoCompleteType","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","hint","HintLinkComponent","id","idOverride","inputRef","isDisabled","isFullWidth","isMultiSelect","isOptional","label","onBlur","onChange","onChangeProp","onFocus","testId","translate","value","children","controlledStateRef","controlledValue","uncontrolledValue","localInputRef","focus","current","inputValues","controlState","event","child","undefined","renderFieldComponent","_ref2","errorMessageElementId","labelElementId","_Select","autoComplete","inputProps","name","multiple","native","fieldType","hasVisibleLabel","MemoizedNativeSelect","displayName"],"sources":["../src/NativeSelect.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport React, {\n  InputHTMLAttributes,\n  ReactElement,\n  forwardRef,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  Select as MuiSelect,\n  SelectProps as MuiSelectProps,\n} from \"@mui/material\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport { FocusHandle, getControlState, useInputValues } from \"./inputUtils\";\nimport { ForwardRefWithType } from \"./@types/react-augment\";\n\nexport type NativeSelectOption = {\n  text: string;\n  value?: string;\n  type?: \"heading\" | \"option\";\n};\n\nexport type NativeSelectValueType<HasMultipleChoices> =\n  HasMultipleChoices extends true ? string[] : string;\n\nexport type NativeSelectProps<\n  Value extends NativeSelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean\n> = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill\n   */\n  autoCompleteType?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n  /**\n   * The options or optgroup elements within the NativeSelect\n   */\n  children?: ReactElement<\"option\"> | ReactElement<\"optgroup\">;\n  /**\n   * The default value of the NativeSelect. Use when component is uncontrolled\n   */\n  defaultValue?: Value;\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * The ref forwarded to the NativeSelect\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the NativeSelect\n   */\n  label: string;\n  /**\n   * Callback fired when the NativeSelect loses focus\n   */\n  onBlur?: MuiSelectProps<Value>[\"onBlur\"];\n  /**\n   * Callback fired when the value of the NativeSelect changes\n   */\n  onChange?: MuiSelectProps<Value>[\"onChange\"];\n  /**\n   * Callback fired when the NativeSelect gains focus\n   */\n  onFocus?: MuiSelectProps<Value>[\"onFocus\"];\n  options: Value;\n  /**\n   * The value or values selected in the NativeSelect. Use when component is controlled\n   */\n  value?: Value;\n} & Pick<\n  FieldComponentProps,\n  | \"ariaDescribedBy\"\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n> &\n  AllowedProps;\n\nconst NativeSelect: ForwardRefWithType = forwardRef(\n  <\n    Value extends NativeSelectValueType<HasMultipleChoices>,\n    HasMultipleChoices extends boolean\n  >(\n    {\n      ariaDescribedBy,\n      autoCompleteType,\n      defaultValue,\n      errorMessage,\n      errorMessageList,\n      hasMultipleChoices: hasMultipleChoicesProp,\n      hint,\n      HintLinkComponent,\n      id: idOverride,\n      inputRef,\n      isDisabled = false,\n      isFullWidth = false,\n      isMultiSelect,\n      isOptional = false,\n      label,\n      onBlur,\n      onChange: onChangeProp,\n      onFocus,\n      testId,\n      translate,\n      value,\n      children,\n    }: NativeSelectProps<Value, HasMultipleChoices>,\n    ref?: React.Ref<ReactElement>\n  ) => {\n    const controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      })\n    );\n    const localInputRef = useRef<HTMLSelectElement>(null);\n\n    useImperativeHandle(\n      inputRef,\n      () => {\n        return {\n          focus: () => {\n            localInputRef.current?.focus();\n          },\n        };\n      },\n      []\n    );\n\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const onChange = useCallback<\n      NonNullable<MuiSelectProps<Value>[\"onChange\"]>\n    >(\n      (event, child) => {\n        onChangeProp?.(event, child);\n      },\n      [onChangeProp]\n    );\n\n    const hasMultipleChoices = useMemo(\n      () =>\n        hasMultipleChoicesProp === undefined\n          ? isMultiSelect\n          : hasMultipleChoicesProp,\n      [hasMultipleChoicesProp, isMultiSelect]\n    );\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, errorMessageElementId, labelElementId }) => (\n        <MuiSelect\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          children={children}\n          id={idOverride}\n          inputProps={{\n            \"aria-errormessage\": errorMessageElementId,\n            \"aria-labelledby\": labelElementId,\n            \"data-se\": testId,\n          }}\n          inputRef={localInputRef}\n          name={idOverride}\n          multiple={hasMultipleChoices}\n          native={true}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          ref={ref}\n          translate={translate}\n        />\n      ),\n      [\n        autoCompleteType,\n        children,\n        idOverride,\n        inputValues,\n        hasMultipleChoices,\n        onBlur,\n        onChange,\n        onFocus,\n        ref,\n        testId,\n        translate,\n      ]\n    );\n\n    return (\n      <Field\n        ariaDescribedBy={ariaDescribedBy}\n        errorMessage={errorMessage}\n        errorMessageList={errorMessageList}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        HintLinkComponent={HintLinkComponent}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedNativeSelect = memo(NativeSelect);\nMemoizedNativeSelect.displayName = \"NativeSelect\";\n\nexport { MemoizedNativeSelect as NativeSelect };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAGVC,UAAU,EACVC,IAAI,EACJC,WAAW,EACXC,mBAAmB,EACnBC,OAAO,EACPC,MAAM,QACD,OAAO;AAAC,SAKNC,KAAK;AAAA,SAGQC,eAAe,EAAEC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AA8ErD,MAAMC,YAAgC,GAAGX,UAAU,CACjD,CAAAY,IAAA,EA4BEC,GAA6B,KAC1B;EAAA,IAzBH;IACEC,eAAe;IACfC,gBAAgB;IAChBC,YAAY;IACZC,YAAY;IACZC,gBAAgB;IAChBC,kBAAkB,EAAEC,sBAAsB;IAC1CC,IAAI;IACJC,iBAAiB;IACjBC,EAAE,EAAEC,UAAU;IACdC,QAAQ;IACRC,UAAU,GAAG,KAAK;IAClBC,WAAW,GAAG,KAAK;IACnBC,aAAa;IACbC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC,MAAM;IACNC,QAAQ,EAAEC,YAAY;IACtBC,OAAO;IACPC,MAAM;IACNC,SAAS;IACTC,KAAK;IACLC;EAC4C,CAAC,GAAA1B,IAAA;EAG/C,MAAM2B,kBAAkB,GAAGlC,MAAM,CAC/BE,eAAe,CAAC;IACdiC,eAAe,EAAEH,KAAK;IACtBI,iBAAiB,EAAEzB;EACrB,CAAC,CACH,CAAC;EACD,MAAM0B,aAAa,GAAGrC,MAAM,CAAoB,IAAI,CAAC;EAErDF,mBAAmB,CACjBsB,QAAQ,EACR,MAAM;IACJ,OAAO;MACLkB,KAAK,EAAEA,CAAA,KAAM;QACXD,aAAa,CAACE,OAAO,EAAED,KAAK,CAAC,CAAC;MAChC;IACF,CAAC;EACH,CAAC,EACD,EACF,CAAC;EAED,MAAME,WAAW,GAAGrC,cAAc,CAAC;IACjCQ,YAAY;IACZqB,KAAK;IACLS,YAAY,EAAEP,kBAAkB,CAACK;EACnC,CAAC,CAAC;EAEF,MAAMZ,QAAQ,GAAG9B,WAAW,CAG1B,CAAC6C,KAAK,EAAEC,KAAK,KAAK;IAChBf,YAAY,GAAGc,KAAK,EAAEC,KAAK,CAAC;EAC9B,CAAC,EACD,CAACf,YAAY,CACf,CAAC;EAED,MAAMd,kBAAkB,GAAGf,OAAO,CAChC,MACEgB,sBAAsB,KAAK6B,SAAS,GAChCrB,aAAa,GACbR,sBAAsB,EAC5B,CAACA,sBAAsB,EAAEQ,aAAa,CACxC,CAAC;EACD,MAAMsB,oBAAoB,GAAGhD,WAAW,CACtCiD,KAAA;IAAA,IAAC;MAAErC,eAAe;MAAEsC,qBAAqB;MAAEC;IAAe,CAAC,GAAAF,KAAA;IAAA,OACzDzC,IAAA,CAAA4C,OAAA;MAAA,GACMT,WAAW;MACf,oBAAkB/B,eAAgB;MAClCyC,YAAY,EAAExC,gBAAiB;MAC/BuB,QAAQ,EAAEA,QAAS;MACnBf,EAAE,EAAEC,UAAW;MACfgC,UAAU,EAAE;QACV,mBAAmB,EAAEJ,qBAAqB;QAC1C,iBAAiB,EAAEC,cAAc;QACjC,SAAS,EAAElB;MACb,CAAE;MACFV,QAAQ,EAAEiB,aAAc;MACxBe,IAAI,EAAEjC,UAAW;MACjBkC,QAAQ,EAAEvC,kBAAmB;MAC7BwC,MAAM,EAAE,IAAK;MACb5B,MAAM,EAAEA,MAAO;MACfC,QAAQ,EAAEA,QAAS;MACnBE,OAAO,EAAEA,OAAQ;MACjBrB,GAAG,EAAEA,GAAI;MACTuB,SAAS,EAAEA;IAAU,CACtB,CAAC;EAAA,CACH,EACD,CACErB,gBAAgB,EAChBuB,QAAQ,EACRd,UAAU,EACVqB,WAAW,EACX1B,kBAAkB,EAClBY,MAAM,EACNC,QAAQ,EACRE,OAAO,EACPrB,GAAG,EACHsB,MAAM,EACNC,SAAS,CAEb,CAAC;EAED,OACE1B,IAAA,CAACJ,KAAK;IACJQ,eAAe,EAAEA,eAAgB;IACjCG,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnC0C,SAAS,EAAC,QAAQ;IAClBC,eAAe;IACfxC,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,EAAE,EAAEC,UAAW;IACfE,UAAU,EAAEA,UAAW;IACvBC,WAAW,EAAEA,WAAY;IACzBE,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACboB,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CACF,CAAC;AAED,MAAMY,oBAAoB,GAAG7D,IAAI,CAACU,YAAY,CAAC;AAC/CmD,oBAAoB,CAACC,WAAW,GAAG,cAAc;AAEjD,SAASD,oBAAoB,IAAInD,YAAY"}

package/dist/PasswordField.js

@@ -20,6 +20,7 @@ import { getControlState, useInputValues } from "./inputUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PasswordField = forwardRef((_ref, ref) => {
   let {
+    ariaDescribedBy,
     autoCompleteType,
     defaultValue,
     errorMessage,
@@ -27,7 +28,7 @@ const PasswordField = forwardRef((_ref, ref) => {
     hasInitialFocus,
     hint,
     id: idOverride,
-    inputFocusRef,
+    inputRef,
     isDisabled = false,
     isFullWidth = false,
     isOptional = false,
@@ -59,12 +60,11 @@ const PasswordField = forwardRef((_ref, ref) => {
     value,
     controlState: controlledStateRef.current
   });
-  const inputRef = useRef(null);
-  useImperativeHandle(inputFocusRef, () => {
-    const element = inputRef.current;
+  const localInputRef = useRef(null);
+  useImperativeHandle(inputRef, () => {
     return {
       focus: () => {
-        element && element.focus();
+        localInputRef.current?.focus();
       }
     };
   }, []);
@@ -83,7 +83,6 @@ const PasswordField = forwardRef((_ref, ref) => {
       "aria-describedby": ariaDescribedBy,
       autoComplete: inputType === "password" ? autoCompleteType : "off",
       autoFocus: hasInitialFocus,
-      "data-se": testId,
       endAdornment: hasShowPassword && _jsx(_InputAdornment, {
         position: "end",
         children: _jsx(_IconButton, {
@@ -98,9 +97,10 @@ const PasswordField = forwardRef((_ref, ref) => {
       inputProps: {
         "aria-errormessage": errorMessageElementId,
         "aria-labelledby": labelElementId,
+        "data-se": testId,
         role: "textbox"
       },
-      inputRef: inputRef,
+      inputRef: localInputRef,
       name: nameOverride ?? id,
       onChange: onChange,
       onFocus: onFocus,
@@ -114,6 +114,7 @@ const PasswordField = forwardRef((_ref, ref) => {
     });
   }, [autoCompleteType, hasInitialFocus, inputValues, t, togglePasswordVisibility, inputType, nameOverride, onChange, onFocus, onBlur, placeholder, isOptional, isReadOnly, hasShowPassword, ref, testId, translate]);
   return _jsx(Field, {
+    ariaDescribedBy: ariaDescribedBy,
     errorMessage: errorMessage,
     errorMessageList: errorMessageList,
     fieldType: "single",

package/dist/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":["forwardRef","memo","useCallback","useImperativeHandle","useRef","useState","ShowIcon","HideIcon","Field","useTranslation","getControlState","useInputValues","jsx","_jsx","PasswordField","_ref","ref","autoCompleteType","defaultValue","errorMessage","errorMessageList","hasInitialFocus","hint","id","idOverride","inputFocusRef","isDisabled","isFullWidth","isOptional","hasShowPassword","isReadOnly","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","placeholder","testId","translate","value","t","inputType","setInputType","togglePasswordVisibility","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","inputRef","element","focus","event","renderFieldComponent","_ref2","ariaDescribedBy","errorMessageElementId","labelElementId","_InputBase","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","onClick","inputProps","role","readOnly","required","type","fieldType","hasVisibleLabel","MemoizedPasswordField","displayName"],"sources":["../src/PasswordField.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { InputAdornment, InputBase, IconButton } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { ShowIcon, HideIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport { useTranslation } from \"react-i18next\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\nimport { FocusHandle } from \"./@types/react-augment\";\n\nexport type PasswordFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: \"current-password\" | \"new-password\";\n  /**\n   * initial value for input. Use when component in uncontrolled.\n   */\n  defaultValue?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * If `true`, the show/hide icon is not shown to the user\n   */\n  hasShowPassword?: boolean;\n  /**\n   * The ref forwarded to the TextField to expose focus()\n   */\n  inputFocusRef?: React.RefObject<FocusHandle>;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * The value of the `input` element. Use when component is controlled.\n   */\n  value?: string;\n} & FieldComponentProps &\n  AllowedProps;\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      autoCompleteType,\n      defaultValue,\n      errorMessage,\n      errorMessageList,\n      hasInitialFocus,\n      hint,\n      id: idOverride,\n      inputFocusRef,\n      isDisabled = false,\n      isFullWidth = false,\n      isOptional = false,\n      hasShowPassword = true,\n      isReadOnly,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      placeholder,\n      testId,\n      translate,\n      value,\n    },\n    ref\n  ) => {\n    const { t } = useTranslation();\n    const [inputType, setInputType] = useState(\"password\");\n\n    const togglePasswordVisibility = useCallback(() => {\n      setInputType((inputType) =>\n        inputType === \"password\" ? \"text\" : \"password\"\n      );\n    }, []);\n\n    const controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      })\n    );\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const 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 onChange = useCallback<\n      ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>\n    >(\n      (event) => {\n        onChangeProp?.(event);\n      },\n      [onChangeProp]\n    );\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n        <InputBase\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          autoComplete={inputType === \"password\" ? autoCompleteType : \"off\"}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          data-se={testId}\n          endAdornment={\n            hasShowPassword && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-controls={id}\n                  aria-label={\n                    inputType === \"password\"\n                      ? t(\"passwordfield.icon.label.show\")\n                      : t(\"passwordfield.icon.label.hide\")\n                  }\n                  aria-pressed={inputType === \"text\"}\n                  onClick={togglePasswordVisibility}\n                >\n                  {inputType === \"password\" ? <ShowIcon /> : <HideIcon />}\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          id={id}\n          inputProps={{\n            \"aria-errormessage\": errorMessageElementId,\n            \"aria-labelledby\": labelElementId,\n            // role: \"textbox\" Added because password inputs don't have an implicit role assigned. This causes problems with element selection.\n            role: \"textbox\",\n          }}\n          inputRef={inputRef}\n          name={nameOverride ?? id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          required={!isOptional}\n          translate={translate}\n          type={inputType}\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        inputValues,\n        t,\n        togglePasswordVisibility,\n        inputType,\n        nameOverride,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        isOptional,\n        isReadOnly,\n        hasShowPassword,\n        ref,\n        testId,\n        translate,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        errorMessageList={errorMessageList}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedPasswordField = memo(PasswordField);\nMemoizedPasswordField.displayName = \"PasswordField\";\n\nexport { MemoizedPasswordField as PasswordField };\n"],"mappings":"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"}
+{"version":3,"file":"PasswordField.js","names":["forwardRef","memo","useCallback","useImperativeHandle","useRef","useState","ShowIcon","HideIcon","Field","useTranslation","getControlState","useInputValues","jsx","_jsx","PasswordField","_ref","ref","ariaDescribedBy","autoCompleteType","defaultValue","errorMessage","errorMessageList","hasInitialFocus","hint","id","idOverride","inputRef","isDisabled","isFullWidth","isOptional","hasShowPassword","isReadOnly","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","placeholder","testId","translate","value","t","inputType","setInputType","togglePasswordVisibility","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","localInputRef","focus","event","renderFieldComponent","_ref2","errorMessageElementId","labelElementId","_InputBase","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","onClick","inputProps","role","readOnly","required","type","fieldType","hasVisibleLabel","MemoizedPasswordField","displayName"],"sources":["../src/PasswordField.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { InputAdornment, InputBase, IconButton } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { ShowIcon, HideIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport { useTranslation } from \"react-i18next\";\nimport { FocusHandle, getControlState, useInputValues } from \"./inputUtils\";\n\nexport type PasswordFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: \"current-password\" | \"new-password\";\n  /**\n   * initial value for input. Use when component in uncontrolled.\n   */\n  defaultValue?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * If `true`, the show/hide icon is not shown to the user\n   */\n  hasShowPassword?: boolean;\n  /**\n   * The ref forwarded to the TextField\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * The value of the `input` element. Use when component is controlled.\n   */\n  value?: string;\n} & FieldComponentProps &\n  AllowedProps;\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      ariaDescribedBy,\n      autoCompleteType,\n      defaultValue,\n      errorMessage,\n      errorMessageList,\n      hasInitialFocus,\n      hint,\n      id: idOverride,\n      inputRef,\n      isDisabled = false,\n      isFullWidth = false,\n      isOptional = false,\n      hasShowPassword = true,\n      isReadOnly,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      placeholder,\n      testId,\n      translate,\n      value,\n    },\n    ref\n  ) => {\n    const { t } = useTranslation();\n    const [inputType, setInputType] = useState(\"password\");\n\n    const togglePasswordVisibility = useCallback(() => {\n      setInputType((inputType) =>\n        inputType === \"password\" ? \"text\" : \"password\"\n      );\n    }, []);\n\n    const controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      })\n    );\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const 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 onChange = useCallback<\n      ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>\n    >(\n      (event) => {\n        onChangeProp?.(event);\n      },\n      [onChangeProp]\n    );\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n        <InputBase\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          autoComplete={inputType === \"password\" ? autoCompleteType : \"off\"}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          endAdornment={\n            hasShowPassword && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-controls={id}\n                  aria-label={\n                    inputType === \"password\"\n                      ? t(\"passwordfield.icon.label.show\")\n                      : t(\"passwordfield.icon.label.hide\")\n                  }\n                  aria-pressed={inputType === \"text\"}\n                  onClick={togglePasswordVisibility}\n                >\n                  {inputType === \"password\" ? <ShowIcon /> : <HideIcon />}\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          id={id}\n          inputProps={{\n            \"aria-errormessage\": errorMessageElementId,\n            \"aria-labelledby\": labelElementId,\n            \"data-se\": testId,\n            // role: \"textbox\" Added because password inputs don't have an implicit role assigned. This causes problems with element selection.\n            role: \"textbox\",\n          }}\n          inputRef={localInputRef}\n          name={nameOverride ?? id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          required={!isOptional}\n          translate={translate}\n          type={inputType}\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        inputValues,\n        t,\n        togglePasswordVisibility,\n        inputType,\n        nameOverride,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        isOptional,\n        isReadOnly,\n        hasShowPassword,\n        ref,\n        testId,\n        translate,\n      ]\n    );\n\n    return (\n      <Field\n        ariaDescribedBy={ariaDescribedBy}\n        errorMessage={errorMessage}\n        errorMessageList={errorMessageList}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedPasswordField = memo(PasswordField);\nMemoizedPasswordField.displayName = \"PasswordField\";\n\nexport { MemoizedPasswordField as PasswordField };\n"],"mappings":"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"}

package/dist/Radio.js

@@ -15,7 +15,7 @@ import { memo, useCallback, useRef, useImperativeHandle } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Radio = _ref => {
   let {
-    inputFocusRef,
+    inputRef,
     isChecked,
     isDisabled,
     isInvalid,
@@ -27,12 +27,11 @@ const Radio = _ref => {
     onChange: onChangeProp,
     onBlur: onBlurProp
   } = _ref;
-  const ref = useRef(null);
-  useImperativeHandle(inputFocusRef, () => {
-    const element = ref.current;
+  const localInputRef = useRef(null);
+  useImperativeHandle(inputRef, () => {
     return {
       focus: () => {
-        element && element.focus();
+        localInputRef.current?.focus();
       }
     };
   }, []);
@@ -46,10 +45,12 @@ const Radio = _ref => {
     checked: isChecked,
     className: isInvalid ? "Mui-error" : "",
     control: _jsx(_Radio, {
-      inputRef: ref,
+      inputProps: {
+        "data-se": testId
+      },
+      inputRef: localInputRef,
       onChange: onChange
     }),
-    "data-se": testId,
     disabled: isDisabled,
     label: label,
     name: name,

package/dist/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["memo","useCallback","useRef","useImperativeHandle","jsx","_jsx","Radio","_ref","inputFocusRef","isChecked","isDisabled","isInvalid","label","name","testId","translate","value","onChange","onChangeProp","onBlur","onBlurProp","ref","element","current","focus","event","checked","_FormControlLabel","className","control","_Radio","inputRef","disabled","MemoizedRadio","displayName"],"sources":["../src/Radio.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  Radio as MuiRadio,\n  RadioProps as MuiRadioProps,\n} from \"@mui/material\";\nimport { memo, useCallback, useRef, useImperativeHandle } from \"react\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport { FocusHandle } from \"./@types/react-augment\";\n\nexport type RadioProps = {\n  /**\n   * The ref forwarded to the Radio to expose focus()\n   */\n  inputFocusRef?: React.RefObject<FocusHandle>;\n  /**\n   * If `true`, the Radio is selected\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the Radio has an invalid value\n   */\n  isInvalid?: boolean;\n  /**\n   * The label text for the Radio\n   */\n  label: string;\n  /**\n   * The value attribute of the Radio\n   */\n  value: string;\n  /**\n   * Callback fired when the state is changed. Provides event and checked value.\n   */\n  onChange?: MuiRadioProps[\"onChange\"];\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<FieldComponentProps, \"isDisabled\" | \"name\"> &\n  AllowedProps;\n\nconst Radio = ({\n  inputFocusRef,\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label,\n  name,\n  testId,\n  translate,\n  value,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n}: RadioProps) => {\n  const ref = useRef<HTMLInputElement>(null);\n  useImperativeHandle(\n    inputFocusRef,\n    () => {\n      const element = ref.current;\n      return {\n        focus: () => {\n          element && element.focus();\n        },\n      };\n    },\n    []\n  );\n\n  const onChange = useCallback<NonNullable<MuiRadioProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp]\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp]\n  );\n\n  return (\n    <FormControlLabel\n      checked={isChecked}\n      className={isInvalid ? \"Mui-error\" : \"\"}\n      control={<MuiRadio inputRef={ref} onChange={onChange} />}\n      data-se={testId}\n      disabled={isDisabled}\n      label={label}\n      name={name}\n      translate={translate}\n      value={value}\n      onBlur={onBlur}\n    />\n  );\n};\n\nconst MemoizedRadio = memo(Radio);\nMemoizedRadio.displayName = \"Radio\";\n\nexport { MemoizedRadio as Radio };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAQA,SAASA,IAAI,EAAEC,WAAW,EAAEC,MAAM,EAAEC,mBAAmB,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAsCvE,MAAMC,KAAK,GAAGC,IAAA,IAYI;EAAA,IAZH;IACbC,aAAa;IACbC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,SAAS;IACTC,KAAK;IACLC,QAAQ,EAAEC,YAAY;IACtBC,MAAM,EAAEC;EACE,CAAC,GAAAb,IAAA;EACX,MAAMc,GAAG,GAAGnB,MAAM,CAAmB,IAAI,CAAC;EAC1CC,mBAAmB,CACjBK,aAAa,EACb,MAAM;IACJ,MAAMc,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,MAAMP,QAAQ,GAAGhB,WAAW,CAC1B,CAACwB,KAAK,EAAEC,OAAO,KAAK;IAClBR,YAAY,GAAGO,KAAK,EAAEC,OAAO,CAAC;EAChC,CAAC,EACD,CAACR,YAAY,CACf,CAAC;EAED,MAAMC,MAAM,GAAGlB,WAAW,CACvBwB,KAAK,IAAK;IACTL,UAAU,GAAGK,KAAK,CAAC;EACrB,CAAC,EACD,CAACL,UAAU,CACb,CAAC;EAED,OACEf,IAAA,CAAAsB,iBAAA;IACED,OAAO,EAAEjB,SAAU;IACnBmB,SAAS,EAAEjB,SAAS,GAAG,WAAW,GAAG,EAAG;IACxCkB,OAAO,EAAExB,IAAA,CAAAyB,MAAA;MAAUC,QAAQ,EAAEV,GAAI;MAACJ,QAAQ,EAAEA;IAAS,CAAE,CAAE;IACzD,WAASH,MAAO;IAChBkB,QAAQ,EAAEtB,UAAW;IACrBE,KAAK,EAAEA,KAAM;IACbC,IAAI,EAAEA,IAAK;IACXE,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbG,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC;AAED,MAAMc,aAAa,GAAGjC,IAAI,CAACM,KAAK,CAAC;AACjC2B,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAI3B,KAAK"}
+{"version":3,"file":"Radio.js","names":["memo","useCallback","useRef","useImperativeHandle","jsx","_jsx","Radio","_ref","inputRef","isChecked","isDisabled","isInvalid","label","name","testId","translate","value","onChange","onChangeProp","onBlur","onBlurProp","localInputRef","focus","current","event","checked","_FormControlLabel","className","control","_Radio","inputProps","disabled","MemoizedRadio","displayName"],"sources":["../src/Radio.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  Radio as MuiRadio,\n  RadioProps as MuiRadioProps,\n} from \"@mui/material\";\nimport { memo, useCallback, useRef, useImperativeHandle } from \"react\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport { FocusHandle } from \"./inputUtils\";\n\nexport type RadioProps = {\n  /**\n   * The ref forwarded to the Radio\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * If `true`, the Radio is selected\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the Radio has an invalid value\n   */\n  isInvalid?: boolean;\n  /**\n   * The label text for the Radio\n   */\n  label: string;\n  /**\n   * The value attribute of the Radio\n   */\n  value: string;\n  /**\n   * Callback fired when the state is changed. Provides event and checked value.\n   */\n  onChange?: MuiRadioProps[\"onChange\"];\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<FieldComponentProps, \"isDisabled\" | \"name\"> &\n  AllowedProps;\n\nconst Radio = ({\n  inputRef,\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label,\n  name,\n  testId,\n  translate,\n  value,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n}: RadioProps) => {\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 onChange = useCallback<NonNullable<MuiRadioProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp]\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp]\n  );\n\n  return (\n    <FormControlLabel\n      checked={isChecked}\n      className={isInvalid ? \"Mui-error\" : \"\"}\n      control={\n        <MuiRadio\n          inputProps={{\n            \"data-se\": testId,\n          }}\n          inputRef={localInputRef}\n          onChange={onChange}\n        />\n      }\n      disabled={isDisabled}\n      label={label}\n      name={name}\n      translate={translate}\n      value={value}\n      onBlur={onBlur}\n    />\n  );\n};\n\nconst MemoizedRadio = memo(Radio);\nMemoizedRadio.displayName = \"Radio\";\n\nexport { MemoizedRadio as Radio };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAQA,SAASA,IAAI,EAAEC,WAAW,EAAEC,MAAM,EAAEC,mBAAmB,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAsCvE,MAAMC,KAAK,GAAGC,IAAA,IAYI;EAAA,IAZH;IACbC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,SAAS;IACTC,KAAK;IACLC,QAAQ,EAAEC,YAAY;IACtBC,MAAM,EAAEC;EACE,CAAC,GAAAb,IAAA;EACX,MAAMc,aAAa,GAAGnB,MAAM,CAAmB,IAAI,CAAC;EACpDC,mBAAmB,CACjBK,QAAQ,EACR,MAAM;IACJ,OAAO;MACLc,KAAK,EAAEA,CAAA,KAAM;QACXD,aAAa,CAACE,OAAO,EAAED,KAAK,CAAC,CAAC;MAChC;IACF,CAAC;EACH,CAAC,EACD,EACF,CAAC;EAED,MAAML,QAAQ,GAAGhB,WAAW,CAC1B,CAACuB,KAAK,EAAEC,OAAO,KAAK;IAClBP,YAAY,GAAGM,KAAK,EAAEC,OAAO,CAAC;EAChC,CAAC,EACD,CAACP,YAAY,CACf,CAAC;EAED,MAAMC,MAAM,GAAGlB,WAAW,CACvBuB,KAAK,IAAK;IACTJ,UAAU,GAAGI,KAAK,CAAC;EACrB,CAAC,EACD,CAACJ,UAAU,CACb,CAAC;EAED,OACEf,IAAA,CAAAqB,iBAAA;IACED,OAAO,EAAEhB,SAAU;IACnBkB,SAAS,EAAEhB,SAAS,GAAG,WAAW,GAAG,EAAG;IACxCiB,OAAO,EACLvB,IAAA,CAAAwB,MAAA;MACEC,UAAU,EAAE;QACV,SAAS,EAAEhB;MACb,CAAE;MACFN,QAAQ,EAAEa,aAAc;MACxBJ,QAAQ,EAAEA;IAAS,CACpB,CACF;IACDc,QAAQ,EAAErB,UAAW;IACrBE,KAAK,EAAEA,KAAM;IACbC,IAAI,EAAEA,IAAK;IACXE,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbG,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC;AAED,MAAMa,aAAa,GAAGhC,IAAI,CAACM,KAAK,CAAC;AACjC0B,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAI1B,KAAK"}

package/dist/RadioGroup.js

@@ -16,6 +16,7 @@ import { getControlState, useInputValues } from "./inputUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RadioGroup = _ref => {
   let {
+    ariaDescribedBy,
     children,
     defaultValue,
     errorMessage,
@@ -64,6 +65,7 @@ const RadioGroup = _ref => {
     });
   }, [children, inputValues, nameOverride, onChange, testId, translate]);
   return _jsx(Field, {
+    ariaDescribedBy: ariaDescribedBy,
     errorMessage: errorMessage,
     errorMessageList: errorMessageList,
     fieldType: "group",

package/dist/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["memo","useCallback","useRef","Field","getControlState","useInputValues","jsx","_jsx","RadioGroup","_ref","children","defaultValue","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","label","name","nameOverride","onChange","onChangeProp","testId","translate","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","renderFieldComponent","_ref2","ariaDescribedBy","errorMessageElementId","labelElementId","_RadioGroup","fieldType","hasVisibleLabel","MemoizedRadioGroup","displayName"],"sources":["../src/RadioGroup.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  RadioGroup as MuiRadioGroup,\n  type RadioGroupProps as MuiRadioGroupProps,\n} from \"@mui/material\";\nimport { memo, ReactElement, useCallback, useRef } from \"react\";\n\nimport { Radio, RadioProps } from \"./Radio\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\n\nexport type RadioGroupProps = {\n  /**\n   * The Radio components within the group. Must include two or more.\n   */\n  children: Array<ReactElement<typeof Radio>>;\n  /**\n   * The text value of the Radio that should be selected by default\n   */\n  defaultValue?: string;\n  /**\n   * The text label for the RadioGroup\n   */\n  label: string;\n  /**\n   * Listen for changes in the browser that change `value`\n   */\n  onChange?: MuiRadioGroupProps[\"onChange\"];\n  /**\n   * The `value` on the selected Radio\n   */\n  value?: RadioProps[\"value\"];\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"name\"\n> &\n  AllowedProps;\n\nconst RadioGroup = ({\n  children,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled,\n  label,\n  name: nameOverride,\n  onChange: onChangeProp,\n  testId,\n  translate,\n  value,\n}: RadioGroupProps) => {\n  const controlledStateRef = useRef(\n    getControlState({ controlledValue: value, uncontrolledValue: defaultValue })\n  );\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiRadioGroupProps[\"onChange\"]>>(\n    (event, value) => {\n      onChangeProp?.(event, value);\n    },\n    [onChangeProp]\n  );\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n      <MuiRadioGroup\n        {...inputValues}\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        aria-labelledby={labelElementId}\n        data-se={testId}\n        id={id}\n        name={nameOverride ?? id}\n        onChange={onChange}\n        translate={translate}\n      >\n        {children}\n      </MuiRadioGroup>\n    ),\n    [children, inputValues, nameOverride, onChange, testId, translate]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"group\"\n      hasVisibleLabel={false}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\nMemoizedRadioGroup.displayName = \"RadioGroup\";\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAMA,SAASA,IAAI,EAAgBC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAAC,SAGvDC,KAAK;AAAA,SAGLC,eAAe,EAAEC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAmCxC,MAAMC,UAAU,GAAGC,IAAA,IAeI;EAAA,IAfH;IAClBC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC,gBAAgB;IAChBC,IAAI;IACJC,iBAAiB;IACjBC,EAAE,EAAEC,UAAU;IACdC,UAAU;IACVC,KAAK;IACLC,IAAI,EAAEC,YAAY;IAClBC,QAAQ,EAAEC,YAAY;IACtBC,MAAM;IACNC,SAAS;IACTC;EACe,CAAC,GAAAjB,IAAA;EAChB,MAAMkB,kBAAkB,GAAGzB,MAAM,CAC/BE,eAAe,CAAC;IAAEwB,eAAe,EAAEF,KAAK;IAAEG,iBAAiB,EAAElB;EAAa,CAAC,CAC7E,CAAC;EACD,MAAMmB,WAAW,GAAGzB,cAAc,CAAC;IACjCM,YAAY;IACZe,KAAK;IACLK,YAAY,EAAEJ,kBAAkB,CAACK;EACnC,CAAC,CAAC;EAEF,MAAMV,QAAQ,GAAGrB,WAAW,CAC1B,CAACgC,KAAK,EAAEP,KAAK,KAAK;IAChBH,YAAY,GAAGU,KAAK,EAAEP,KAAK,CAAC;EAC9B,CAAC,EACD,CAACH,YAAY,CACf,CAAC;EACD,MAAMW,oBAAoB,GAAGjC,WAAW,CACtCkC,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEC,qBAAqB;MAAErB,EAAE;MAAEsB;IAAe,CAAC,GAAAH,KAAA;IAAA,OAC7D5B,IAAA,CAAAgC,WAAA;MAAA,GACMT,WAAW;MACf,oBAAkBM,eAAgB;MAClC,qBAAmBC,qBAAsB;MACzC,mBAAiBC,cAAe;MAChC,WAASd,MAAO;MAChBR,EAAE,EAAEA,EAAG;MACPI,IAAI,EAAEC,YAAY,IAAIL,EAAG;MACzBM,QAAQ,EAAEA,QAAS;MACnBG,SAAS,EAAEA,SAAU;MAAAf,QAAA,EAEpBA;IAAQ,CACI,CAAC;EAAA,CACjB,EACD,CAACA,QAAQ,EAAEoB,WAAW,EAAET,YAAY,EAAEC,QAAQ,EAAEE,MAAM,EAAEC,SAAS,CACnE,CAAC;EAED,OACElB,IAAA,CAACJ,KAAK;IACJS,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnC2B,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,KAAM;IACvB3B,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbe,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMQ,kBAAkB,GAAG1C,IAAI,CAACQ,UAAU,CAAC;AAC3CkC,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIlC,UAAU"}
+{"version":3,"file":"RadioGroup.js","names":["memo","useCallback","useRef","Field","getControlState","useInputValues","jsx","_jsx","RadioGroup","_ref","ariaDescribedBy","children","defaultValue","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","label","name","nameOverride","onChange","onChangeProp","testId","translate","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","renderFieldComponent","_ref2","errorMessageElementId","labelElementId","_RadioGroup","fieldType","hasVisibleLabel","MemoizedRadioGroup","displayName"],"sources":["../src/RadioGroup.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  RadioGroup as MuiRadioGroup,\n  type RadioGroupProps as MuiRadioGroupProps,\n} from \"@mui/material\";\nimport { memo, ReactElement, useCallback, useRef } from \"react\";\n\nimport { Radio, RadioProps } from \"./Radio\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\n\nexport type RadioGroupProps = {\n  /**\n   * The Radio components within the group. Must include two or more.\n   */\n  children: Array<ReactElement<typeof Radio>>;\n  /**\n   * The text value of the Radio that should be selected by default\n   */\n  defaultValue?: string;\n  /**\n   * The text label for the RadioGroup\n   */\n  label: string;\n  /**\n   * Listen for changes in the browser that change `value`\n   */\n  onChange?: MuiRadioGroupProps[\"onChange\"];\n  /**\n   * The `value` on the selected Radio\n   */\n  value?: RadioProps[\"value\"];\n} & Pick<\n  FieldComponentProps,\n  | \"ariaDescribedBy\"\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"name\"\n> &\n  AllowedProps;\n\nconst RadioGroup = ({\n  ariaDescribedBy,\n  children,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled,\n  label,\n  name: nameOverride,\n  onChange: onChangeProp,\n  testId,\n  translate,\n  value,\n}: RadioGroupProps) => {\n  const controlledStateRef = useRef(\n    getControlState({ controlledValue: value, uncontrolledValue: defaultValue })\n  );\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiRadioGroupProps[\"onChange\"]>>(\n    (event, value) => {\n      onChangeProp?.(event, value);\n    },\n    [onChangeProp]\n  );\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n      <MuiRadioGroup\n        {...inputValues}\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        aria-labelledby={labelElementId}\n        data-se={testId}\n        id={id}\n        name={nameOverride ?? id}\n        onChange={onChange}\n        translate={translate}\n      >\n        {children}\n      </MuiRadioGroup>\n    ),\n    [children, inputValues, nameOverride, onChange, testId, translate]\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"group\"\n      hasVisibleLabel={false}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\nMemoizedRadioGroup.displayName = \"RadioGroup\";\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAMA,SAASA,IAAI,EAAgBC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAAC,SAGvDC,KAAK;AAAA,SAGLC,eAAe,EAAEC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAoCxC,MAAMC,UAAU,GAAGC,IAAA,IAgBI;EAAA,IAhBH;IAClBC,eAAe;IACfC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC,gBAAgB;IAChBC,IAAI;IACJC,iBAAiB;IACjBC,EAAE,EAAEC,UAAU;IACdC,UAAU;IACVC,KAAK;IACLC,IAAI,EAAEC,YAAY;IAClBC,QAAQ,EAAEC,YAAY;IACtBC,MAAM;IACNC,SAAS;IACTC;EACe,CAAC,GAAAlB,IAAA;EAChB,MAAMmB,kBAAkB,GAAG1B,MAAM,CAC/BE,eAAe,CAAC;IAAEyB,eAAe,EAAEF,KAAK;IAAEG,iBAAiB,EAAElB;EAAa,CAAC,CAC7E,CAAC;EACD,MAAMmB,WAAW,GAAG1B,cAAc,CAAC;IACjCO,YAAY;IACZe,KAAK;IACLK,YAAY,EAAEJ,kBAAkB,CAACK;EACnC,CAAC,CAAC;EAEF,MAAMV,QAAQ,GAAGtB,WAAW,CAC1B,CAACiC,KAAK,EAAEP,KAAK,KAAK;IAChBH,YAAY,GAAGU,KAAK,EAAEP,KAAK,CAAC;EAC9B,CAAC,EACD,CAACH,YAAY,CACf,CAAC;EACD,MAAMW,oBAAoB,GAAGlC,WAAW,CACtCmC,KAAA;IAAA,IAAC;MAAE1B,eAAe;MAAE2B,qBAAqB;MAAEpB,EAAE;MAAEqB;IAAe,CAAC,GAAAF,KAAA;IAAA,OAC7D7B,IAAA,CAAAgC,WAAA;MAAA,GACMR,WAAW;MACf,oBAAkBrB,eAAgB;MAClC,qBAAmB2B,qBAAsB;MACzC,mBAAiBC,cAAe;MAChC,WAASb,MAAO;MAChBR,EAAE,EAAEA,EAAG;MACPI,IAAI,EAAEC,YAAY,IAAIL,EAAG;MACzBM,QAAQ,EAAEA,QAAS;MACnBG,SAAS,EAAEA,SAAU;MAAAf,QAAA,EAEpBA;IAAQ,CACI,CAAC;EAAA,CACjB,EACD,CAACA,QAAQ,EAAEoB,WAAW,EAAET,YAAY,EAAEC,QAAQ,EAAEE,MAAM,EAAEC,SAAS,CACnE,CAAC;EAED,OACEnB,IAAA,CAACJ,KAAK;IACJO,eAAe,EAAEA,eAAgB;IACjCG,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnC0B,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,KAAM;IACvB1B,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbe,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMO,kBAAkB,GAAG1C,IAAI,CAACQ,UAAU,CAAC;AAC3CkC,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIlC,UAAU"}

package/dist/SearchField.js

@@ -19,6 +19,7 @@ import { getControlState, useInputValues } from "./inputUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SearchField = forwardRef((_ref, ref) => {
   let {
+    ariaDescribedBy,
     autoCompleteType,
     defaultValue,
     hasInitialFocus,
@@ -88,6 +89,7 @@ const SearchField = forwardRef((_ref, ref) => {
     });
   }, [autoCompleteType, defaultValue, hasInitialFocus, inputValues, isDisabled, nameOverride, onBlur, onChange, onClear, onFocus, placeholder, ref, testId, translate]);
   return _jsx(Field, {
+    ariaDescribedBy: ariaDescribedBy,
     fieldType: "single",
     hasVisibleLabel: false,
     id: idOverride,

package/dist/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","names":["forwardRef","memo","useCallback","useRef","CloseCircleFilledIcon","SearchIcon","Field","getControlState","useInputValues","jsx","_jsx","SearchField","_ref","ref","autoCompleteType","defaultValue","hasInitialFocus","id","idOverride","isDisabled","isFullWidth","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","onClear","onClearProp","placeholder","testId","translate","value","event","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","renderFieldComponent","_ref2","ariaDescribedBy","_InputBase","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","disabled","onClick","size","startAdornment","type","fieldType","hasVisibleLabel","isOptional","MemoizedSearchField","displayName"],"sources":["../src/SearchField.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { InputAdornment, InputBase, IconButton } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  memo,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport { CloseCircleFilledIcon, SearchIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\n\nexport type SearchFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n  /**\n   * The value of the `input` element to use when uncontrolled.\n   */\n  defaultValue?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * This label won't show up visually, but it's required for accessibility.\n   */\n  label: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the clear button is pressed.\n   */\n  onClear?: () => void;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * The value of the `input` element, to use when controlled.\n   */\n  value?: string;\n} & Pick<FieldComponentProps, \"id\" | \"isDisabled\" | \"name\" | \"isFullWidth\"> &\n  AllowedProps;\n\nconst SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      autoCompleteType,\n      defaultValue,\n      hasInitialFocus,\n      id: idOverride,\n      isDisabled = false,\n      isFullWidth = false,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      onClear: onClearProp,\n      placeholder,\n      testId,\n      translate,\n      value,\n    },\n    ref\n  ) => {\n    const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =\n      useCallback(\n        (event) => {\n          onChangeProp?.(event);\n        },\n        [onChangeProp]\n      );\n\n    const onClear = useCallback(() => {\n      onClearProp?.();\n    }, [onClearProp]);\n\n    const controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      })\n    );\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          data-se={testId}\n          endAdornment={\n            defaultValue && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-label=\"Clear\"\n                  disabled={isDisabled}\n                  onClick={onClear}\n                  size=\"small\"\n                >\n                  <CloseCircleFilledIcon />\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          id={id}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          placeholder={placeholder}\n          ref={ref}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <SearchIcon />\n            </InputAdornment>\n          }\n          translate={translate}\n          type=\"search\"\n        />\n      ),\n      [\n        autoCompleteType,\n        defaultValue,\n        hasInitialFocus,\n        inputValues,\n        isDisabled,\n        nameOverride,\n        onBlur,\n        onChange,\n        onClear,\n        onFocus,\n        placeholder,\n        ref,\n        testId,\n        translate,\n      ]\n    );\n\n    return (\n      <Field\n        fieldType=\"single\"\n        hasVisibleLabel={false}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth}\n        isOptional={true}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedSearchField = memo(SearchField);\nMemoizedSearchField.displayName = \"SearchField\";\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAGEA,UAAU,EAEVC,IAAI,EACJC,WAAW,EACXC,MAAM,QACD,OAAO;AAAC,SAENC,qBAAqB,EAAEC,UAAU;AAAA,SACjCC,KAAK;AAAA,SAGLC,eAAe,EAAEC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAwDxC,MAAMC,WAAW,GAAGX,UAAU,CAC5B,CAAAY,IAAA,EAmBEC,GAAG,KACA;EAAA,IAnBH;IACEC,gBAAgB;IAChBC,YAAY;IACZC,eAAe;IACfC,EAAE,EAAEC,UAAU;IACdC,UAAU,GAAG,KAAK;IAClBC,WAAW,GAAG,KAAK;IACnBC,KAAK;IACLC,IAAI,EAAEC,YAAY;IAClBC,QAAQ,EAAEC,YAAY;IACtBC,OAAO;IACPC,MAAM;IACNC,OAAO,EAAEC,WAAW;IACpBC,WAAW;IACXC,MAAM;IACNC,SAAS;IACTC;EACF,CAAC,GAAArB,IAAA;EAGD,MAAMY,QAAoE,GACxEtB,WAAW,CACRgC,KAAK,IAAK;IACTT,YAAY,GAAGS,KAAK,CAAC;EACvB,CAAC,EACD,CAACT,YAAY,CACf,CAAC;EAEH,MAAMG,OAAO,GAAG1B,WAAW,CAAC,MAAM;IAChC2B,WAAW,GAAG,CAAC;EACjB,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,MAAMM,kBAAkB,GAAGhC,MAAM,CAC/BI,eAAe,CAAC;IACd6B,eAAe,EAAEH,KAAK;IACtBI,iBAAiB,EAAEtB;EACrB,CAAC,CACH,CAAC;EACD,MAAMuB,WAAW,GAAG9B,cAAc,CAAC;IACjCO,YAAY;IACZkB,KAAK;IACLM,YAAY,EAAEJ,kBAAkB,CAACK;EACnC,CAAC,CAAC;EAEF,MAAMC,oBAAoB,GAAGvC,WAAW,CACtCwC,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAE1B;IAAG,CAAC,GAAAyB,KAAA;IAAA,OACtBhC,IAAA,CAAAkC,UAAA;MAAA,GACMN,WAAW;MACf,oBAAkBK,eAAgB;MAClCE,YAAY,EAAE/B,gBAAiB;MAE/BgC,SAAS,EAAE9B,eAAgB;MAC3B,WAASe,MAAO;MAChBgB,YAAY,EACVhC,YAAY,IACVL,IAAA,CAAAsC,eAAA;QAAgBC,QAAQ,EAAC,KAAK;QAAAC,QAAA,EAC5BxC,IAAA,CAAAyC,WAAA;UACE,cAAW,OAAO;UAClBC,QAAQ,EAAEjC,UAAW;UACrBkC,OAAO,EAAEzB,OAAQ;UACjB0B,IAAI,EAAC,OAAO;UAAAJ,QAAA,EAEZxC,IAAA,CAACN,qBAAqB,IAAE;QAAC,CACf;MAAC,CACC,CAEnB;MACDa,EAAE,EAAEA,EAAG;MACPK,IAAI,EAAEC,YAAY,IAAIN,EAAG;MACzBU,MAAM,EAAEA,MAAO;MACfH,QAAQ,EAAEA,QAAS;MACnBE,OAAO,EAAEA,OAAQ;MACjBI,WAAW,EAAEA,WAAY;MACzBjB,GAAG,EAAEA,GAAI;MACT0C,cAAc,EACZ7C,IAAA,CAAAsC,eAAA;QAAgBC,QAAQ,EAAC,OAAO;QAAAC,QAAA,EAC9BxC,IAAA,CAACL,UAAU,IAAE;MAAC,CACA,CACjB;MACD2B,SAAS,EAAEA,SAAU;MACrBwB,IAAI,EAAC;IAAQ,CACd,CAAC;EAAA,CACH,EACD,CACE1C,gBAAgB,EAChBC,YAAY,EACZC,eAAe,EACfsB,WAAW,EACXnB,UAAU,EACVI,YAAY,EACZI,MAAM,EACNH,QAAQ,EACRI,OAAO,EACPF,OAAO,EACPI,WAAW,EACXjB,GAAG,EACHkB,MAAM,EACNC,SAAS,CAEb,CAAC;EAED,OACEtB,IAAA,CAACJ,KAAK;IACJmD,SAAS,EAAC,QAAQ;IAClBC,eAAe,EAAE,KAAM;IACvBzC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,WAAW,EAAEA,WAAY;IACzBuC,UAAU,EAAE,IAAK;IACjBtC,KAAK,EAAEA,KAAM;IACboB,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CACF,CAAC;AAED,MAAMmB,mBAAmB,GAAG3D,IAAI,CAACU,WAAW,CAAC;AAC7CiD,mBAAmB,CAACC,WAAW,GAAG,aAAa;AAE/C,SAASD,mBAAmB,IAAIjD,WAAW"}
+{"version":3,"file":"SearchField.js","names":["forwardRef","memo","useCallback","useRef","CloseCircleFilledIcon","SearchIcon","Field","getControlState","useInputValues","jsx","_jsx","SearchField","_ref","ref","ariaDescribedBy","autoCompleteType","defaultValue","hasInitialFocus","id","idOverride","isDisabled","isFullWidth","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","onClear","onClearProp","placeholder","testId","translate","value","event","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","renderFieldComponent","_ref2","_InputBase","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","disabled","onClick","size","startAdornment","type","fieldType","hasVisibleLabel","isOptional","MemoizedSearchField","displayName"],"sources":["../src/SearchField.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { InputAdornment, InputBase, IconButton } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  memo,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport { CloseCircleFilledIcon, SearchIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\n\nexport type SearchFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n  /**\n   * The value of the `input` element to use when uncontrolled.\n   */\n  defaultValue?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * This label won't show up visually, but it's required for accessibility.\n   */\n  label: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the clear button is pressed.\n   */\n  onClear?: () => void;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * The value of the `input` element, to use when controlled.\n   */\n  value?: string;\n} & Pick<\n  FieldComponentProps,\n  \"ariaDescribedBy\" | \"id\" | \"isDisabled\" | \"name\" | \"isFullWidth\"\n> &\n  AllowedProps;\n\nconst SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      ariaDescribedBy,\n      autoCompleteType,\n      defaultValue,\n      hasInitialFocus,\n      id: idOverride,\n      isDisabled = false,\n      isFullWidth = false,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      onClear: onClearProp,\n      placeholder,\n      testId,\n      translate,\n      value,\n    },\n    ref\n  ) => {\n    const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =\n      useCallback(\n        (event) => {\n          onChangeProp?.(event);\n        },\n        [onChangeProp]\n      );\n\n    const onClear = useCallback(() => {\n      onClearProp?.();\n    }, [onClearProp]);\n\n    const controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      })\n    );\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          data-se={testId}\n          endAdornment={\n            defaultValue && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-label=\"Clear\"\n                  disabled={isDisabled}\n                  onClick={onClear}\n                  size=\"small\"\n                >\n                  <CloseCircleFilledIcon />\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          id={id}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          placeholder={placeholder}\n          ref={ref}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <SearchIcon />\n            </InputAdornment>\n          }\n          translate={translate}\n          type=\"search\"\n        />\n      ),\n      [\n        autoCompleteType,\n        defaultValue,\n        hasInitialFocus,\n        inputValues,\n        isDisabled,\n        nameOverride,\n        onBlur,\n        onChange,\n        onClear,\n        onFocus,\n        placeholder,\n        ref,\n        testId,\n        translate,\n      ]\n    );\n\n    return (\n      <Field\n        ariaDescribedBy={ariaDescribedBy}\n        fieldType=\"single\"\n        hasVisibleLabel={false}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth}\n        isOptional={true}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedSearchField = memo(SearchField);\nMemoizedSearchField.displayName = \"SearchField\";\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAGEA,UAAU,EAEVC,IAAI,EACJC,WAAW,EACXC,MAAM,QACD,OAAO;AAAC,SAENC,qBAAqB,EAAEC,UAAU;AAAA,SACjCC,KAAK;AAAA,SAGLC,eAAe,EAAEC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AA2DxC,MAAMC,WAAW,GAAGX,UAAU,CAC5B,CAAAY,IAAA,EAoBEC,GAAG,KACA;EAAA,IApBH;IACEC,eAAe;IACfC,gBAAgB;IAChBC,YAAY;IACZC,eAAe;IACfC,EAAE,EAAEC,UAAU;IACdC,UAAU,GAAG,KAAK;IAClBC,WAAW,GAAG,KAAK;IACnBC,KAAK;IACLC,IAAI,EAAEC,YAAY;IAClBC,QAAQ,EAAEC,YAAY;IACtBC,OAAO;IACPC,MAAM;IACNC,OAAO,EAAEC,WAAW;IACpBC,WAAW;IACXC,MAAM;IACNC,SAAS;IACTC;EACF,CAAC,GAAAtB,IAAA;EAGD,MAAMa,QAAoE,GACxEvB,WAAW,CACRiC,KAAK,IAAK;IACTT,YAAY,GAAGS,KAAK,CAAC;EACvB,CAAC,EACD,CAACT,YAAY,CACf,CAAC;EAEH,MAAMG,OAAO,GAAG3B,WAAW,CAAC,MAAM;IAChC4B,WAAW,GAAG,CAAC;EACjB,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,MAAMM,kBAAkB,GAAGjC,MAAM,CAC/BI,eAAe,CAAC;IACd8B,eAAe,EAAEH,KAAK;IACtBI,iBAAiB,EAAEtB;EACrB,CAAC,CACH,CAAC;EACD,MAAMuB,WAAW,GAAG/B,cAAc,CAAC;IACjCQ,YAAY;IACZkB,KAAK;IACLM,YAAY,EAAEJ,kBAAkB,CAACK;EACnC,CAAC,CAAC;EAEF,MAAMC,oBAAoB,GAAGxC,WAAW,CACtCyC,KAAA;IAAA,IAAC;MAAE7B,eAAe;MAAEI;IAAG,CAAC,GAAAyB,KAAA;IAAA,OACtBjC,IAAA,CAAAkC,UAAA;MAAA,GACML,WAAW;MACf,oBAAkBzB,eAAgB;MAClC+B,YAAY,EAAE9B,gBAAiB;MAE/B+B,SAAS,EAAE7B,eAAgB;MAC3B,WAASe,MAAO;MAChBe,YAAY,EACV/B,YAAY,IACVN,IAAA,CAAAsC,eAAA;QAAgBC,QAAQ,EAAC,KAAK;QAAAC,QAAA,EAC5BxC,IAAA,CAAAyC,WAAA;UACE,cAAW,OAAO;UAClBC,QAAQ,EAAEhC,UAAW;UACrBiC,OAAO,EAAExB,OAAQ;UACjByB,IAAI,EAAC,OAAO;UAAAJ,QAAA,EAEZxC,IAAA,CAACN,qBAAqB,IAAE;QAAC,CACf;MAAC,CACC,CAEnB;MACDc,EAAE,EAAEA,EAAG;MACPK,IAAI,EAAEC,YAAY,IAAIN,EAAG;MACzBU,MAAM,EAAEA,MAAO;MACfH,QAAQ,EAAEA,QAAS;MACnBE,OAAO,EAAEA,OAAQ;MACjBI,WAAW,EAAEA,WAAY;MACzBlB,GAAG,EAAEA,GAAI;MACT0C,cAAc,EACZ7C,IAAA,CAAAsC,eAAA;QAAgBC,QAAQ,EAAC,OAAO;QAAAC,QAAA,EAC9BxC,IAAA,CAACL,UAAU,IAAE;MAAC,CACA,CACjB;MACD4B,SAAS,EAAEA,SAAU;MACrBuB,IAAI,EAAC;IAAQ,CACd,CAAC;EAAA,CACH,EACD,CACEzC,gBAAgB,EAChBC,YAAY,EACZC,eAAe,EACfsB,WAAW,EACXnB,UAAU,EACVI,YAAY,EACZI,MAAM,EACNH,QAAQ,EACRI,OAAO,EACPF,OAAO,EACPI,WAAW,EACXlB,GAAG,EACHmB,MAAM,EACNC,SAAS,CAEb,CAAC;EAED,OACEvB,IAAA,CAACJ,KAAK;IACJQ,eAAe,EAAEA,eAAgB;IACjC2C,SAAS,EAAC,QAAQ;IAClBC,eAAe,EAAE,KAAM;IACvBxC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,WAAW,EAAEA,WAAY;IACzBsC,UAAU,EAAE,IAAK;IACjBrC,KAAK,EAAEA,KAAM;IACboB,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CACF,CAAC;AAED,MAAMkB,mBAAmB,GAAG3D,IAAI,CAACU,WAAW,CAAC;AAC7CiD,mBAAmB,CAACC,WAAW,GAAG,aAAa;AAE/C,SAASD,mBAAmB,IAAIjD,WAAW"}

package/dist/Select.js

@@ -28,6 +28,7 @@ const {
 } = ComponentControlledState;
 const Select = _ref => {
   let {
+    ariaDescribedBy,
     defaultValue,
     errorMessage,
     errorMessageList,
@@ -35,7 +36,7 @@ const Select = _ref => {
     hint,
     HintLinkComponent,
     id: idOverride,
-    inputFocusRef,
+    inputRef,
     isDisabled = false,
     isFullWidth = false,
     isMultiSelect,
@@ -56,12 +57,11 @@ const Select = _ref => {
     uncontrolledValue: defaultValue
   }));
   const [internalSelectedValues, setInternalSelectedValues] = useState(controlledStateRef.current === CONTROLLED ? value : defaultValue);
-  const inputRef = useRef(null);
-  useImperativeHandle(inputFocusRef, () => {
-    const element = inputRef.current;
+  const localInputRef = useRef(null);
+  useImperativeHandle(inputRef, () => {
     return {
       focus: () => {
-        element && element.focus();
+        localInputRef.current?.focus();
       }
     };
   }, []);
@@ -142,9 +142,11 @@ const Select = _ref => {
       "aria-describedby": ariaDescribedBy,
       "aria-errormessage": errorMessageElementId,
       children: children,
-      "data-se": testId,
       id: id,
-      inputRef: inputRef,
+      inputProps: {
+        "data-se": testId
+      },
+      inputRef: localInputRef,
       labelId: labelElementId,
       multiple: hasMultipleChoices,
       name: nameOverride ?? id,
@@ -156,6 +158,7 @@ const Select = _ref => {
     });
   }, [children, inputValues, hasMultipleChoices, nameOverride, onBlur, onChange, onFocus, renderValue, testId, translate]);
   return _jsx(Field, {
+    ariaDescribedBy: ariaDescribedBy,
     errorMessage: errorMessage,
     errorMessageList: errorMessageList,
     fieldType: "single",

package/dist/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useImperativeHandle","Field","CheckIcon","ComponentControlledState","useInputValues","getControlState","jsx","_jsx","jsxs","_jsxs","CONTROLLED","Select","_ref","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","hint","HintLinkComponent","id","idOverride","inputFocusRef","isDisabled","isFullWidth","isMultiSelect","isOptional","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","options","testId","translate","value","undefined","controlledStateRef","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","current","inputRef","element","focus","inputValues","controlState","event","child","target","split","normalizedOptions","map","option","text","type","renderValue","selected","renderedChips","item","selectedOption","find","_Chip","filter","Boolean","length","_Box","children","_ListSubheader","_MenuItem","_Checkbox","checked","includes","_ListItemSecondaryAction","renderFieldComponent","_ref2","ariaDescribedBy","errorMessageElementId","labelElementId","_Select","labelId","multiple","fieldType","hasVisibleLabel","MemoizedSelect","displayName"],"sources":["../src/Select.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useImperativeHandle,\n} from \"react\";\nimport {\n  Box,\n  Checkbox as MuiCheckbox,\n  Chip,\n  ListItemSecondaryAction,\n  ListSubheader,\n  MenuItem,\n  Select as MuiSelect,\n} from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\n\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { CheckIcon } from \"./icons.generated\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport {\n  ComponentControlledState,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils\";\nimport { FocusHandle } from \"./@types/react-augment\";\n\nexport type SelectOption = {\n  text: string;\n  type?: \"heading\" | \"option\";\n  value?: string;\n};\n\nexport type SelectValueType<HasMultipleChoices> =\n  HasMultipleChoices extends true ? string[] : string;\n\nexport type SelectProps<\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: MuiSelectProps<Value>[\"defaultValue\"];\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * The ref forwarded to the Select to expose focus()\n   */\n  inputFocusRef?: React.RefObject<FocusHandle>;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead.\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the Select\n   */\n  label: string;\n  /**\n   * Callback fired when the Select loses focus\n   */\n  onBlur?: MuiSelectProps<Value>[\"onBlur\"];\n  /**\n   * Callback fired when the value of the Select changes\n   */\n  onChange?: MuiSelectProps<Value>[\"onChange\"];\n  /**\n   * Callback fired when the Select gains focus\n   */\n  onFocus?: MuiSelectProps<Value>[\"onFocus\"];\n  /**\n   * The options for the Select\n   */\n  options: (string | SelectOption)[];\n  /**\n   * The value or values selected in the Select\n   */\n  value?: Value;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  AllowedProps;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst { CONTROLLED } = ComponentControlledState;\nconst Select = <\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean\n>({\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputFocusRef,\n  isDisabled = false,\n  isFullWidth = false,\n  isMultiSelect,\n  isOptional = false,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onFocus,\n  options,\n  testId,\n  translate,\n  value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n  const hasMultipleChoices = useMemo(\n    () =>\n      hasMultipleChoicesProp === undefined\n        ? isMultiSelect\n        : hasMultipleChoicesProp,\n    [hasMultipleChoicesProp, isMultiSelect]\n  );\n  const controlledStateRef = useRef(\n    getControlState({ controlledValue: value, uncontrolledValue: defaultValue })\n  );\n  const [internalSelectedValues, setInternalSelectedValues] = useState(\n    controlledStateRef.current === CONTROLLED ? value : defaultValue\n  );\n  const inputRef = useRef<HTMLSelectElement>(null);\n\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  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSelectedValues(value);\n    }\n  }, [value]);\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n    (event, child) => {\n      const {\n        target: { value },\n      } = event;\n      if (controlledStateRef.current !== CONTROLLED) {\n        setInternalSelectedValues(\n          (typeof value === \"string\" ? value.split(\",\") : value) as Value\n        );\n      }\n      onChangeProp?.(event, child);\n    },\n    [onChangeProp]\n  );\n\n  // Normalize the options array to accommodate the various\n  // data types that might be passed\n  const normalizedOptions = useMemo(\n    () =>\n      options.map((option) =>\n        typeof option === \"object\"\n          ? {\n              text: option.text,\n              value: option.value || option.text,\n              type: option.type === \"heading\" ? \"heading\" : \"option\",\n            }\n          : { text: option, value: option, type: \"option\" }\n      ),\n    [options]\n  );\n\n  const renderValue = useCallback(\n    (selected: Value) => {\n      // If the selected value isn't an array, then we don't need to display\n      // chips and should fall back to the default render behavior\n      if (typeof selected === \"string\") {\n        return undefined;\n      }\n\n      // Convert the selected options array into <Chip>s\n      const renderedChips = selected\n        .map((item: string) => {\n          const selectedOption = normalizedOptions.find(\n            (option) => option.value === item\n          );\n\n          if (!selectedOption) {\n            return null;\n          }\n\n          return <Chip key={item} label={selectedOption.text} />;\n        })\n        .filter(Boolean);\n\n      if (renderedChips.length === 0) {\n        return null;\n      }\n\n      // We need the <Box> to surround the <Chip>s for\n      // proper styling\n      return <Box>{renderedChips}</Box>;\n    },\n    [normalizedOptions]\n  );\n\n  // Convert the options into the ReactNode children\n  // that will populate the <Select>\n  const children = useMemo(\n    () =>\n      normalizedOptions.map((option) => {\n        if (option.type === \"heading\") {\n          return <ListSubheader key={option.text}>{option.text}</ListSubheader>;\n        }\n        return (\n          <MenuItem key={option.value} value={option.value}>\n            {hasMultipleChoices && (\n              <MuiCheckbox\n                checked={internalSelectedValues?.includes(option.value)}\n              />\n            )}\n            {option.text}\n            {internalSelectedValues === option.value && (\n              <ListItemSecondaryAction>\n                <CheckIcon />\n              </ListItemSecondaryAction>\n            )}\n          </MenuItem>\n        );\n      }),\n    [hasMultipleChoices, normalizedOptions, internalSelectedValues]\n  );\n\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n      <MuiSelect\n        {...inputValues}\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        children={children}\n        data-se={testId}\n        id={id}\n        inputRef={inputRef}\n        labelId={labelElementId}\n        multiple={hasMultipleChoices}\n        name={nameOverride ?? id}\n        onBlur={onBlur}\n        onChange={onChange}\n        onFocus={onFocus}\n        renderValue={hasMultipleChoices ? renderValue : undefined}\n        translate={translate}\n      />\n    ),\n    [\n      children,\n      inputValues,\n      hasMultipleChoices,\n      nameOverride,\n      onBlur,\n      onChange,\n      onFocus,\n      renderValue,\n      testId,\n      translate,\n    ]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useImperativeHandle","Field","CheckIcon","ComponentControlledState","useInputValues","getControlState","jsx","_jsx","jsxs","_jsxs","CONTROLLED","Select","_ref","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","hint","HintLinkComponent","id","idOverride","inputRef","isDisabled","isFullWidth","isMultiSelect","isOptional","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","options","testId","translate","value","undefined","controlledStateRef","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","current","localInputRef","focus","inputValues","controlState","event","child","target","split","normalizedOptions","map","option","text","type","renderValue","selected","renderedChips","item","selectedOption","find","_Chip","filter","Boolean","length","_Box","children","_ListSubheader","_MenuItem","_Checkbox","checked","includes","_ListItemSecondaryAction","renderFieldComponent","_ref2","errorMessageElementId","labelElementId","_Select","inputProps","labelId","multiple","fieldType","hasVisibleLabel","MemoizedSelect","displayName"],"sources":["../src/Select.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useImperativeHandle,\n} from \"react\";\nimport {\n  Box,\n  Checkbox as MuiCheckbox,\n  Chip,\n  ListItemSecondaryAction,\n  ListSubheader,\n  MenuItem,\n  Select as MuiSelect,\n} from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\n\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { CheckIcon } from \"./icons.generated\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils\";\n\nexport type SelectOption = {\n  text: string;\n  type?: \"heading\" | \"option\";\n  value?: string;\n};\n\nexport type SelectValueType<HasMultipleChoices> =\n  HasMultipleChoices extends true ? string[] : string;\n\nexport type SelectProps<\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: MuiSelectProps<Value>[\"defaultValue\"];\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * The ref forwarded to the Select\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead.\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the Select\n   */\n  label: string;\n  /**\n   * Callback fired when the Select loses focus\n   */\n  onBlur?: MuiSelectProps<Value>[\"onBlur\"];\n  /**\n   * Callback fired when the value of the Select changes\n   */\n  onChange?: MuiSelectProps<Value>[\"onChange\"];\n  /**\n   * Callback fired when the Select gains focus\n   */\n  onFocus?: MuiSelectProps<Value>[\"onFocus\"];\n  /**\n   * The options for the Select\n   */\n  options: (string | SelectOption)[];\n  /**\n   * The value or values selected in the Select\n   */\n  value?: Value;\n} & Pick<\n  FieldComponentProps,\n  | \"ariaDescribedBy\"\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  AllowedProps;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst { CONTROLLED } = ComponentControlledState;\nconst Select = <\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputRef,\n  isDisabled = false,\n  isFullWidth = false,\n  isMultiSelect,\n  isOptional = false,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onFocus,\n  options,\n  testId,\n  translate,\n  value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n  const hasMultipleChoices = useMemo(\n    () =>\n      hasMultipleChoicesProp === undefined\n        ? isMultiSelect\n        : hasMultipleChoicesProp,\n    [hasMultipleChoicesProp, isMultiSelect]\n  );\n  const controlledStateRef = useRef(\n    getControlState({ controlledValue: value, uncontrolledValue: defaultValue })\n  );\n  const [internalSelectedValues, setInternalSelectedValues] = useState(\n    controlledStateRef.current === CONTROLLED ? value : defaultValue\n  );\n  const localInputRef = useRef<HTMLSelectElement>(null);\n\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    []\n  );\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSelectedValues(value);\n    }\n  }, [value]);\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n    (event, child) => {\n      const {\n        target: { value },\n      } = event;\n      if (controlledStateRef.current !== CONTROLLED) {\n        setInternalSelectedValues(\n          (typeof value === \"string\" ? value.split(\",\") : value) as Value\n        );\n      }\n      onChangeProp?.(event, child);\n    },\n    [onChangeProp]\n  );\n\n  // Normalize the options array to accommodate the various\n  // data types that might be passed\n  const normalizedOptions = useMemo(\n    () =>\n      options.map((option) =>\n        typeof option === \"object\"\n          ? {\n              text: option.text,\n              value: option.value || option.text,\n              type: option.type === \"heading\" ? \"heading\" : \"option\",\n            }\n          : { text: option, value: option, type: \"option\" }\n      ),\n    [options]\n  );\n\n  const renderValue = useCallback(\n    (selected: Value) => {\n      // If the selected value isn't an array, then we don't need to display\n      // chips and should fall back to the default render behavior\n      if (typeof selected === \"string\") {\n        return undefined;\n      }\n\n      // Convert the selected options array into <Chip>s\n      const renderedChips = selected\n        .map((item: string) => {\n          const selectedOption = normalizedOptions.find(\n            (option) => option.value === item\n          );\n\n          if (!selectedOption) {\n            return null;\n          }\n\n          return <Chip key={item} label={selectedOption.text} />;\n        })\n        .filter(Boolean);\n\n      if (renderedChips.length === 0) {\n        return null;\n      }\n\n      // We need the <Box> to surround the <Chip>s for\n      // proper styling\n      return <Box>{renderedChips}</Box>;\n    },\n    [normalizedOptions]\n  );\n\n  // Convert the options into the ReactNode children\n  // that will populate the <Select>\n  const children = useMemo(\n    () =>\n      normalizedOptions.map((option) => {\n        if (option.type === \"heading\") {\n          return <ListSubheader key={option.text}>{option.text}</ListSubheader>;\n        }\n        return (\n          <MenuItem key={option.value} value={option.value}>\n            {hasMultipleChoices && (\n              <MuiCheckbox\n                checked={internalSelectedValues?.includes(option.value)}\n              />\n            )}\n            {option.text}\n            {internalSelectedValues === option.value && (\n              <ListItemSecondaryAction>\n                <CheckIcon />\n              </ListItemSecondaryAction>\n            )}\n          </MenuItem>\n        );\n      }),\n    [hasMultipleChoices, normalizedOptions, internalSelectedValues]\n  );\n\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n      <MuiSelect\n        {...inputValues}\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        children={children}\n        id={id}\n        inputProps={{ \"data-se\": testId }}\n        inputRef={localInputRef}\n        labelId={labelElementId}\n        multiple={hasMultipleChoices}\n        name={nameOverride ?? id}\n        onBlur={onBlur}\n        onChange={onChange}\n        onFocus={onFocus}\n        renderValue={hasMultipleChoices ? renderValue : undefined}\n        translate={translate}\n      />\n    ),\n    [\n      children,\n      inputValues,\n      hasMultipleChoices,\n      nameOverride,\n      onBlur,\n      onChange,\n      onFocus,\n      renderValue,\n      testId,\n      translate,\n    ]\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":"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"}

package/dist/TextField.js

@@ -19,6 +19,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const textFieldTypeValues = ["email", "number", "tel", "text", "url"];
 const TextField = forwardRef((_ref, ref) => {
   let {
+    ariaDescribedBy,
     autoCompleteType,
     defaultValue,
     hasInitialFocus,
@@ -28,7 +29,7 @@ const TextField = forwardRef((_ref, ref) => {
     hint,
     HintLinkComponent,
     id: idOverride,
-    inputFocusRef,
+    inputRef,
     inputMode,
     isDisabled = false,
     isFullWidth = false,
@@ -56,12 +57,11 @@ const TextField = forwardRef((_ref, ref) => {
     value,
     controlState: controlledStateRef.current
   });
-  const inputRef = useRef(null);
-  useImperativeHandle(inputFocusRef, () => {
-    const element = inputRef.current;
+  const localInputRef = useRef(null);
+  useImperativeHandle(inputRef, () => {
     return {
       focus: () => {
-        element && element.focus();
+        localInputRef.current?.focus();
       }
     };
   }, []);
@@ -80,7 +80,6 @@ const TextField = forwardRef((_ref, ref) => {
       "aria-describedby": ariaDescribedBy,
       autoComplete: autoCompleteType,
       autoFocus: hasInitialFocus,
-      "data-se": testId,
       endAdornment: endAdornment && _jsx(_InputAdornment, {
         position: "end",
         translate: translate,
@@ -90,9 +89,10 @@ const TextField = forwardRef((_ref, ref) => {
       inputProps: {
         "aria-errormessage": errorMessageElementId,
         "aria-labelledby": labelElementId,
+        "data-se": testId,
         inputmode: inputMode
       },
-      inputRef: inputRef,
+      inputRef: localInputRef,
       multiline: isMultiline,
       name: nameOverride ?? id,
       onBlur: onBlur,
@@ -112,6 +112,7 @@ const TextField = forwardRef((_ref, ref) => {
     });
   }, [autoCompleteType, inputValues, hasInitialFocus, endAdornment, inputMode, isMultiline, nameOverride, onBlur, onChange, onFocus, placeholder, isOptional, isReadOnly, ref, startAdornment, testId, translate, type]);
   return _jsx(Field, {
+    ariaDescribedBy: ariaDescribedBy,
     errorMessage: errorMessage,
     errorMessageList: errorMessageList,
     fieldType: "single",