@okta/odyssey-react-mui 1.8.0 → 1.8.2

package/dist/PasswordField.js.map

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

package/dist/RadioGroup.js

@@ -10,9 +10,9 @@ import _RadioGroup from "@mui/material/RadioGroup";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { memo, useCallback } from "react";
+import { memo, useCallback, useRef } from "react";
 import { Field } from "./Field.js";
-import { useControlledState } from "./useControlledState.js";
+import { getControlState, useInputValues } from "./inputUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RadioGroup = _ref => {
   let {
@@ -28,14 +28,18 @@ const RadioGroup = _ref => {
     testId,
     value
   } = _ref;
-  const [localValue, setLocalValue] = useControlledState({
+  const controlledStateRef = useRef(getControlState({
     controlledValue: value,
     uncontrolledValue: defaultValue
+  }));
+  const inputValues = useInputValues({
+    defaultValue,
+    value,
+    controlState: controlledStateRef.current
   });
   const onChange = useCallback((event, value) => {
-    setLocalValue(value);
     onChangeProp?.(event, value);
-  }, [onChangeProp, setLocalValue]);
+  }, [onChangeProp]);
   const renderFieldComponent = useCallback(_ref2 => {
     let {
       ariaDescribedBy,
@@ -44,18 +48,17 @@ const RadioGroup = _ref => {
       labelElementId
     } = _ref2;
     return _jsx(_RadioGroup, {
+      ...inputValues,
       "aria-describedby": ariaDescribedBy,
       "aria-errormessage": errorMessageElementId,
       "aria-labelledby": labelElementId,
       "data-se": testId,
-      defaultValue: defaultValue,
       id: id,
       name: nameOverride ?? id,
       onChange: onChange,
-      value: localValue,
       children: children
     });
-  }, [children, defaultValue, nameOverride, onChange, testId, localValue]);
+  }, [children, inputValues, nameOverride, onChange, testId]);
   return _jsx(Field, {
     errorMessage: errorMessage,
     fieldType: "group",

package/dist/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["memo","useCallback","Field","useControlledState","jsx","_jsx","RadioGroup","_ref","children","defaultValue","errorMessage","hint","id","idOverride","isDisabled","label","name","nameOverride","onChange","onChangeProp","testId","value","localValue","setLocalValue","controlledValue","uncontrolledValue","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 } from \"react\";\n\nimport { Radio, RadioProps } from \"./Radio\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { useControlledState } from \"./useControlledState\";\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\" | \"hint\" | \"id\" | \"isDisabled\" | \"name\"\n> &\n  SeleniumProps;\n\nconst RadioGroup = ({\n  children,\n  defaultValue,\n  errorMessage,\n  hint,\n  id: idOverride,\n  isDisabled,\n  label,\n  name: nameOverride,\n  onChange: onChangeProp,\n  testId,\n  value,\n}: RadioGroupProps) => {\n  const [localValue, setLocalValue] = useControlledState({\n    controlledValue: value,\n    uncontrolledValue: defaultValue,\n  });\n\n  const onChange = useCallback<NonNullable<MuiRadioGroupProps[\"onChange\"]>>(\n    (event, value) => {\n      setLocalValue(value);\n      onChangeProp?.(event, value);\n    },\n    [onChangeProp, setLocalValue]\n  );\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n      <MuiRadioGroup\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        aria-labelledby={labelElementId}\n        data-se={testId}\n        defaultValue={defaultValue}\n        id={id}\n        name={nameOverride ?? id}\n        onChange={onChange}\n        value={localValue}\n      >\n        {children}\n      </MuiRadioGroup>\n    ),\n    [children, defaultValue, nameOverride, onChange, testId, localValue]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      fieldType=\"group\"\n      hasVisibleLabel={false}\n      hint={hint}\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,QAAQ,OAAO;AAAC,SAG/CC,KAAK;AAAA,SAGLC,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AA6B3B,MAAMC,UAAU,GAAGC,IAAA,IAYI;EAAA,IAZH;IAClBC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU;IACVC,KAAK;IACLC,IAAI,EAAEC,YAAY;IAClBC,QAAQ,EAAEC,YAAY;IACtBC,MAAM;IACNC;EACe,CAAC,GAAAd,IAAA;EAChB,MAAM,CAACe,UAAU,EAAEC,aAAa,CAAC,GAAGpB,kBAAkB,CAAC;IACrDqB,eAAe,EAAEH,KAAK;IACtBI,iBAAiB,EAAEhB;EACrB,CAAC,CAAC;EAEF,MAAMS,QAAQ,GAAGjB,WAAW,CAC1B,CAACyB,KAAK,EAAEL,KAAK,KAAK;IAChBE,aAAa,CAACF,KAAK,CAAC;IACpBF,YAAY,GAAGO,KAAK,EAAEL,KAAK,CAAC;EAC9B,CAAC,EACD,CAACF,YAAY,EAAEI,aAAa,CAC9B,CAAC;EACD,MAAMI,oBAAoB,GAAG1B,WAAW,CACtC2B,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEC,qBAAqB;MAAElB,EAAE;MAAEmB;IAAe,CAAC,GAAAH,KAAA;IAAA,OAC7DvB,IAAA,CAAA2B,WAAA;MACE,oBAAkBH,eAAgB;MAClC,qBAAmBC,qBAAsB;MACzC,mBAAiBC,cAAe;MAChC,WAASX,MAAO;MAChBX,YAAY,EAAEA,YAAa;MAC3BG,EAAE,EAAEA,EAAG;MACPI,IAAI,EAAEC,YAAY,IAAIL,EAAG;MACzBM,QAAQ,EAAEA,QAAS;MACnBG,KAAK,EAAEC,UAAW;MAAAd,QAAA,EAEjBA;IAAQ,CACI,CAAC;EAAA,CACjB,EACD,CAACA,QAAQ,EAAEC,YAAY,EAAEQ,YAAY,EAAEC,QAAQ,EAAEE,MAAM,EAAEE,UAAU,CACrE,CAAC;EAED,OACEjB,IAAA,CAACH,KAAK;IACJQ,YAAY,EAAEA,YAAa;IAC3BuB,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,KAAM;IACvBvB,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbY,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMQ,kBAAkB,GAAGnC,IAAI,CAACM,UAAU,CAAC;AAC3C6B,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAI7B,UAAU"}
+{"version":3,"file":"RadioGroup.js","names":["memo","useCallback","useRef","Field","getControlState","useInputValues","jsx","_jsx","RadioGroup","_ref","children","defaultValue","errorMessage","hint","id","idOverride","isDisabled","label","name","nameOverride","onChange","onChangeProp","testId","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 { SeleniumProps } from \"./SeleniumProps\";\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\" | \"hint\" | \"id\" | \"isDisabled\" | \"name\"\n> &\n  SeleniumProps;\n\nconst RadioGroup = ({\n  children,\n  defaultValue,\n  errorMessage,\n  hint,\n  id: idOverride,\n  isDisabled,\n  label,\n  name: nameOverride,\n  onChange: onChangeProp,\n  testId,\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      >\n        {children}\n      </MuiRadioGroup>\n    ),\n    [children, inputValues, nameOverride, onChange, testId]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      fieldType=\"group\"\n      hasVisibleLabel={false}\n      hint={hint}\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;AA6BxC,MAAMC,UAAU,GAAGC,IAAA,IAYI;EAAA,IAZH;IAClBC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU;IACVC,KAAK;IACLC,IAAI,EAAEC,YAAY;IAClBC,QAAQ,EAAEC,YAAY;IACtBC,MAAM;IACNC;EACe,CAAC,GAAAd,IAAA;EAChB,MAAMe,kBAAkB,GAAGtB,MAAM,CAC/BE,eAAe,CAAC;IAAEqB,eAAe,EAAEF,KAAK;IAAEG,iBAAiB,EAAEf;EAAa,CAAC,CAC7E,CAAC;EACD,MAAMgB,WAAW,GAAGtB,cAAc,CAAC;IACjCM,YAAY;IACZY,KAAK;IACLK,YAAY,EAAEJ,kBAAkB,CAACK;EACnC,CAAC,CAAC;EAEF,MAAMT,QAAQ,GAAGnB,WAAW,CAC1B,CAAC6B,KAAK,EAAEP,KAAK,KAAK;IAChBF,YAAY,GAAGS,KAAK,EAAEP,KAAK,CAAC;EAC9B,CAAC,EACD,CAACF,YAAY,CACf,CAAC;EACD,MAAMU,oBAAoB,GAAG9B,WAAW,CACtC+B,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEC,qBAAqB;MAAEpB,EAAE;MAAEqB;IAAe,CAAC,GAAAH,KAAA;IAAA,OAC7DzB,IAAA,CAAA6B,WAAA;MAAA,GACMT,WAAW;MACf,oBAAkBM,eAAgB;MAClC,qBAAmBC,qBAAsB;MACzC,mBAAiBC,cAAe;MAChC,WAASb,MAAO;MAChBR,EAAE,EAAEA,EAAG;MACPI,IAAI,EAAEC,YAAY,IAAIL,EAAG;MACzBM,QAAQ,EAAEA,QAAS;MAAAV,QAAA,EAElBA;IAAQ,CACI,CAAC;EAAA,CACjB,EACD,CAACA,QAAQ,EAAEiB,WAAW,EAAER,YAAY,EAAEC,QAAQ,EAAEE,MAAM,CACxD,CAAC;EAED,OACEf,IAAA,CAACJ,KAAK;IACJS,YAAY,EAAEA,YAAa;IAC3ByB,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,KAAM;IACvBzB,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbc,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMQ,kBAAkB,GAAGvC,IAAI,CAACQ,UAAU,CAAC;AAC3C+B,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAI/B,UAAU"}

package/dist/SearchField.js

@@ -12,18 +12,19 @@ import _IconButton from "@mui/material/IconButton";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-
-import { useState, useEffect } from "react";
-import { forwardRef, memo, useCallback } from "react";
+import { forwardRef, memo, useCallback, useRef } from "react";
 import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated/index.js";
 import { Field } from "./Field.js";
+import { getControlState, useInputValues } from "./inputUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SearchField = forwardRef((_ref, ref) => {
   let {
     autoCompleteType,
+    defaultValue,
     hasInitialFocus,
     id: idOverride,
     isDisabled = false,
+    isFullWidth = false,
     label,
     name: nameOverride,
     onChange: onChangeProp,
@@ -32,33 +33,35 @@ const SearchField = forwardRef((_ref, ref) => {
     onClear: onClearProp,
     placeholder,
     testId,
-    value: controlledValue
+    value
   } = _ref;
-  const [uncontrolledValue, setUncontrolledValue] = useState("");
   const onChange = useCallback(event => {
-    setUncontrolledValue(event.currentTarget.value);
     onChangeProp?.(event);
   }, [onChangeProp]);
   const onClear = useCallback(() => {
-    setUncontrolledValue("");
     onClearProp?.();
   }, [onClearProp]);
-  useEffect(() => {
-    if (controlledValue !== undefined) {
-      setUncontrolledValue(controlledValue);
-    }
-  }, [controlledValue]);
+  const controlledStateRef = useRef(getControlState({
+    controlledValue: value,
+    uncontrolledValue: defaultValue
+  }));
+  const inputValues = useInputValues({
+    defaultValue,
+    value,
+    controlState: controlledStateRef.current
+  });
   const renderFieldComponent = useCallback(_ref2 => {
     let {
       ariaDescribedBy,
       id
     } = _ref2;
     return _jsx(_InputBase, {
+      ...inputValues,
       "aria-describedby": ariaDescribedBy,
       autoComplete: autoCompleteType,
       autoFocus: hasInitialFocus,
       "data-se": testId,
-      endAdornment: uncontrolledValue && _jsx(_InputAdornment, {
+      endAdornment: defaultValue && _jsx(_InputAdornment, {
         position: "end",
         children: _jsx(_IconButton, {
           "aria-label": "Clear",
@@ -79,15 +82,15 @@ const SearchField = forwardRef((_ref, ref) => {
         position: "start",
         children: _jsx(SearchIcon, {})
       }),
-      type: "search",
-      value: controlledValue === undefined ? uncontrolledValue : controlledValue
+      type: "search"
     });
-  }, [autoCompleteType, controlledValue, hasInitialFocus, isDisabled, nameOverride, onBlur, onChange, onClear, onFocus, placeholder, ref, testId, uncontrolledValue]);
+  }, [autoCompleteType, defaultValue, hasInitialFocus, inputValues, isDisabled, nameOverride, onBlur, onChange, onClear, onFocus, placeholder, ref, testId]);
   return _jsx(Field, {
     fieldType: "single",
     hasVisibleLabel: false,
     id: idOverride,
     isDisabled: isDisabled,
+    isFullWidth: isFullWidth,
     isOptional: true,
     label: label,
     renderFieldComponent: renderFieldComponent

package/dist/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","names":["useState","useEffect","forwardRef","memo","useCallback","CloseCircleFilledIcon","SearchIcon","Field","jsx","_jsx","SearchField","_ref","ref","autoCompleteType","hasInitialFocus","id","idOverride","isDisabled","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","onClear","onClearProp","placeholder","testId","value","controlledValue","uncontrolledValue","setUncontrolledValue","event","currentTarget","undefined","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 { useState, useEffect } from \"react\";\nimport { InputAdornment, InputBase, IconButton } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  memo,\n  useCallback,\n} from \"react\";\n\nimport { CloseCircleFilledIcon, SearchIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\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   * 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, required for a controlled component.\n   */\n  value?: string;\n} & Pick<FieldComponentProps, \"id\" | \"isDisabled\" | \"name\"> &\n  SeleniumProps;\n\nconst SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      autoCompleteType,\n      hasInitialFocus,\n      id: idOverride,\n      isDisabled = false,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      onClear: onClearProp,\n      placeholder,\n      testId,\n      value: controlledValue,\n    },\n    ref\n  ) => {\n    const [uncontrolledValue, setUncontrolledValue] = useState(\"\");\n\n    const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =\n      useCallback(\n        (event) => {\n          setUncontrolledValue(event.currentTarget.value);\n          onChangeProp?.(event);\n        },\n        [onChangeProp]\n      );\n\n    const onClear = useCallback(() => {\n      setUncontrolledValue(\"\");\n      onClearProp?.();\n    }, [onClearProp]);\n\n    useEffect(() => {\n      if (controlledValue !== undefined) {\n        setUncontrolledValue(controlledValue);\n      }\n    }, [controlledValue]);\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\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            uncontrolledValue && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-label=\"Clear\"\n                  disabled={isDisabled}\n                  onClick={onClear}\n                  size=\"small\"\n                >\n                  <CloseCircleFilledIcon />\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          id={id}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          placeholder={placeholder}\n          ref={ref}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <SearchIcon />\n            </InputAdornment>\n          }\n          type=\"search\"\n          value={\n            controlledValue === undefined ? uncontrolledValue : controlledValue\n          }\n        />\n      ),\n      [\n        autoCompleteType,\n        controlledValue,\n        hasInitialFocus,\n        isDisabled,\n        nameOverride,\n        onBlur,\n        onChange,\n        onClear,\n        onFocus,\n        placeholder,\n        ref,\n        testId,\n        uncontrolledValue,\n      ]\n    );\n\n    return (\n      <Field\n        fieldType=\"single\"\n        hasVisibleLabel={false}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={true}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedSearchField = memo(SearchField);\nMemoizedSearchField.displayName = \"SearchField\";\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":"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"}
+{"version":3,"file":"SearchField.js","names":["forwardRef","memo","useCallback","useRef","CloseCircleFilledIcon","SearchIcon","Field","getControlState","useInputValues","jsx","_jsx","SearchField","_ref","ref","autoCompleteType","defaultValue","hasInitialFocus","id","idOverride","isDisabled","isFullWidth","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","onClear","onClearProp","placeholder","testId","value","event","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","renderFieldComponent","_ref2","ariaDescribedBy","_InputBase","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","disabled","onClick","size","startAdornment","type","fieldType","hasVisibleLabel","isOptional","MemoizedSearchField","displayName"],"sources":["../src/SearchField.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { InputAdornment, InputBase, IconButton } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  memo,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport { CloseCircleFilledIcon, SearchIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\n\nexport type SearchFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n  /**\n   * The value of the `input` element to use when uncontrolled.\n   */\n  defaultValue?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * This label won't show up visually, but it's required for accessibility.\n   */\n  label: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the clear button is pressed.\n   */\n  onClear?: () => void;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * The value of the `input` element, to use when controlled.\n   */\n  value?: string;\n} & Pick<FieldComponentProps, \"id\" | \"isDisabled\" | \"name\" | \"isFullWidth\"> &\n  SeleniumProps;\n\nconst SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      autoCompleteType,\n      defaultValue,\n      hasInitialFocus,\n      id: idOverride,\n      isDisabled = false,\n      isFullWidth = false,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      onClear: onClearProp,\n      placeholder,\n      testId,\n      value,\n    },\n    ref\n  ) => {\n    const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =\n      useCallback(\n        (event) => {\n          onChangeProp?.(event);\n        },\n        [onChangeProp]\n      );\n\n    const onClear = useCallback(() => {\n      onClearProp?.();\n    }, [onClearProp]);\n\n    const controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      })\n    );\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          data-se={testId}\n          endAdornment={\n            defaultValue && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-label=\"Clear\"\n                  disabled={isDisabled}\n                  onClick={onClear}\n                  size=\"small\"\n                >\n                  <CloseCircleFilledIcon />\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          id={id}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          placeholder={placeholder}\n          ref={ref}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <SearchIcon />\n            </InputAdornment>\n          }\n          type=\"search\"\n        />\n      ),\n      [\n        autoCompleteType,\n        defaultValue,\n        hasInitialFocus,\n        inputValues,\n        isDisabled,\n        nameOverride,\n        onBlur,\n        onChange,\n        onClear,\n        onFocus,\n        placeholder,\n        ref,\n        testId,\n      ]\n    );\n\n    return (\n      <Field\n        fieldType=\"single\"\n        hasVisibleLabel={false}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth}\n        isOptional={true}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedSearchField = memo(SearchField);\nMemoizedSearchField.displayName = \"SearchField\";\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":"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"}

package/dist/Select.js

@@ -17,18 +17,24 @@ import _Chip from "@mui/material/Chip";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, useCallback, useMemo, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Field } from "./Field.js";
 import { CheckIcon } from "./icons.generated/index.js";
+import { ComponentControlledState, useInputValues, getControlState } from "./inputUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  CONTROLLED
+} = ComponentControlledState;
 const Select = _ref => {
   let {
+    defaultValue,
     errorMessage,
     hasMultipleChoices: hasMultipleChoicesProp,
     hint,
     id: idOverride,
     isDisabled = false,
+    isFullWidth = false,
     isMultiSelect,
     isOptional = false,
     label,
@@ -41,21 +47,32 @@ const Select = _ref => {
     value
   } = _ref;
   const hasMultipleChoices = useMemo(() => hasMultipleChoicesProp === undefined ? isMultiSelect : hasMultipleChoicesProp, [hasMultipleChoicesProp, isMultiSelect]);
-  const formattedValueForMultiSelect = isMultiSelect ? [] : "";
-  const [selectedValue, setSelectedValue] = useState(value === undefined ? formattedValueForMultiSelect : value);
+  const controlledStateRef = useRef(getControlState({
+    controlledValue: value,
+    uncontrolledValue: defaultValue
+  }));
+  const [internalSelectedValues, setInternalSelectedValues] = useState(controlledStateRef.current === CONTROLLED ? value : defaultValue);
+  useEffect(() => {
+    if (controlledStateRef.current === CONTROLLED) {
+      setInternalSelectedValues(value);
+    }
+  }, [value]);
+  const inputValues = useInputValues({
+    defaultValue,
+    value,
+    controlState: controlledStateRef.current
+  });
   const onChange = useCallback((event, child) => {
-    const valueFromEvent = event.target.value;
-    if (typeof valueFromEvent === "string") {
-      if (hasMultipleChoices) {
-        setSelectedValue(valueFromEvent.split(","));
-      } else {
-        setSelectedValue(valueFromEvent);
+    const {
+      target: {
+        value
       }
-    } else {
-      setSelectedValue(valueFromEvent);
+    } = event;
+    if (controlledStateRef.current !== CONTROLLED) {
+      setInternalSelectedValues(typeof value === "string" ? value.split(",") : value);
     }
     onChangeProp?.(event, child);
-  }, [hasMultipleChoices, onChangeProp, setSelectedValue]);
+  }, [onChangeProp]);
   const normalizedOptions = useMemo(() => options.map(option => typeof option === "object" ? {
     text: option.text,
     value: option.value || option.text,
@@ -94,12 +111,12 @@ const Select = _ref => {
     return _jsxs(_MenuItem, {
       value: option.value,
       children: [hasMultipleChoices && _jsx(_Checkbox, {
-        checked: selectedValue.includes(option.value)
-      }), option.text, selectedValue == option.value && _jsx(_ListItemSecondaryAction, {
+        checked: internalSelectedValues?.includes(option.value)
+      }), option.text, internalSelectedValues === option.value && _jsx(_ListItemSecondaryAction, {
         children: _jsx(CheckIcon, {})
       })]
     }, option.value);
-  }), [hasMultipleChoices, normalizedOptions, selectedValue]);
+  }), [hasMultipleChoices, normalizedOptions, internalSelectedValues]);
   const renderFieldComponent = useCallback(_ref2 => {
     let {
       ariaDescribedBy,
@@ -108,6 +125,7 @@ const Select = _ref => {
       labelElementId
     } = _ref2;
     return _jsx(_Select, {
+      ...inputValues,
       "aria-describedby": ariaDescribedBy,
       "aria-errormessage": errorMessageElementId,
       children: children,
@@ -119,10 +137,9 @@ const Select = _ref => {
       onBlur: onBlur,
       onChange: onChange,
       onFocus: onFocus,
-      renderValue: hasMultipleChoices ? renderValue : undefined,
-      value: selectedValue
+      renderValue: hasMultipleChoices ? renderValue : undefined
     });
-  }, [children, hasMultipleChoices, nameOverride, onBlur, onChange, onFocus, renderValue, selectedValue, testId]);
+  }, [children, inputValues, hasMultipleChoices, nameOverride, onBlur, onChange, onFocus, renderValue, testId]);
   return _jsx(Field, {
     errorMessage: errorMessage,
     fieldType: "single",
@@ -130,6 +147,7 @@ const Select = _ref => {
     hint: hint,
     id: idOverride,
     isDisabled: isDisabled,
+    isFullWidth: isFullWidth,
     isOptional: isOptional,
     label: label,
     renderFieldComponent: renderFieldComponent

package/dist/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["memo","useCallback","useMemo","useState","Field","CheckIcon","jsx","_jsx","jsxs","_jsxs","Select","_ref","errorMessage","hasMultipleChoices","hasMultipleChoicesProp","hint","id","idOverride","isDisabled","isMultiSelect","isOptional","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","options","testId","value","undefined","formattedValueForMultiSelect","selectedValue","setSelectedValue","event","child","valueFromEvent","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 { memo, useCallback, useMemo, useState } 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 { SeleniumProps } from \"./SeleniumProps\";\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   * 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 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\" | \"hint\" | \"id\" | \"isDisabled\" | \"isOptional\" | \"name\"\n> &\n  SeleniumProps;\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 Select = <\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean\n>({\n  errorMessage,\n  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  id: idOverride,\n  isDisabled = false,\n  isMultiSelect,\n  isOptional = false,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onFocus,\n  options,\n  testId,\n  value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n  const hasMultipleChoices = useMemo(\n    () =>\n      hasMultipleChoicesProp === undefined\n        ? isMultiSelect\n        : hasMultipleChoicesProp,\n    [hasMultipleChoicesProp, isMultiSelect]\n  );\n\n  const formattedValueForMultiSelect = isMultiSelect\n    ? ([] as string[] as Value)\n    : (\"\" as string as Value);\n\n  const [selectedValue, setSelectedValue] = useState(\n    value === undefined ? formattedValueForMultiSelect : value\n  );\n\n  const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n    (event, child) => {\n      const valueFromEvent = event.target.value;\n\n      if (typeof valueFromEvent === \"string\") {\n        if (hasMultipleChoices) {\n          setSelectedValue(valueFromEvent.split(\",\") as Value);\n        } else {\n          setSelectedValue(valueFromEvent as Value);\n        }\n      } else {\n        setSelectedValue(valueFromEvent);\n      }\n\n      onChangeProp?.(event, child);\n    },\n    [hasMultipleChoices, onChangeProp, setSelectedValue]\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\n        return (\n          <MenuItem key={option.value} value={option.value}>\n            {hasMultipleChoices && (\n              <MuiCheckbox checked={selectedValue.includes(option.value)} />\n            )}\n            {option.text}\n            {selectedValue == option.value && (\n              <ListItemSecondaryAction>\n                <CheckIcon />\n              </ListItemSecondaryAction>\n            )}\n          </MenuItem>\n        );\n      }),\n    [hasMultipleChoices, normalizedOptions, selectedValue]\n  );\n\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n      <MuiSelect\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        children={children}\n        data-se={testId}\n        id={id}\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        value={selectedValue}\n      />\n    ),\n    [\n      children,\n      hasMultipleChoices,\n      nameOverride,\n      onBlur,\n      onChange,\n      onFocus,\n      renderValue,\n      selectedValue,\n      testId,\n    ]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\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","Field","CheckIcon","ComponentControlledState","useInputValues","getControlState","jsx","_jsx","jsxs","_jsxs","CONTROLLED","Select","_ref","defaultValue","errorMessage","hasMultipleChoices","hasMultipleChoicesProp","hint","id","idOverride","isDisabled","isFullWidth","isMultiSelect","isOptional","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","options","testId","value","undefined","controlledStateRef","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","current","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 { memo, useCallback, useEffect, useMemo, useRef, useState } 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 { SeleniumProps } from \"./SeleniumProps\";\nimport {\n  ComponentControlledState,\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   * @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  | \"hint\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isOptional\"\n  | \"name\"\n  | \"isFullWidth\"\n> &\n  SeleniumProps;\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  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  id: idOverride,\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  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\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        labelId={labelElementId}\n        multiple={hasMultipleChoices}\n        name={nameOverride ?? id}\n        onBlur={onBlur}\n        onChange={onChange}\n        onFocus={onFocus}\n        renderValue={hasMultipleChoices ? renderValue : undefined}\n      />\n    ),\n    [\n      children,\n      inputValues,\n      hasMultipleChoices,\n      nameOverride,\n      onBlur,\n      onChange,\n      onFocus,\n      renderValue,\n      testId,\n    ]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":"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"}

package/dist/TextField.js

@@ -12,33 +12,48 @@ import _InputAdornment from "@mui/material/InputAdornment";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { forwardRef, memo, useCallback } from "react";
+import { forwardRef, memo, useCallback, useRef } from "react";
 import { Field } from "./Field.js";
+import { useInputValues, getControlState } from "./inputUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const textFieldTypeValues = ["email", "number", "tel", "text", "url"];
 const TextField = forwardRef((_ref, ref) => {
   let {
     autoCompleteType,
+    defaultValue,
     hasInitialFocus,
     endAdornment,
     errorMessage,
     hint,
     id: idOverride,
     isDisabled = false,
+    isFullWidth = false,
     isMultiline = false,
     isOptional = false,
     isReadOnly,
     label,
     name: nameOverride,
     onBlur,
-    onChange,
+    onChange: onChangeProp,
     onFocus,
     placeholder,
     startAdornment,
     testId,
     type = "text",
-    value
+    value: value
   } = _ref;
+  const controlledStateRef = useRef(getControlState({
+    controlledValue: value,
+    uncontrolledValue: defaultValue
+  }));
+  const inputValues = useInputValues({
+    defaultValue,
+    value,
+    controlState: controlledStateRef.current
+  });
+  const onChange = useCallback(event => {
+    onChangeProp?.(event);
+  }, [onChangeProp]);
   const renderFieldComponent = useCallback(_ref2 => {
     let {
       ariaDescribedBy,
@@ -47,6 +62,7 @@ const TextField = forwardRef((_ref, ref) => {
       labelElementId
     } = _ref2;
     return _jsx(_InputBase, {
+      ...inputValues,
       inputProps: {
         "aria-errormessage": errorMessageElementId,
         "aria-labelledby": labelElementId
@@ -73,10 +89,9 @@ const TextField = forwardRef((_ref, ref) => {
         position: "start",
         children: startAdornment
       }),
-      type: type,
-      value: value
+      type: type
     });
-  }, [autoCompleteType, hasInitialFocus, endAdornment, isMultiline, nameOverride, onChange, onFocus, onBlur, placeholder, isOptional, isReadOnly, ref, startAdornment, testId, type, value]);
+  }, [autoCompleteType, inputValues, hasInitialFocus, endAdornment, isMultiline, nameOverride, onBlur, onChange, onFocus, placeholder, isOptional, isReadOnly, ref, startAdornment, testId, type]);
   return _jsx(Field, {
     errorMessage: errorMessage,
     fieldType: "single",
@@ -84,6 +99,7 @@ const TextField = forwardRef((_ref, ref) => {
     hint: hint,
     id: idOverride,
     isDisabled: isDisabled,
+    isFullWidth: isFullWidth,
     isOptional: isOptional,
     label: label,
     renderFieldComponent: renderFieldComponent

package/dist/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":["forwardRef","memo","useCallback","Field","jsx","_jsx","textFieldTypeValues","TextField","_ref","ref","autoCompleteType","hasInitialFocus","endAdornment","errorMessage","hint","id","idOverride","isDisabled","isMultiline","isOptional","isReadOnly","label","name","nameOverride","onBlur","onChange","onFocus","placeholder","startAdornment","testId","type","value","renderFieldComponent","_ref2","ariaDescribedBy","errorMessageElementId","labelElementId","_InputBase","inputProps","autoComplete","autoFocus","_InputAdornment","position","children","multiline","readOnly","required","fieldType","hasVisibleLabel","MemoizedTextField","displayName"],"sources":["../src/TextField.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  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  memo,\n  ReactElement,\n  useCallback,\n} from \"react\";\nimport { InputAdornment, InputBase } from \"@mui/material\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { Field } from \"./Field\";\nimport { SeleniumProps } from \"./SeleniumProps\";\n\nexport const textFieldTypeValues = [\n  \"email\",\n  \"number\",\n  \"tel\",\n  \"text\",\n  \"url\",\n] as const;\n\nexport type TextFieldProps = {\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   * End `InputAdornment` for this component.\n   */\n  endAdornment?: string | ReactElement;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.\n   */\n  isMultiline?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * Start `InputAdornment` for this component.\n   */\n  startAdornment?: string | ReactElement;\n  /**\n   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).\n   */\n  type?: (typeof textFieldTypeValues)[number];\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n} & FieldComponentProps &\n  SeleniumProps;\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      autoCompleteType,\n      hasInitialFocus,\n      endAdornment,\n      errorMessage,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isMultiline = false,\n      isOptional = false,\n      isReadOnly,\n      label,\n      name: nameOverride,\n      onBlur,\n      onChange,\n      onFocus,\n      placeholder,\n      startAdornment,\n      testId,\n      type = \"text\",\n      value,\n    },\n    ref\n  ) => {\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n        <InputBase\n          inputProps={{\n            \"aria-errormessage\": errorMessageElementId,\n            \"aria-labelledby\": labelElementId,\n          }}\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            endAdornment && (\n              <InputAdornment position=\"end\">{endAdornment}</InputAdornment>\n            )\n          }\n          id={id}\n          multiline={isMultiline}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          required={!isOptional}\n          startAdornment={\n            startAdornment && (\n              <InputAdornment position=\"start\">{startAdornment}</InputAdornment>\n            )\n          }\n          type={type}\n          value={value}\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        endAdornment,\n        isMultiline,\n        nameOverride,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        isOptional,\n        isReadOnly,\n        ref,\n        startAdornment,\n        testId,\n        type,\n        value,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedTextField = memo(TextField);\nMemoizedTextField.displayName = \"TextField\";\n\nexport { MemoizedTextField as TextField };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAGEA,UAAU,EAEVC,IAAI,EAEJC,WAAW,QACN,OAAO;AAAC,SAINC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGd,OAAO,MAAMC,mBAAmB,GAAG,CACjC,OAAO,EACP,QAAQ,EACR,KAAK,EACL,MAAM,EACN,KAAK,CACG;AAwDV,MAAMC,SAAS,GAAGP,UAAU,CAC1B,CAAAQ,IAAA,EAuBEC,GAAG,KACA;EAAA,IAvBH;IACEC,gBAAgB;IAChBC,eAAe;IACfC,YAAY;IACZC,YAAY;IACZC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU,GAAG,KAAK;IAClBC,WAAW,GAAG,KAAK;IACnBC,UAAU,GAAG,KAAK;IAClBC,UAAU;IACVC,KAAK;IACLC,IAAI,EAAEC,YAAY;IAClBC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,WAAW;IACXC,cAAc;IACdC,MAAM;IACNC,IAAI,GAAG,MAAM;IACbC;EACF,CAAC,GAAAvB,IAAA;EAGD,MAAMwB,oBAAoB,GAAG9B,WAAW,CACtC+B,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEC,qBAAqB;MAAEpB,EAAE;MAAEqB;IAAe,CAAC,GAAAH,KAAA;IAAA,OAC7D5B,IAAA,CAAAgC,UAAA;MACEC,UAAU,EAAE;QACV,mBAAmB,EAAEH,qBAAqB;QAC1C,iBAAiB,EAAEC;MACrB,CAAE;MACF,oBAAkBF,eAAgB;MAClCK,YAAY,EAAE7B,gBAAiB;MAE/B8B,SAAS,EAAE7B,eAAgB;MAC3B,WAASkB,MAAO;MAChBjB,YAAY,EACVA,YAAY,IACVP,IAAA,CAAAoC,eAAA;QAAgBC,QAAQ,EAAC,KAAK;QAAAC,QAAA,EAAE/B;MAAY,CAAiB,CAEhE;MACDG,EAAE,EAAEA,EAAG;MACP6B,SAAS,EAAE1B,WAAY;MACvBI,IAAI,EAAEC,YAAY,IAAIR,EAAG;MACzBS,MAAM,EAAEA,MAAO;MACfC,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBC,WAAW,EAAEA,WAAY;MACzBkB,QAAQ,EAAEzB,UAAW;MACrBX,GAAG,EAAEA,GAAI;MACTqC,QAAQ,EAAE,CAAC3B,UAAW;MACtBS,cAAc,EACZA,cAAc,IACZvB,IAAA,CAAAoC,eAAA;QAAgBC,QAAQ,EAAC,OAAO;QAAAC,QAAA,EAAEf;MAAc,CAAiB,CAEpE;MACDE,IAAI,EAAEA,IAAK;MACXC,KAAK,EAAEA;IAAM,CACd,CAAC;EAAA,CACH,EACD,CACErB,gBAAgB,EAChBC,eAAe,EACfC,YAAY,EACZM,WAAW,EACXK,YAAY,EACZE,QAAQ,EACRC,OAAO,EACPF,MAAM,EACNG,WAAW,EACXR,UAAU,EACVC,UAAU,EACVX,GAAG,EACHmB,cAAc,EACdC,MAAM,EACNC,IAAI,EACJC,KAAK,CAET,CAAC;EAED,OACE1B,IAAA,CAACF,KAAK;IACJU,YAAY,EAAEA,YAAa;IAC3BkC,SAAS,EAAC,QAAQ;IAClBC,eAAe;IACflC,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBE,UAAU,EAAEA,UAAW;IACvBE,KAAK,EAAEA,KAAM;IACbW,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CACF,CAAC;AAED,MAAMiB,iBAAiB,GAAGhD,IAAI,CAACM,SAAS,CAAC;AACzC0C,iBAAiB,CAACC,WAAW,GAAG,WAAW;AAE3C,SAASD,iBAAiB,IAAI1C,SAAS"}
+{"version":3,"file":"TextField.js","names":["forwardRef","memo","useCallback","useRef","Field","useInputValues","getControlState","jsx","_jsx","textFieldTypeValues","TextField","_ref","ref","autoCompleteType","defaultValue","hasInitialFocus","endAdornment","errorMessage","hint","id","idOverride","isDisabled","isFullWidth","isMultiline","isOptional","isReadOnly","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","placeholder","startAdornment","testId","type","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","renderFieldComponent","_ref2","ariaDescribedBy","errorMessageElementId","labelElementId","_InputBase","inputProps","autoComplete","autoFocus","_InputAdornment","position","children","multiline","readOnly","required","fieldType","hasVisibleLabel","MemoizedTextField","displayName"],"sources":["../src/TextField.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  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  memo,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { InputAdornment, InputBase } from \"@mui/material\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { Field } from \"./Field\";\nimport { SeleniumProps } from \"./SeleniumProps\";\nimport { useInputValues, getControlState } from \"./inputUtils\";\n\nexport const textFieldTypeValues = [\n  \"email\",\n  \"number\",\n  \"tel\",\n  \"text\",\n  \"url\",\n] as const;\n\nexport type TextFieldProps = {\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 default value. Use when the component is not controlled.\n   */\n  defaultValue?: string;\n  /**\n   * End `InputAdornment` for this component.\n   */\n  endAdornment?: string | ReactElement;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.\n   */\n  isMultiline?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * Start `InputAdornment` for this component.\n   */\n  startAdornment?: string | ReactElement;\n  /**\n   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).\n   */\n  type?: (typeof textFieldTypeValues)[number];\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n} & FieldComponentProps &\n  SeleniumProps;\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      autoCompleteType,\n      defaultValue,\n      hasInitialFocus,\n      endAdornment,\n      errorMessage,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isFullWidth = false,\n      isMultiline = false,\n      isOptional = false,\n      isReadOnly,\n      label,\n      name: nameOverride,\n      onBlur,\n      onChange: onChangeProp,\n      onFocus,\n      placeholder,\n      startAdornment,\n      testId,\n      type = \"text\",\n      value: value,\n    },\n    ref\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<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          inputProps={{\n            \"aria-errormessage\": errorMessageElementId,\n            \"aria-labelledby\": labelElementId,\n          }}\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            endAdornment && (\n              <InputAdornment position=\"end\">{endAdornment}</InputAdornment>\n            )\n          }\n          id={id}\n          multiline={isMultiline}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          required={!isOptional}\n          startAdornment={\n            startAdornment && (\n              <InputAdornment position=\"start\">{startAdornment}</InputAdornment>\n            )\n          }\n          type={type}\n        />\n      ),\n      [\n        autoCompleteType,\n        inputValues,\n        hasInitialFocus,\n        endAdornment,\n        isMultiline,\n        nameOverride,\n        onBlur,\n        onChange,\n        onFocus,\n        placeholder,\n        isOptional,\n        isReadOnly,\n        ref,\n        startAdornment,\n        testId,\n        type,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedTextField = memo(TextField);\nMemoizedTextField.displayName = \"TextField\";\n\nexport { MemoizedTextField as TextField };\n"],"mappings":"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"}