@okta/odyssey-react-mui 1.7.1 → 1.8.1

package/src/SearchField.tsx

@@ -10,7 +10,6 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { useState, useEffect } from "react";
 import { InputAdornment, InputBase, IconButton } from "@mui/material";
 import {
   ChangeEventHandler,
@@ -19,12 +18,14 @@ import {
   InputHTMLAttributes,
   memo,
   useCallback,
+  useRef,
 } from "react";
 
 import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated";
 import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
+import { getControlState, useInputValues } from "./inputUtils";
 
 export type SearchFieldProps = {
   /**
@@ -33,6 +34,10 @@ export type SearchFieldProps = {
    * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
    */
   autoCompleteType?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
+  /**
+   * The value of the `input` element to use when uncontrolled.
+   */
+  defaultValue?: string;
   /**
    * If `true`, the component will receive focus automatically.
    */
@@ -70,7 +75,7 @@ export type SearchFieldProps = {
    */
   placeholder?: string;
   /**
-   * The value of the `input` element, required for a controlled component.
+   * The value of the `input` element, to use when controlled.
    */
   value?: string;
 } & Pick<FieldComponentProps, "id" | "isDisabled" | "name"> &
@@ -80,6 +85,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
   (
     {
       autoCompleteType,
+      defaultValue,
       hasInitialFocus,
       id: idOverride,
       isDisabled = false,
@@ -91,42 +97,45 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       onClear: onClearProp,
       placeholder,
       testId,
-      value: controlledValue,
+      value,
     },
     ref
   ) => {
-    const [uncontrolledValue, setUncontrolledValue] = useState("");
-
     const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =
       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(
       ({ ariaDescribedBy, id }) => (
         <InputBase
+          {...inputValues}
           aria-describedby={ariaDescribedBy}
           autoComplete={autoCompleteType}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
           autoFocus={hasInitialFocus}
           data-se={testId}
           endAdornment={
-            uncontrolledValue && (
+            defaultValue && (
               <InputAdornment position="end">
                 <IconButton
                   aria-label="Clear"
@@ -152,15 +161,13 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
             </InputAdornment>
           }
           type="search"
-          value={
-            controlledValue === undefined ? uncontrolledValue : controlledValue
-          }
         />
       ),
       [
         autoCompleteType,
-        controlledValue,
+        defaultValue,
         hasInitialFocus,
+        inputValues,
         isDisabled,
         nameOverride,
         onBlur,
@@ -170,7 +177,6 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
         placeholder,
         ref,
         testId,
-        uncontrolledValue,
       ]
     );
 

package/src/Select.tsx

@@ -10,7 +10,7 @@
  * 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 {
   Box,
   Checkbox as MuiCheckbox,
@@ -26,6 +26,11 @@ import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
 import { CheckIcon } from "./icons.generated";
 import type { SeleniumProps } from "./SeleniumProps";
+import {
+  ComponentControlledState,
+  useInputValues,
+  getControlState,
+} from "./inputUtils";
 
 export type SelectOption = {
   text: string;
@@ -40,6 +45,10 @@ export type SelectProps<
   Value extends SelectValueType<HasMultipleChoices>,
   HasMultipleChoices extends boolean
 > = {
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue?: MuiSelectProps<Value>["defaultValue"];
   /**
    * If `true`, the Select allows multiple selections
    */
@@ -94,10 +103,12 @@ export type SelectProps<
  *   - { text: string, type: "heading" } — Used to display a group heading with the text
  */
 
+const { CONTROLLED } = ComponentControlledState;
 const Select = <
   Value extends SelectValueType<HasMultipleChoices>,
   HasMultipleChoices extends boolean
 >({
+  defaultValue,
   errorMessage,
   hasMultipleChoices: hasMultipleChoicesProp,
   hint,
@@ -121,32 +132,38 @@ const Select = <
         : hasMultipleChoicesProp,
     [hasMultipleChoicesProp, isMultiSelect]
   );
+  const controlledStateRef = useRef(
+    getControlState({ controlledValue: value, uncontrolledValue: defaultValue })
+  );
+  const [internalSelectedValues, setInternalSelectedValues] = useState(
+    controlledStateRef.current === CONTROLLED ? value : defaultValue
+  );
 
-  const formattedValueForMultiSelect = isMultiSelect
-    ? ([] as string[] as Value)
-    : ("" as string as Value);
+  useEffect(() => {
+    if (controlledStateRef.current === CONTROLLED) {
+      setInternalSelectedValues(value);
+    }
+  }, [value]);
 
-  const [selectedValue, setSelectedValue] = useState(
-    value === undefined ? formattedValueForMultiSelect : value
-  );
+  const inputValues = useInputValues({
+    defaultValue,
+    value,
+    controlState: controlledStateRef.current,
+  });
 
   const onChange = useCallback<NonNullable<MuiSelectProps<Value>["onChange"]>>(
     (event, child) => {
-      const valueFromEvent = event.target.value;
-
-      if (typeof valueFromEvent === "string") {
-        if (hasMultipleChoices) {
-          setSelectedValue(valueFromEvent.split(",") as Value);
-        } else {
-          setSelectedValue(valueFromEvent as Value);
-        }
-      } else {
-        setSelectedValue(valueFromEvent);
+      const {
+        target: { value },
+      } = event;
+      if (controlledStateRef.current !== CONTROLLED) {
+        setInternalSelectedValues(
+          (typeof value === "string" ? value.split(",") : value) as Value
+        );
       }
-
       onChangeProp?.(event, child);
     },
-    [hasMultipleChoices, onChangeProp, setSelectedValue]
+    [onChangeProp]
   );
 
   // Normalize the options array to accommodate the various
@@ -207,14 +224,15 @@ const Select = <
         if (option.type === "heading") {
           return <ListSubheader key={option.text}>{option.text}</ListSubheader>;
         }
-
         return (
           <MenuItem key={option.value} value={option.value}>
             {hasMultipleChoices && (
-              <MuiCheckbox checked={selectedValue.includes(option.value)} />
+              <MuiCheckbox
+                checked={internalSelectedValues?.includes(option.value)}
+              />
             )}
             {option.text}
-            {selectedValue == option.value && (
+            {internalSelectedValues === option.value && (
               <ListItemSecondaryAction>
                 <CheckIcon />
               </ListItemSecondaryAction>
@@ -222,12 +240,13 @@ const Select = <
           </MenuItem>
         );
       }),
-    [hasMultipleChoices, normalizedOptions, selectedValue]
+    [hasMultipleChoices, normalizedOptions, internalSelectedValues]
   );
 
   const renderFieldComponent = useCallback(
     ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
       <MuiSelect
+        {...inputValues}
         aria-describedby={ariaDescribedBy}
         aria-errormessage={errorMessageElementId}
         children={children}
@@ -240,18 +259,17 @@ const Select = <
         onChange={onChange}
         onFocus={onFocus}
         renderValue={hasMultipleChoices ? renderValue : undefined}
-        value={selectedValue}
       />
     ),
     [
       children,
+      inputValues,
       hasMultipleChoices,
       nameOverride,
       onBlur,
       onChange,
       onFocus,
       renderValue,
-      selectedValue,
       testId,
     ]
   );

package/src/TextField.tsx

@@ -18,12 +18,14 @@ import {
   memo,
   ReactElement,
   useCallback,
+  useRef,
 } from "react";
 import { InputAdornment, InputBase } from "@mui/material";
 
 import { FieldComponentProps } from "./FieldComponentProps";
 import { Field } from "./Field";
 import { SeleniumProps } from "./SeleniumProps";
+import { useInputValues, getControlState } from "./inputUtils";
 
 export const textFieldTypeValues = [
   "email",
@@ -40,6 +42,10 @@ export type TextFieldProps = {
    * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
    */
   autoCompleteType?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue?: string;
   /**
    * End `InputAdornment` for this component.
    */
@@ -91,6 +97,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   (
     {
       autoCompleteType,
+      defaultValue,
       hasInitialFocus,
       endAdornment,
       errorMessage,
@@ -103,19 +110,41 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       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<
+      NonNullable<ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>>
+    >(
+      (event) => {
+        onChangeProp?.(event);
+      },
+      [onChangeProp]
+    );
+
     const renderFieldComponent = useCallback(
       ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
         <InputBase
+          {...inputValues}
           inputProps={{
             "aria-errormessage": errorMessageElementId,
             "aria-labelledby": labelElementId,
@@ -146,18 +175,18 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             )
           }
           type={type}
-          value={value}
         />
       ),
       [
         autoCompleteType,
+        inputValues,
         hasInitialFocus,
         endAdornment,
         isMultiline,
         nameOverride,
+        onBlur,
         onChange,
         onFocus,
-        onBlur,
         placeholder,
         isOptional,
         isReadOnly,
@@ -165,7 +194,6 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         startAdornment,
         testId,
         type,
-        value,
       ]
     );
 

package/src/inputUtils.ts

@@ -0,0 +1,76 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useMemo } from "react";
+
+type UseControlledStateProps<Value> = {
+  controlledValue?: Value;
+  uncontrolledValue?: Value;
+};
+
+export const ComponentControlledState = {
+  CONTROLLED: "CONTROLLED",
+  UNCONTROLLED: "UNCONTROLLED",
+};
+
+export type ModeType = keyof typeof ComponentControlledState;
+export type ModeTypeValue = (typeof ComponentControlledState)[ModeType];
+
+export const getControlState = <Value>({
+  controlledValue,
+  uncontrolledValue,
+}: UseControlledStateProps<Value>): ModeTypeValue => {
+  if (uncontrolledValue !== undefined || controlledValue === undefined) {
+    return ComponentControlledState.UNCONTROLLED;
+  }
+  return ComponentControlledState.CONTROLLED;
+};
+
+type InputValueProps<Value> = {
+  defaultValue?: Value;
+  value?: Value;
+  controlState: ModeTypeValue;
+};
+
+type InputValue<Value> =
+  | {
+      defaultValue: Value | undefined;
+      value?: undefined;
+    }
+  | {
+      value: Value | undefined;
+      defaultValue?: undefined;
+    };
+
+/**
+ * In components that support being used in a controlled or uncontrolled way, the defaultValue and value props need
+ * to be suppled values in a mutually exclusive way.
+ * If a `value` is being provided to the component, then it is being used in a controlled manner and `defaultValue` needs to be undefined.
+ * If `value` is undefined, then that means the component is being used in an uncontrolled way and `defaultValue` is either Value or undefined.
+ * This helper helps ensure this mutual exclusivity between the 2 props so the component can operate as expected.
+ *
+ * @param {InputValueProps<Value>}: { defaultValue: Value | undefined, value: Value | undefined }
+ * @returns {InputValue<Value>}: { defaultValue: Value | undefined, value?: undefined } | { defaultValue?: undefined, value: Value }
+ */
+export const useInputValues = <Value>({
+  defaultValue,
+  value,
+  controlState,
+}: InputValueProps<Value>): InputValue<Value> => {
+  const inputValues = useMemo(() => {
+    if (controlState === ComponentControlledState.CONTROLLED) {
+      return { value };
+    }
+    return { defaultValue };
+  }, [defaultValue, value]);
+  return inputValues;
+};

package/src/labs/VirtualizedAutocomplete.tsx

@@ -17,12 +17,16 @@ import {
   UseAutocompleteProps,
   AutocompleteValue,
 } from "@mui/material";
-import { memo, useCallback, useMemo } from "react";
+import { memo, useCallback, useMemo, useRef } from "react";
 
 import { Field } from "../Field";
 import { FieldComponentProps } from "../FieldComponentProps";
 import type { SeleniumProps } from "../SeleniumProps";
-import { useControlledState } from "../useControlledState";
+import {
+  ComponentControlledState,
+  getControlState,
+  useInputValues,
+} from "../inputUtils";
 
 export type AutocompleteProps<
   OptionType,
@@ -196,6 +200,44 @@ const VirtualizedAutocomplete = <
   getIsOptionEqualToValue,
   testId,
 }: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
+  const controlledStateRef = useRef(
+    getControlState({ controlledValue: value, uncontrolledValue: defaultValue })
+  );
+  const defaultValueProp = useMemo<
+    | AutocompleteValue<
+        OptionType,
+        HasMultipleChoices,
+        undefined,
+        IsCustomValueAllowed
+      >
+    | undefined
+  >(() => {
+    if (hasMultipleChoices) {
+      return defaultValue === undefined
+        ? ([] as AutocompleteValue<
+            OptionType,
+            HasMultipleChoices,
+            undefined,
+            IsCustomValueAllowed
+          >)
+        : defaultValue;
+    }
+    return defaultValue ?? undefined;
+  }, [defaultValue, hasMultipleChoices]);
+
+  const valueProps = useInputValues({
+    defaultValue: defaultValueProp,
+    value: value,
+    controlState: controlledStateRef.current,
+  });
+
+  const inputValueProp = useMemo(() => {
+    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {
+      return { inputValue };
+    }
+    return undefined;
+  }, [inputValue]);
+
   const renderInput = useCallback(
     ({ InputLabelProps, InputProps, ...params }) => (
       <Field
@@ -230,39 +272,6 @@ const VirtualizedAutocomplete = <
     ),
     [errorMessage, hint, isOptional, label, nameOverride]
   );
-
-  const defaultValuesProp = useMemo<
-    | AutocompleteValue<
-        OptionType,
-        HasMultipleChoices,
-        undefined,
-        IsCustomValueAllowed
-      >
-    | undefined
-  >(() => {
-    if (hasMultipleChoices) {
-      return defaultValue === undefined
-        ? ([] as AutocompleteValue<
-            OptionType,
-            HasMultipleChoices,
-            undefined,
-            IsCustomValueAllowed
-          >)
-        : defaultValue;
-    }
-    return defaultValue ?? undefined;
-  }, [defaultValue, hasMultipleChoices]);
-
-  const [localValue, setLocalValue] = useControlledState({
-    controlledValue: value,
-    uncontrolledValue: defaultValuesProp,
-  });
-
-  const [localInputValue, setLocalInputValue] = useControlledState({
-    controlledValue: inputValue,
-    uncontrolledValue: undefined,
-  });
-
   const onChange = useCallback<
     NonNullable<
       UseAutocompleteProps<
@@ -274,10 +283,9 @@ const VirtualizedAutocomplete = <
     >
   >(
     (event, value, reason, details) => {
-      setLocalValue(value);
       onChangeProp?.(event, value, reason, details);
     },
-    [onChangeProp, setLocalValue]
+    [onChangeProp]
   );
 
   const onInputChange = useCallback<
@@ -291,18 +299,18 @@ const VirtualizedAutocomplete = <
     >
   >(
     (event, value, reason) => {
-      setLocalInputValue(value);
       onInputChangeProp?.(event, value, reason);
     },
-    [onInputChangeProp, setLocalInputValue]
+    [onInputChangeProp]
   );
 
   return (
     <MuiAutocomplete
+      {...valueProps}
+      {...inputValueProp}
       // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div
       aria-disabled={isDisabled}
       data-se={testId}
-      defaultValue={defaultValuesProp}
       disableCloseOnSelect={hasMultipleChoices}
       disabled={isDisabled}
       freeSolo={isCustomValueAllowed}
@@ -318,8 +326,6 @@ const VirtualizedAutocomplete = <
       options={options}
       readOnly={isReadOnly}
       renderInput={renderInput}
-      value={localValue}
-      inputValue={localInputValue}
       isOptionEqualToValue={getIsOptionEqualToValue}
     />
   );

package/dist/src/useControlledState.d.ts

@@ -1,28 +0,0 @@
-/*!
- * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-/// <reference types="react" />
-type UseControlledStateProps<Value> = {
-    controlledValue?: Value;
-    uncontrolledValue?: Value;
-};
-/**
- * Use the same way as `useState`. Returns a stateful value, and a function to update it.
- * When `initialState` is passed, the returned function to update it does nothing. This is
- * useful to handle values in components that may be controlled externally when that value is
- * passed in props and thus wish to prevent internal updates of the same value.
- *
- * @param initialState
- * @see https://react.dev/reference/react/useState
- */
-export declare const useControlledState: <Value>({ controlledValue, uncontrolledValue, }: UseControlledStateProps<Value>) => readonly [Value | undefined, import("react").Dispatch<import("react").SetStateAction<Value | undefined>>];
-export {};
-//# sourceMappingURL=useControlledState.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useControlledState.d.ts","sourceRoot":"","sources":["../../src/useControlledState.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AAIH,KAAK,uBAAuB,CAAC,KAAK,IAAI;IACpC,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,+LA2B9B,CAAC"}

package/dist/useControlledState.js

@@ -1,33 +0,0 @@
-/*!
- * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-import { useEffect, useRef, useState } from "react";
-export const useControlledState = _ref => {
-  let {
-    controlledValue,
-    uncontrolledValue
-  } = _ref;
-  const isControlledMode = useRef(controlledValue !== undefined);
-  const [stateValue, setStateValue] = useState(isControlledMode.current ? controlledValue : uncontrolledValue);
-  useEffect(() => {
-    if (isControlledMode.current) {
-      setStateValue(controlledValue);
-    }
-  }, [controlledValue]);
-  const setState = value => {
-    if (!isControlledMode.current) {
-      setStateValue(value);
-    }
-  };
-  return [stateValue, setState];
-};
-//# sourceMappingURL=useControlledState.js.map

package/dist/useControlledState.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useControlledState.js","names":["useEffect","useRef","useState","useControlledState","_ref","controlledValue","uncontrolledValue","isControlledMode","undefined","stateValue","setStateValue","current","setState","value"],"sources":["../src/useControlledState.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useEffect, useRef, useState } from \"react\";\n\ntype UseControlledStateProps<Value> = {\n  controlledValue?: Value; // isChecked\n  uncontrolledValue?: Value; // isDefaultChecked\n};\n\n/**\n * Use the same way as `useState`. Returns a stateful value, and a function to update it.\n * When `initialState` is passed, the returned function to update it does nothing. This is\n * useful to handle values in components that may be controlled externally when that value is\n * passed in props and thus wish to prevent internal updates of the same value.\n *\n * @param initialState\n * @see https://react.dev/reference/react/useState\n */\nexport const useControlledState = <Value>({\n  controlledValue,\n  uncontrolledValue,\n}: UseControlledStateProps<Value>) => {\n  const isControlledMode = useRef(controlledValue !== undefined);\n  const [stateValue, setStateValue] = useState(\n    isControlledMode.current ? controlledValue : uncontrolledValue\n  );\n\n  useEffect(() => {\n    if (isControlledMode.current) {\n      setStateValue(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const setState: typeof setStateValue = (value) => {\n    if (!isControlledMode.current) {\n      setStateValue(value);\n    }\n  };\n\n  return [\n    stateValue,\n    // If `value` is controlled externally, ignore calls to the setter.\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    setState,\n  ] as const;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAgBnD,OAAO,MAAMC,kBAAkB,GAAGC,IAAA,IAGI;EAAA,IAHI;IACxCC,eAAe;IACfC;EAC8B,CAAC,GAAAF,IAAA;EAC/B,MAAMG,gBAAgB,GAAGN,MAAM,CAACI,eAAe,KAAKG,SAAS,CAAC;EAC9D,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGR,QAAQ,CAC1CK,gBAAgB,CAACI,OAAO,GAAGN,eAAe,GAAGC,iBAC/C,CAAC;EAEDN,SAAS,CAAC,MAAM;IACd,IAAIO,gBAAgB,CAACI,OAAO,EAAE;MAC5BD,aAAa,CAACL,eAAe,CAAC;IAChC;EACF,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC;EAErB,MAAMO,QAA8B,GAAIC,KAAK,IAAK;IAChD,IAAI,CAACN,gBAAgB,CAACI,OAAO,EAAE;MAC7BD,aAAa,CAACG,KAAK,CAAC;IACtB;EACF,CAAC;EAED,OAAO,CACLJ,UAAU,EAGVG,QAAQ,CACT;AACH,CAAC"}