@fluentui/react-utilities 9.8.0 → 9.8.1

package/CHANGELOG.json

@@ -2,7 +2,54 @@
   "name": "@fluentui/react-utilities",
   "entries": [
     {
-      "date": "Mon, 17 Apr 2023 17:50:12 GMT",
+      "date": "Fri, 12 May 2023 20:22:33 GMT",
+      "tag": "@fluentui/react-utilities_v9.8.1",
+      "version": "9.8.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "88ff00c2979ecd025f725fa3fc4e4d370f95cfc4",
+            "comment": "feat: defers useControllableState state to initializer method"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "f0b05741d812ad90c52754b0b4035d5554cf2aa0",
+            "comment": "chore: updates useControllableState comments"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "c28decb23d191a0daaaf6d5d1832429715102129",
+            "comment": "chore: exclude .swcrc from being published"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "557ffca71ff7767a4d595b6fcc55ad4a1fe02360",
+            "comment": "chore: simplifies useControllableState hook internals"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-utilities",
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.3",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "dbda7fa69e3000aaf8dd4a061e254ebd35198b8e",
+            "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 17 Apr 2023 17:54:02 GMT",
       "tag": "@fluentui/react-utilities_v9.8.0",
       "version": "9.8.0",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Change Log - @fluentui/react-utilities
 
-This log was last generated on Mon, 17 Apr 2023 17:50:12 GMT and should not be manually modified.
+This log was last generated on Fri, 12 May 2023 20:22:33 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.8.1)
+
+Fri, 12 May 2023 20:22:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.8.0..@fluentui/react-utilities_v9.8.1)
+
+### Patches
+
+- feat: defers useControllableState state to initializer method ([PR #27717](https://github.com/microsoft/fluentui/pull/27717) by bernardo.sunderhus@gmail.com)
+- chore: updates useControllableState comments ([PR #27754](https://github.com/microsoft/fluentui/pull/27754) by bernardo.sunderhus@gmail.com)
+- chore: exclude .swcrc from being published ([PR #27740](https://github.com/microsoft/fluentui/pull/27740) by olfedias@microsoft.com)
+- chore: simplifies useControllableState hook internals ([PR #27702](https://github.com/microsoft/fluentui/pull/27702) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/keyboard-keys to v9.0.3 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+
 ## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.8.0)
 
-Mon, 17 Apr 2023 17:50:12 GMT 
+Mon, 17 Apr 2023 17:54:02 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.7.4..@fluentui/react-utilities_v9.8.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -515,18 +515,19 @@ export declare type UnknownSlotProps = Pick<React_2.HTMLAttributes<HTMLElement>,
 /**
  * @internal
  *
- * A `useState`-like hook to manage a value that could be either controlled or uncontrolled,
+ * A [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate)-like hook
+ * to manage a value that could be either `controlled` or `uncontrolled`,
  * such as a checked state or text input string.
  *
- * Unlike `setState`, it's okay to call the returned updater (dispatch) function for either a
- * controlled or uncontrolled component. Calls will only be respected if the component is uncontrolled.
+ * @see https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components for more details on `controlled`/`uncontrolled`
+ *
+ * @returns an array of the current value and an updater (dispatcher) function.
+ * The updater function is referentially stable (won't change during the component's lifecycle).
+ * It can take either a new value, or a function which is passed the previous value and returns the new value.
+ *
+ * ❗️❗️ Calls to the dispatcher will only modify the state if the state is `uncontrolled`.
+ * Meaning that if a state is `controlled`, calls to the dispatcher do not modify the state.
  *
- * @returns Same as [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate): an array
- * of the current value and an updater (dispatch) function. The updater function is referentially
- * stable (won't change during the component's lifecycle). It can take either a new value, or a
- * function which is passed the previous value and returns the new value. Unlike `setState`, calls
- * to the updater function will only be respected if the component is uncontrolled.
- * @see https://reactjs.org/docs/uncontrolled-components.html
  */
 export declare const useControllableState: <State>(options: UseControllableStateOptions<State>) => [State, React_2.Dispatch<React_2.SetStateAction<State>>];
 

package/lib/hooks/useControllableState.js

@@ -1,46 +1,35 @@
 import * as React from 'react';
-function isFactoryDispatch(newState) {
-  return typeof newState === 'function';
-}
 /**
  * @internal
  *
- * A `useState`-like hook to manage a value that could be either controlled or uncontrolled,
+ * A [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate)-like hook
+ * to manage a value that could be either `controlled` or `uncontrolled`,
  * such as a checked state or text input string.
  *
- * Unlike `setState`, it's okay to call the returned updater (dispatch) function for either a
- * controlled or uncontrolled component. Calls will only be respected if the component is uncontrolled.
+ * @see https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components for more details on `controlled`/`uncontrolled`
+ *
+ * @returns an array of the current value and an updater (dispatcher) function.
+ * The updater function is referentially stable (won't change during the component's lifecycle).
+ * It can take either a new value, or a function which is passed the previous value and returns the new value.
+ *
+ * ❗️❗️ Calls to the dispatcher will only modify the state if the state is `uncontrolled`.
+ * Meaning that if a state is `controlled`, calls to the dispatcher do not modify the state.
  *
- * @returns Same as [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate): an array
- * of the current value and an updater (dispatch) function. The updater function is referentially
- * stable (won't change during the component's lifecycle). It can take either a new value, or a
- * function which is passed the previous value and returns the new value. Unlike `setState`, calls
- * to the updater function will only be respected if the component is uncontrolled.
- * @see https://reactjs.org/docs/uncontrolled-components.html
  */
 export const useControllableState = options => {
-  const isControlled = useIsControlled(options.state);
-  const initialState = typeof options.defaultState === 'undefined' ? options.initialState : options.defaultState;
-  const [internalState, setInternalState] = React.useState(initialState);
-  const state = isControlled ? options.state : internalState;
-  const stateRef = React.useRef(state);
-  React.useEffect(() => {
-    stateRef.current = state;
-  }, [state]);
-  // To match the behavior of the setter returned by React.useState, this callback's identity
-  // should never change. This means it MUST NOT directly reference variables that can change.
-  const setState = React.useCallback(newState => {
-    // React dispatch can use a factory
-    // https://reactjs.org/docs/hooks-reference.html#functional-updates
-    if (isFactoryDispatch(newState)) {
-      stateRef.current = newState(stateRef.current);
-    } else {
-      stateRef.current = newState;
+  const [internalState, setInternalState] = React.useState(() => {
+    if (options.defaultState === undefined) {
+      return options.initialState;
     }
-    setInternalState(stateRef.current);
-  }, []);
-  return [state, setState];
+    return isInitializer(options.defaultState) ? options.defaultState() : options.defaultState;
+  });
+  return useIsControlled(options.state) ? [options.state, noop] : [internalState, setInternalState];
 };
+function isInitializer(value) {
+  return typeof value === 'function';
+}
+function noop() {
+  /* noop */}
 /**
  * Helper hook to handle previous comparison of controlled/uncontrolled
  * Prints an error when isControlled value switches between subsequent renders

package/lib/hooks/useControllableState.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","isFactoryDispatch","newState","useControllableState","options","isControlled","useIsControlled","state","initialState","defaultState","internalState","setInternalState","useState","stateRef","useRef","useEffect","current","setState","useCallback","controlledValue","undefined","process","env","NODE_ENV","error","Error","controlWarning","undefinedWarning","console","stack","join"],"sources":["../../src/hooks/useControllableState.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @internal\n */\nexport type UseControllableStateOptions<State> = {\n  /**\n   * User-provided default state or initializer, for uncontrolled usage.\n   */\n  defaultState?: State | (() => State);\n  /**\n   * User-provided controlled state. `undefined` means internal state will be used.\n   */\n  state: State | undefined;\n  /**\n   * Used as the initial state if `state` and `defaultState` are both `undefined`.\n   * If `undefined` is the correct initial state, pass that here.\n   */\n  initialState: State;\n};\n\nfunction isFactoryDispatch<State>(newState: React.SetStateAction<State>): newState is (prevState: State) => State {\n  return typeof newState === 'function';\n}\n\n/**\n * @internal\n *\n * A `useState`-like hook to manage a value that could be either controlled or uncontrolled,\n * such as a checked state or text input string.\n *\n * Unlike `setState`, it's okay to call the returned updater (dispatch) function for either a\n * controlled or uncontrolled component. Calls will only be respected if the component is uncontrolled.\n *\n * @returns Same as [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate): an array\n * of the current value and an updater (dispatch) function. The updater function is referentially\n * stable (won't change during the component's lifecycle). It can take either a new value, or a\n * function which is passed the previous value and returns the new value. Unlike `setState`, calls\n * to the updater function will only be respected if the component is uncontrolled.\n * @see https://reactjs.org/docs/uncontrolled-components.html\n */\nexport const useControllableState = <State>(\n  options: UseControllableStateOptions<State>,\n): [State, React.Dispatch<React.SetStateAction<State>>] => {\n  const isControlled = useIsControlled(options.state);\n  const initialState = typeof options.defaultState === 'undefined' ? options.initialState : options.defaultState;\n  const [internalState, setInternalState] = React.useState<State>(initialState);\n\n  const state = isControlled ? (options.state as State) : internalState;\n\n  const stateRef = React.useRef(state);\n  React.useEffect(() => {\n    stateRef.current = state;\n  }, [state]);\n\n  // To match the behavior of the setter returned by React.useState, this callback's identity\n  // should never change. This means it MUST NOT directly reference variables that can change.\n  const setState = React.useCallback((newState: React.SetStateAction<State>) => {\n    // React dispatch can use a factory\n    // https://reactjs.org/docs/hooks-reference.html#functional-updates\n    if (isFactoryDispatch(newState)) {\n      stateRef.current = newState(stateRef.current);\n    } else {\n      stateRef.current = newState;\n    }\n\n    setInternalState(stateRef.current);\n  }, []);\n\n  return [state, setState];\n};\n\n/**\n * Helper hook to handle previous comparison of controlled/uncontrolled\n * Prints an error when isControlled value switches between subsequent renders\n * @returns - whether the value is controlled\n */\nconst useIsControlled = (controlledValue: unknown) => {\n  const [isControlled] = React.useState<boolean>(() => controlledValue !== undefined);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // We don't want these warnings in production even though it is against native behaviour\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (isControlled !== (controlledValue !== undefined)) {\n        const error = new Error();\n\n        const controlWarning = isControlled\n          ? 'a controlled value to be uncontrolled'\n          : 'an uncontrolled value to be controlled';\n\n        const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';\n\n        // eslint-disable-next-line no-console\n        console.error(\n          [\n            // Default react error\n            'A component is changing ' + controlWarning + '. This is likely caused by the value',\n            'changing from ' + undefinedWarning + ' value, which should not happen.',\n            'Decide between using a controlled or uncontrolled input element for the lifetime of the component.',\n            'More info: https://reactjs.org/link/controlled-components',\n            error.stack,\n          ].join(' '),\n        );\n      }\n    }, [isControlled, controlledValue]);\n  }\n\n  return isControlled;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAqBvB,SAASC,kBAAyBC,QAAqC,EAA2C;EAChH,OAAO,OAAOA,QAAA,KAAa;AAC7B;AAEA;;;;;;;;;;;;;;;;AAgBA,OAAO,MAAMC,oBAAA,GACXC,OAAA,IACyD;EACzD,MAAMC,YAAA,GAAeC,eAAA,CAAgBF,OAAA,CAAQG,KAAK;EAClD,MAAMC,YAAA,GAAe,OAAOJ,OAAA,CAAQK,YAAY,KAAK,cAAcL,OAAA,CAAQI,YAAY,GAAGJ,OAAA,CAAQK,YAAY;EAC9G,MAAM,CAACC,aAAA,EAAeC,gBAAA,CAAiB,GAAGX,KAAA,CAAMY,QAAQ,CAAQJ,YAAA;EAEhE,MAAMD,KAAA,GAAQF,YAAA,GAAgBD,OAAA,CAAQG,KAAK,GAAaG,aAAa;EAErE,MAAMG,QAAA,GAAWb,KAAA,CAAMc,MAAM,CAACP,KAAA;EAC9BP,KAAA,CAAMe,SAAS,CAAC,MAAM;IACpBF,QAAA,CAASG,OAAO,GAAGT,KAAA;EACrB,GAAG,CAACA,KAAA,CAAM;EAEV;EACA;EACA,MAAMU,QAAA,GAAWjB,KAAA,CAAMkB,WAAW,CAAEhB,QAAA,IAA0C;IAC5E;IACA;IACA,IAAID,iBAAA,CAAkBC,QAAA,GAAW;MAC/BW,QAAA,CAASG,OAAO,GAAGd,QAAA,CAASW,QAAA,CAASG,OAAO;IAC9C,OAAO;MACLH,QAAA,CAASG,OAAO,GAAGd,QAAA;IACrB;IAEAS,gBAAA,CAAiBE,QAAA,CAASG,OAAO;EACnC,GAAG,EAAE;EAEL,OAAO,CAACT,KAAA,EAAOU,QAAA,CAAS;AAC1B;AAEA;;;;;AAKA,MAAMX,eAAA,GAAmBa,eAAA,IAA6B;EACpD,MAAM,CAACd,YAAA,CAAa,GAAGL,KAAA,CAAMY,QAAQ,CAAU,MAAMO,eAAA,KAAoBC,SAAA;EAEzE,IAAIC,OAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzC;IACA;IACAvB,KAAA,CAAMe,SAAS,CAAC,MAAM;MACpB,IAAIV,YAAA,MAAkBc,eAAA,KAAoBC,SAAQ,GAAI;QACpD,MAAMI,KAAA,GAAQ,IAAIC,KAAA;QAElB,MAAMC,cAAA,GAAiBrB,YAAA,GACnB,0CACA,wCAAwC;QAE5C,MAAMsB,gBAAA,GAAmBtB,YAAA,GAAe,4BAA4B,wBAAwB;QAE5F;QACAuB,OAAA,CAAQJ,KAAK,CACX;QACE;QACA,6BAA6BE,cAAA,GAAiB,wCAC9C,mBAAmBC,gBAAA,GAAmB,oCACtC,sGACA,6DACAH,KAAA,CAAMK,KAAK,CACZ,CAACC,IAAI,CAAC;MAEX;IACF,GAAG,CAACzB,YAAA,EAAcc,eAAA,CAAgB;EACpC;EAEA,OAAOd,YAAA;AACT"}
+{"version":3,"names":["React","useControllableState","options","internalState","setInternalState","useState","defaultState","undefined","initialState","isInitializer","useIsControlled","state","noop","value","controlledValue","isControlled","process","env","NODE_ENV","useEffect","error","Error","controlWarning","undefinedWarning","console","stack","join"],"sources":["../../src/hooks/useControllableState.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @internal\n */\nexport type UseControllableStateOptions<State> = {\n  /**\n   * User-provided default state or initializer, for uncontrolled usage.\n   */\n  defaultState?: State | (() => State);\n  /**\n   * User-provided controlled state. `undefined` means internal state will be used.\n   */\n  state: State | undefined;\n  /**\n   * Used as the initial state if `state` and `defaultState` are both `undefined`.\n   * If `undefined` is the correct initial state, pass that here.\n   */\n  initialState: State;\n};\n\n/**\n * @internal\n *\n * A [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate)-like hook\n * to manage a value that could be either `controlled` or `uncontrolled`,\n * such as a checked state or text input string.\n *\n * @see https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components for more details on `controlled`/`uncontrolled`\n *\n * @returns an array of the current value and an updater (dispatcher) function.\n * The updater function is referentially stable (won't change during the component's lifecycle).\n * It can take either a new value, or a function which is passed the previous value and returns the new value.\n *\n * ❗️❗️ Calls to the dispatcher will only modify the state if the state is `uncontrolled`.\n * Meaning that if a state is `controlled`, calls to the dispatcher do not modify the state.\n *\n */\nexport const useControllableState = <State>(\n  options: UseControllableStateOptions<State>,\n): [State, React.Dispatch<React.SetStateAction<State>>] => {\n  const [internalState, setInternalState] = React.useState<State>(() => {\n    if (options.defaultState === undefined) {\n      return options.initialState;\n    }\n    return isInitializer(options.defaultState) ? options.defaultState() : options.defaultState;\n  });\n  return useIsControlled(options.state) ? [options.state, noop] : [internalState, setInternalState];\n};\n\nfunction isInitializer<State>(value: State | (() => State)): value is () => State {\n  return typeof value === 'function';\n}\n\nfunction noop() {\n  /* noop */\n}\n\n/**\n * Helper hook to handle previous comparison of controlled/uncontrolled\n * Prints an error when isControlled value switches between subsequent renders\n * @returns - whether the value is controlled\n */\nconst useIsControlled = <V>(controlledValue: V | undefined): controlledValue is V => {\n  const [isControlled] = React.useState<boolean>(() => controlledValue !== undefined);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // We don't want these warnings in production even though it is against native behaviour\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (isControlled !== (controlledValue !== undefined)) {\n        const error = new Error();\n\n        const controlWarning = isControlled\n          ? 'a controlled value to be uncontrolled'\n          : 'an uncontrolled value to be controlled';\n\n        const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';\n\n        // eslint-disable-next-line no-console\n        console.error(\n          [\n            // Default react error\n            'A component is changing ' + controlWarning + '. This is likely caused by the value',\n            'changing from ' + undefinedWarning + ' value, which should not happen.',\n            'Decide between using a controlled or uncontrolled input element for the lifetime of the component.',\n            'More info: https://reactjs.org/link/controlled-components',\n            error.stack,\n          ].join(' '),\n        );\n      }\n    }, [isControlled, controlledValue]);\n  }\n\n  return isControlled;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAqBvB;;;;;;;;;;;;;;;;;AAiBA,OAAO,MAAMC,oBAAA,GACXC,OAAA,IACyD;EACzD,MAAM,CAACC,aAAA,EAAeC,gBAAA,CAAiB,GAAGJ,KAAA,CAAMK,QAAQ,CAAQ,MAAM;IACpE,IAAIH,OAAA,CAAQI,YAAY,KAAKC,SAAA,EAAW;MACtC,OAAOL,OAAA,CAAQM,YAAY;IAC7B;IACA,OAAOC,aAAA,CAAcP,OAAA,CAAQI,YAAY,IAAIJ,OAAA,CAAQI,YAAY,KAAKJ,OAAA,CAAQI,YAAY;EAC5F;EACA,OAAOI,eAAA,CAAgBR,OAAA,CAAQS,KAAK,IAAI,CAACT,OAAA,CAAQS,KAAK,EAAEC,IAAA,CAAK,GAAG,CAACT,aAAA,EAAeC,gBAAA,CAAiB;AACnG;AAEA,SAASK,cAAqBI,KAA4B,EAAwB;EAChF,OAAO,OAAOA,KAAA,KAAU;AAC1B;AAEA,SAASD,KAAA,EAAO;EACd;AAGF;;;;;AAKA,MAAMF,eAAA,GAAsBI,eAAA,IAAyD;EACnF,MAAM,CAACC,YAAA,CAAa,GAAGf,KAAA,CAAMK,QAAQ,CAAU,MAAMS,eAAA,KAAoBP,SAAA;EAEzE,IAAIS,OAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzC;IACA;IACAlB,KAAA,CAAMmB,SAAS,CAAC,MAAM;MACpB,IAAIJ,YAAA,MAAkBD,eAAA,KAAoBP,SAAQ,GAAI;QACpD,MAAMa,KAAA,GAAQ,IAAIC,KAAA;QAElB,MAAMC,cAAA,GAAiBP,YAAA,GACnB,0CACA,wCAAwC;QAE5C,MAAMQ,gBAAA,GAAmBR,YAAA,GAAe,4BAA4B,wBAAwB;QAE5F;QACAS,OAAA,CAAQJ,KAAK,CACX;QACE;QACA,6BAA6BE,cAAA,GAAiB,wCAC9C,mBAAmBC,gBAAA,GAAmB,oCACtC,sGACA,6DACAH,KAAA,CAAMK,KAAK,CACZ,CAACC,IAAI,CAAC;MAEX;IACF,GAAG,CAACX,YAAA,EAAcD,eAAA,CAAgB;EACpC;EAEA,OAAOC,YAAA;AACT"}

package/lib-commonjs/hooks/useControllableState.js

@@ -8,37 +8,26 @@ Object.defineProperty(exports, "useControllableState", {
 });
 const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-function isFactoryDispatch(newState) {
-    return typeof newState === 'function';
-}
 const useControllableState = (options)=>{
-    const isControlled = useIsControlled(options.state);
-    const initialState = typeof options.defaultState === 'undefined' ? options.initialState : options.defaultState;
-    const [internalState, setInternalState] = _react.useState(initialState);
-    const state = isControlled ? options.state : internalState;
-    const stateRef = _react.useRef(state);
-    _react.useEffect(()=>{
-        stateRef.current = state;
-    }, [
-        state
-    ]);
-    // To match the behavior of the setter returned by React.useState, this callback's identity
-    // should never change. This means it MUST NOT directly reference variables that can change.
-    const setState = _react.useCallback((newState)=>{
-        // React dispatch can use a factory
-        // https://reactjs.org/docs/hooks-reference.html#functional-updates
-        if (isFactoryDispatch(newState)) {
-            stateRef.current = newState(stateRef.current);
-        } else {
-            stateRef.current = newState;
+    const [internalState, setInternalState] = _react.useState(()=>{
+        if (options.defaultState === undefined) {
+            return options.initialState;
         }
-        setInternalState(stateRef.current);
-    }, []);
-    return [
-        state,
-        setState
+        return isInitializer(options.defaultState) ? options.defaultState() : options.defaultState;
+    });
+    return useIsControlled(options.state) ? [
+        options.state,
+        noop
+    ] : [
+        internalState,
+        setInternalState
     ];
 };
+function isInitializer(value) {
+    return typeof value === 'function';
+}
+function noop() {
+/* noop */ }
 /**
  * Helper hook to handle previous comparison of controlled/uncontrolled
  * Prints an error when isControlled value switches between subsequent renders

package/lib-commonjs/hooks/useControllableState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../lib/hooks/useControllableState.js"],"sourcesContent":["import * as React from 'react';\nfunction isFactoryDispatch(newState) {\n  return typeof newState === 'function';\n}\n/**\n * @internal\n *\n * A `useState`-like hook to manage a value that could be either controlled or uncontrolled,\n * such as a checked state or text input string.\n *\n * Unlike `setState`, it's okay to call the returned updater (dispatch) function for either a\n * controlled or uncontrolled component. Calls will only be respected if the component is uncontrolled.\n *\n * @returns Same as [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate): an array\n * of the current value and an updater (dispatch) function. The updater function is referentially\n * stable (won't change during the component's lifecycle). It can take either a new value, or a\n * function which is passed the previous value and returns the new value. Unlike `setState`, calls\n * to the updater function will only be respected if the component is uncontrolled.\n * @see https://reactjs.org/docs/uncontrolled-components.html\n */\nexport const useControllableState = options => {\n  const isControlled = useIsControlled(options.state);\n  const initialState = typeof options.defaultState === 'undefined' ? options.initialState : options.defaultState;\n  const [internalState, setInternalState] = React.useState(initialState);\n  const state = isControlled ? options.state : internalState;\n  const stateRef = React.useRef(state);\n  React.useEffect(() => {\n    stateRef.current = state;\n  }, [state]);\n  // To match the behavior of the setter returned by React.useState, this callback's identity\n  // should never change. This means it MUST NOT directly reference variables that can change.\n  const setState = React.useCallback(newState => {\n    // React dispatch can use a factory\n    // https://reactjs.org/docs/hooks-reference.html#functional-updates\n    if (isFactoryDispatch(newState)) {\n      stateRef.current = newState(stateRef.current);\n    } else {\n      stateRef.current = newState;\n    }\n    setInternalState(stateRef.current);\n  }, []);\n  return [state, setState];\n};\n/**\n * Helper hook to handle previous comparison of controlled/uncontrolled\n * Prints an error when isControlled value switches between subsequent renders\n * @returns - whether the value is controlled\n */\nconst useIsControlled = controlledValue => {\n  const [isControlled] = React.useState(() => controlledValue !== undefined);\n  if (process.env.NODE_ENV !== 'production') {\n    // We don't want these warnings in production even though it is against native behaviour\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (isControlled !== (controlledValue !== undefined)) {\n        const error = new Error();\n        const controlWarning = isControlled ? 'a controlled value to be uncontrolled' : 'an uncontrolled value to be controlled';\n        const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';\n        // eslint-disable-next-line no-console\n        console.error([\n        // Default react error\n        'A component is changing ' + controlWarning + '. This is likely caused by the value', 'changing from ' + undefinedWarning + ' value, which should not happen.', 'Decide between using a controlled or uncontrolled input element for the lifetime of the component.', 'More info: https://reactjs.org/link/controlled-components', error.stack].join(' '));\n      }\n    }, [isControlled, controlledValue]);\n  }\n  return isControlled;\n};\n//# sourceMappingURL=useControllableState.js.map"],"names":["useControllableState","isFactoryDispatch","newState","options","isControlled","useIsControlled","state","initialState","defaultState","internalState","setInternalState","React","useState","stateRef","useRef","useEffect","current","setState","useCallback","controlledValue","undefined","process","env","NODE_ENV","error","Error","controlWarning","undefinedWarning","console","stack","join"],"mappings":";;;;+BAoBaA;;aAAAA;;;6DApBU;AACvB,SAASC,kBAAkBC,QAAQ,EAAE;IACnC,OAAO,OAAOA,aAAa;AAC7B;AAiBO,MAAMF,uBAAuBG,CAAAA,UAAW;IAC7C,MAAMC,eAAeC,gBAAgBF,QAAQG,KAAK;IAClD,MAAMC,eAAe,OAAOJ,QAAQK,YAAY,KAAK,cAAcL,QAAQI,YAAY,GAAGJ,QAAQK,YAAY;IAC9G,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,OAAMC,QAAQ,CAACL;IACzD,MAAMD,QAAQF,eAAeD,QAAQG,KAAK,GAAGG,aAAa;IAC1D,MAAMI,WAAWF,OAAMG,MAAM,CAACR;IAC9BK,OAAMI,SAAS,CAAC,IAAM;QACpBF,SAASG,OAAO,GAAGV;IACrB,GAAG;QAACA;KAAM;IACV,2FAA2F;IAC3F,4FAA4F;IAC5F,MAAMW,WAAWN,OAAMO,WAAW,CAAChB,CAAAA,WAAY;QAC7C,mCAAmC;QACnC,mEAAmE;QACnE,IAAID,kBAAkBC,WAAW;YAC/BW,SAASG,OAAO,GAAGd,SAASW,SAASG,OAAO;QAC9C,OAAO;YACLH,SAASG,OAAO,GAAGd;QACrB,CAAC;QACDQ,iBAAiBG,SAASG,OAAO;IACnC,GAAG,EAAE;IACL,OAAO;QAACV;QAAOW;KAAS;AAC1B;AACA;;;;CAIC,GACD,MAAMZ,kBAAkBc,CAAAA,kBAAmB;IACzC,MAAM,CAACf,aAAa,GAAGO,OAAMC,QAAQ,CAAC,IAAMO,oBAAoBC;IAChE,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,wFAAwF;QACxF,sDAAsD;QACtDZ,OAAMI,SAAS,CAAC,IAAM;YACpB,IAAIX,iBAAkBe,CAAAA,oBAAoBC,SAAQ,GAAI;gBACpD,MAAMI,QAAQ,IAAIC;gBAClB,MAAMC,iBAAiBtB,eAAe,0CAA0C,wCAAwC;gBACxH,MAAMuB,mBAAmBvB,eAAe,4BAA4B,wBAAwB;gBAC5F,sCAAsC;gBACtCwB,QAAQJ,KAAK,CAAC;oBACd,sBAAsB;oBACtB,6BAA6BE,iBAAiB;oBAAwC,mBAAmBC,mBAAmB;oBAAoC;oBAAsG;oBAA6DH,MAAMK,KAAK;iBAAC,CAACC,IAAI,CAAC;YACvV,CAAC;QACH,GAAG;YAAC1B;YAAce;SAAgB;IACpC,CAAC;IACD,OAAOf;AACT,GACA,gDAAgD"}
+{"version":3,"sources":["../../lib/hooks/useControllableState.js"],"sourcesContent":["import * as React from 'react';\n/**\n * @internal\n *\n * A [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate)-like hook\n * to manage a value that could be either `controlled` or `uncontrolled`,\n * such as a checked state or text input string.\n *\n * @see https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components for more details on `controlled`/`uncontrolled`\n *\n * @returns an array of the current value and an updater (dispatcher) function.\n * The updater function is referentially stable (won't change during the component's lifecycle).\n * It can take either a new value, or a function which is passed the previous value and returns the new value.\n *\n * ❗️❗️ Calls to the dispatcher will only modify the state if the state is `uncontrolled`.\n * Meaning that if a state is `controlled`, calls to the dispatcher do not modify the state.\n *\n */\nexport const useControllableState = options => {\n  const [internalState, setInternalState] = React.useState(() => {\n    if (options.defaultState === undefined) {\n      return options.initialState;\n    }\n    return isInitializer(options.defaultState) ? options.defaultState() : options.defaultState;\n  });\n  return useIsControlled(options.state) ? [options.state, noop] : [internalState, setInternalState];\n};\nfunction isInitializer(value) {\n  return typeof value === 'function';\n}\nfunction noop() {\n  /* noop */}\n/**\n * Helper hook to handle previous comparison of controlled/uncontrolled\n * Prints an error when isControlled value switches between subsequent renders\n * @returns - whether the value is controlled\n */\nconst useIsControlled = controlledValue => {\n  const [isControlled] = React.useState(() => controlledValue !== undefined);\n  if (process.env.NODE_ENV !== 'production') {\n    // We don't want these warnings in production even though it is against native behaviour\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (isControlled !== (controlledValue !== undefined)) {\n        const error = new Error();\n        const controlWarning = isControlled ? 'a controlled value to be uncontrolled' : 'an uncontrolled value to be controlled';\n        const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';\n        // eslint-disable-next-line no-console\n        console.error([\n        // Default react error\n        'A component is changing ' + controlWarning + '. This is likely caused by the value', 'changing from ' + undefinedWarning + ' value, which should not happen.', 'Decide between using a controlled or uncontrolled input element for the lifetime of the component.', 'More info: https://reactjs.org/link/controlled-components', error.stack].join(' '));\n      }\n    }, [isControlled, controlledValue]);\n  }\n  return isControlled;\n};\n//# sourceMappingURL=useControllableState.js.map"],"names":["useControllableState","options","internalState","setInternalState","React","useState","defaultState","undefined","initialState","isInitializer","useIsControlled","state","noop","value","controlledValue","isControlled","process","env","NODE_ENV","useEffect","error","Error","controlWarning","undefinedWarning","console","stack","join"],"mappings":";;;;+BAkBaA;;aAAAA;;;6DAlBU;AAkBhB,MAAMA,uBAAuBC,CAAAA,UAAW;IAC7C,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,OAAMC,QAAQ,CAAC,IAAM;QAC7D,IAAIJ,QAAQK,YAAY,KAAKC,WAAW;YACtC,OAAON,QAAQO,YAAY;QAC7B,CAAC;QACD,OAAOC,cAAcR,QAAQK,YAAY,IAAIL,QAAQK,YAAY,KAAKL,QAAQK,YAAY;IAC5F;IACA,OAAOI,gBAAgBT,QAAQU,KAAK,IAAI;QAACV,QAAQU,KAAK;QAAEC;KAAK,GAAG;QAACV;QAAeC;KAAiB;AACnG;AACA,SAASM,cAAcI,KAAK,EAAE;IAC5B,OAAO,OAAOA,UAAU;AAC1B;AACA,SAASD,OAAO;AACd,QAAQ,GAAE;AACZ;;;;CAIC,GACD,MAAMF,kBAAkBI,CAAAA,kBAAmB;IACzC,MAAM,CAACC,aAAa,GAAGX,OAAMC,QAAQ,CAAC,IAAMS,oBAAoBP;IAChE,IAAIS,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,wFAAwF;QACxF,sDAAsD;QACtDd,OAAMe,SAAS,CAAC,IAAM;YACpB,IAAIJ,iBAAkBD,CAAAA,oBAAoBP,SAAQ,GAAI;gBACpD,MAAMa,QAAQ,IAAIC;gBAClB,MAAMC,iBAAiBP,eAAe,0CAA0C,wCAAwC;gBACxH,MAAMQ,mBAAmBR,eAAe,4BAA4B,wBAAwB;gBAC5F,sCAAsC;gBACtCS,QAAQJ,KAAK,CAAC;oBACd,sBAAsB;oBACtB,6BAA6BE,iBAAiB;oBAAwC,mBAAmBC,mBAAmB;oBAAoC;oBAAsG;oBAA6DH,MAAMK,KAAK;iBAAC,CAACC,IAAI,CAAC;YACvV,CAAC;QACH,GAAG;YAACX;YAAcD;SAAgB;IACpC,CAAC;IACD,OAAOC;AACT,GACA,gDAAgD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-utilities",
-  "version": "9.8.0",
+  "version": "9.8.1",
   "description": "A set of general React-specific utilities.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,7 +28,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "^9.0.2",
+    "@fluentui/keyboard-keys": "^9.0.3",
     "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {

package/.swcrc

@@ -1,30 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/swcrc",
-  "exclude": [
-    "/testing",
-    "/**/*.cy.ts",
-    "/**/*.cy.tsx",
-    "/**/*.spec.ts",
-    "/**/*.spec.tsx",
-    "/**/*.test.ts",
-    "/**/*.test.tsx"
-  ],
-  "jsc": {
-    "parser": {
-      "syntax": "typescript",
-      "tsx": true,
-      "decorators": false,
-      "dynamicImport": false
-    },
-    "externalHelpers": true,
-    "transform": {
-      "react": {
-        "runtime": "classic",
-        "useSpread": true
-      }
-    },
-    "target": "es2019"
-  },
-  "minify": false,
-  "sourceMaps": true
-}