@fluentui/react-utilities 0.0.0-nightly-20230901-0414.1 → 0.0.0-nightly-20230905-0414.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-utilities",
   "entries": [
     {
-      "date": "Fri, 01 Sep 2023 04:21:24 GMT",
-      "tag": "@fluentui/react-utilities_v0.0.0-nightly-20230901-0414.1",
-      "version": "0.0.0-nightly-20230901-0414.1",
+      "date": "Tue, 05 Sep 2023 04:21:19 GMT",
+      "tag": "@fluentui/react-utilities_v0.0.0-nightly-20230905-0414.1",
+      "version": "0.0.0-nightly-20230905-0414.1",
       "comments": {
         "prerelease": [
           {
@@ -16,8 +16,8 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-utilities",
-            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230901-0414.1",
-            "commit": "fbb61f532085f47b8c406d0c436db91219e16909"
+            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230905-0414.1",
+            "commit": "80f5d6c5eba684280572bd2bdb904259d480f171"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,18 +1,18 @@
 # Change Log - @fluentui/react-utilities
 
-This log was last generated on Fri, 01 Sep 2023 04:21:24 GMT and should not be manually modified.
+This log was last generated on Tue, 05 Sep 2023 04:21:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230901-0414.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v0.0.0-nightly-20230901-0414.1)
+## [0.0.0-nightly-20230905-0414.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v0.0.0-nightly-20230905-0414.1)
 
-Fri, 01 Sep 2023 04:21:24 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.13.0..@fluentui/react-utilities_v0.0.0-nightly-20230901-0414.1)
+Tue, 05 Sep 2023 04:21:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.13.0..@fluentui/react-utilities_v0.0.0-nightly-20230905-0414.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230901-0414.1 ([commit](https://github.com/microsoft/fluentui/commit/fbb61f532085f47b8c406d0c436db91219e16909) by beachball)
+- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230905-0414.1 ([commit](https://github.com/microsoft/fluentui/commit/80f5d6c5eba684280572bd2bdb904259d480f171) by beachball)
 
 ## [9.13.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.13.0)
 

package/lib/compose/assertSlots.js

@@ -39,7 +39,9 @@ import { slot } from './index';
                     elementType: typedState.components[slotName]
                 });
                 // eslint-disable-next-line no-console
-                console.warn(`${assertSlots.name} warning: state.${slotName} is not a slot.\n` + `Be sure to create slots properly by using 'slot.always' or 'slot.optional'.`);
+                console.warn(`@fluentui/react-utilities [${assertSlots.name}]:
+"state.${slotName}" is not a slot!
+Be sure to create slots properly by using "slot.always" or "slot.optional".`);
             } else {
                 // This means a slot is being declared by using resolveShorthand on the state hook,
                 // but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type
@@ -47,7 +49,10 @@ import { slot } from './index';
                 if (elementType !== typedState.components[slotName]) {
                     slotElement[SLOT_ELEMENT_TYPE_SYMBOL] = typedState.components[slotName];
                     // eslint-disable-next-line no-console
-                    console.warn(`${assertSlots.name} warning: state.${slotName} element type differs from state.components.${slotName}, ${elementType} !== ${typedState.components[slotName]}. \n` + `Be sure to create slots properly by using 'slot.always' or 'slot.optional' with the correct elementType`);
+                    console.warn(`@fluentui/react-utilities [${assertSlots.name}]:
+"state.${slotName}" element type differs from "state.components.${slotName}",
+${elementType} !== ${typedState.components[slotName]}.
+Be sure to create slots properly by using "slot.always" or "slot.optional" with the correct elementType.`);
                 }
             }
         }

package/lib/compose/assertSlots.js.map

@@ -1 +1 @@
-{"version":3,"sources":["assertSlots.ts"],"sourcesContent":["import * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL } from './constants';\nimport { isSlot } from './isSlot';\nimport { ComponentState, ExtractSlotProps, SlotComponentType, SlotPropsRecord } from './types';\nimport { slot } from './index';\n\ntype SlotComponents<Slots extends SlotPropsRecord> = {\n  [K in keyof Slots]: SlotComponentType<ExtractSlotProps<Slots[K]>>;\n};\n\n/**\n * @internal\n * Assertion method to ensure state slots properties are properly declared.\n * A properly declared slot must be declared by using the `slot` method.\n *\n * @example\n * ```tsx\n * export const renderInput_unstable = (state: InputState) => {\n    assertSlots<InputSlots>(state);\n    return (\n      <state.root>\n        {state.contentBefore && <state.contentBefore />}\n        <state.input />\n        {state.contentAfter && <state.contentAfter />}\n      </state.root>\n    );\n  };\n * ```\n */\nexport function assertSlots<Slots extends SlotPropsRecord>(state: unknown): asserts state is SlotComponents<Slots> {\n  /**\n   * This verification is not necessary in production\n   * as we're verifying static properties that will not change between environments\n   */\n  if (process.env.NODE_ENV !== 'production') {\n    const typedState = state as ComponentState<Slots>;\n    for (const slotName of Object.keys(typedState.components)) {\n      const slotElement = typedState[slotName];\n      if (slotElement === undefined) {\n        continue;\n      }\n      // this means a slot is being declared without using, slot.always or slot.optional or even resolveShorthand on the state hook,\n      // but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type\n      // FIXME: this slot will still fail to support child render function scenario\n      if (!isSlot(slotElement)) {\n        typedState[slotName as keyof ComponentState<Slots>] = slot.always(slotElement, {\n          elementType: typedState.components[slotName] as React.ComponentType<{}>,\n        }) as ComponentState<Slots>[keyof ComponentState<Slots>];\n        // eslint-disable-next-line no-console\n        console.warn(\n          `${assertSlots.name} warning: state.${slotName} is not a slot.\\n` +\n            `Be sure to create slots properly by using 'slot.always' or 'slot.optional'.`,\n        );\n      } else {\n        // This means a slot is being declared by using resolveShorthand on the state hook,\n        // but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type\n        const { [SLOT_ELEMENT_TYPE_SYMBOL]: elementType } = slotElement;\n        if (elementType !== typedState.components[slotName]) {\n          slotElement[SLOT_ELEMENT_TYPE_SYMBOL] = typedState.components[slotName] as React.ComponentType<{}>;\n          // eslint-disable-next-line no-console\n          console.warn(\n            `${assertSlots.name} warning: state.${slotName} element type differs from state.components.${slotName}, ${elementType} !== ${typedState.components[slotName]}. \\n` +\n              `Be sure to create slots properly by using 'slot.always' or 'slot.optional' with the correct elementType`,\n          );\n        }\n      }\n    }\n  }\n}\n"],"names":["React","SLOT_ELEMENT_TYPE_SYMBOL","isSlot","slot","assertSlots","state","process","env","NODE_ENV","typedState","slotName","Object","keys","components","slotElement","undefined","always","elementType","console","warn","name"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,cAAc;AACvD,SAASC,MAAM,QAAQ,WAAW;AAElC,SAASC,IAAI,QAAQ,UAAU;AAM/B;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASC,YAA2CC,KAAc;IACvE;;;GAGC,GACD,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,MAAMC,aAAaJ;QACnB,KAAK,MAAMK,YAAYC,OAAOC,IAAI,CAACH,WAAWI,UAAU,EAAG;YACzD,MAAMC,cAAcL,UAAU,CAACC,SAAS;YACxC,IAAII,gBAAgBC,WAAW;gBAC7B;YACF;YACA,8HAA8H;YAC9H,4JAA4J;YAC5J,6EAA6E;YAC7E,IAAI,CAACb,OAAOY,cAAc;gBACxBL,UAAU,CAACC,SAAwC,GAAGP,KAAKa,MAAM,CAACF,aAAa;oBAC7EG,aAAaR,WAAWI,UAAU,CAACH,SAAS;gBAC9C;gBACA,sCAAsC;gBACtCQ,QAAQC,IAAI,CACV,CAAC,EAAEf,YAAYgB,IAAI,CAAC,gBAAgB,EAAEV,SAAS,iBAAiB,CAAC,GAC/D,CAAC,2EAA2E,CAAC;YAEnF,OAAO;gBACL,mFAAmF;gBACnF,4JAA4J;gBAC5J,MAAM,EAAE,CAACT,yBAAyB,EAAEgB,WAAW,EAAE,GAAGH;gBACpD,IAAIG,gBAAgBR,WAAWI,UAAU,CAACH,SAAS,EAAE;oBACnDI,WAAW,CAACb,yBAAyB,GAAGQ,WAAWI,UAAU,CAACH,SAAS;oBACvE,sCAAsC;oBACtCQ,QAAQC,IAAI,CACV,CAAC,EAAEf,YAAYgB,IAAI,CAAC,gBAAgB,EAAEV,SAAS,4CAA4C,EAAEA,SAAS,EAAE,EAAEO,YAAY,KAAK,EAAER,WAAWI,UAAU,CAACH,SAAS,CAAC,IAAI,CAAC,GAChK,CAAC,uGAAuG,CAAC;gBAE/G;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["assertSlots.ts"],"sourcesContent":["import * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL } from './constants';\nimport { isSlot } from './isSlot';\nimport { ComponentState, ExtractSlotProps, SlotComponentType, SlotPropsRecord } from './types';\nimport { slot } from './index';\n\ntype SlotComponents<Slots extends SlotPropsRecord> = {\n  [K in keyof Slots]: SlotComponentType<ExtractSlotProps<Slots[K]>>;\n};\n\n/**\n * @internal\n * Assertion method to ensure state slots properties are properly declared.\n * A properly declared slot must be declared by using the `slot` method.\n *\n * @example\n * ```tsx\n * export const renderInput_unstable = (state: InputState) => {\n    assertSlots<InputSlots>(state);\n    return (\n      <state.root>\n        {state.contentBefore && <state.contentBefore />}\n        <state.input />\n        {state.contentAfter && <state.contentAfter />}\n      </state.root>\n    );\n  };\n * ```\n */\nexport function assertSlots<Slots extends SlotPropsRecord>(state: unknown): asserts state is SlotComponents<Slots> {\n  /**\n   * This verification is not necessary in production\n   * as we're verifying static properties that will not change between environments\n   */\n  if (process.env.NODE_ENV !== 'production') {\n    const typedState = state as ComponentState<Slots>;\n    for (const slotName of Object.keys(typedState.components)) {\n      const slotElement = typedState[slotName];\n      if (slotElement === undefined) {\n        continue;\n      }\n      // this means a slot is being declared without using, slot.always or slot.optional or even resolveShorthand on the state hook,\n      // but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type\n      // FIXME: this slot will still fail to support child render function scenario\n      if (!isSlot(slotElement)) {\n        typedState[slotName as keyof ComponentState<Slots>] = slot.always(slotElement, {\n          elementType: typedState.components[slotName] as React.ComponentType<{}>,\n        }) as ComponentState<Slots>[keyof ComponentState<Slots>];\n        // eslint-disable-next-line no-console\n        console.warn(/** #__DE-INDENT__ */ `\n          @fluentui/react-utilities [${assertSlots.name}]:\n          \"state.${slotName}\" is not a slot!\n          Be sure to create slots properly by using \"slot.always\" or \"slot.optional\".\n        `);\n      } else {\n        // This means a slot is being declared by using resolveShorthand on the state hook,\n        // but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type\n        const { [SLOT_ELEMENT_TYPE_SYMBOL]: elementType } = slotElement;\n        if (elementType !== typedState.components[slotName]) {\n          slotElement[SLOT_ELEMENT_TYPE_SYMBOL] = typedState.components[slotName] as React.ComponentType<{}>;\n          // eslint-disable-next-line no-console\n          console.warn(/** #__DE-INDENT__ */ `\n            @fluentui/react-utilities [${assertSlots.name}]:\n            \"state.${slotName}\" element type differs from \"state.components.${slotName}\",\n            ${elementType} !== ${typedState.components[slotName]}.\n            Be sure to create slots properly by using \"slot.always\" or \"slot.optional\" with the correct elementType.\n          `);\n        }\n      }\n    }\n  }\n}\n"],"names":["React","SLOT_ELEMENT_TYPE_SYMBOL","isSlot","slot","assertSlots","state","process","env","NODE_ENV","typedState","slotName","Object","keys","components","slotElement","undefined","always","elementType","console","warn","name"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,cAAc;AACvD,SAASC,MAAM,QAAQ,WAAW;AAElC,SAASC,IAAI,QAAQ,UAAU;AAM/B;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASC,YAA2CC,KAAc;IACvE;;;GAGC,GACD,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,MAAMC,aAAaJ;QACnB,KAAK,MAAMK,YAAYC,OAAOC,IAAI,CAACH,WAAWI,UAAU,EAAG;YACzD,MAAMC,cAAcL,UAAU,CAACC,SAAS;YACxC,IAAII,gBAAgBC,WAAW;gBAC7B;YACF;YACA,8HAA8H;YAC9H,4JAA4J;YAC5J,6EAA6E;YAC7E,IAAI,CAACb,OAAOY,cAAc;gBACxBL,UAAU,CAACC,SAAwC,GAAGP,KAAKa,MAAM,CAACF,aAAa;oBAC7EG,aAAaR,WAAWI,UAAU,CAACH,SAAS;gBAC9C;gBACA,sCAAsC;gBACtCQ,QAAQC,IAAI,CAAuB,CAAC,2BACP,EAAEf,YAAYgB,IAAI,CAAC;OACvC,EAAEV,SAAS;2EAEpB,CAAC;YACH,OAAO;gBACL,mFAAmF;gBACnF,4JAA4J;gBAC5J,MAAM,EAAE,CAACT,yBAAyB,EAAEgB,WAAW,EAAE,GAAGH;gBACpD,IAAIG,gBAAgBR,WAAWI,UAAU,CAACH,SAAS,EAAE;oBACnDI,WAAW,CAACb,yBAAyB,GAAGQ,WAAWI,UAAU,CAACH,SAAS;oBACvE,sCAAsC;oBACtCQ,QAAQC,IAAI,CAAuB,CAAC,2BACP,EAAEf,YAAYgB,IAAI,CAAC;OACvC,EAAEV,SAAS,8CAA8C,EAAEA,SAAS;AAC3E,EAAEO,YAAY,KAAK,EAAER,WAAWI,UAAU,CAACH,SAAS,CAAC;wGAEvD,CAAC;gBACH;YACF;QACF;IACF;AACF"}

package/lib/compose/slot.js

@@ -59,11 +59,10 @@ import { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from './constan
     if (value && typeof value !== 'object' && process.env.NODE_ENV !== 'production') {
         // TODO: would be nice to have a link to slot documentation in this error message
         // eslint-disable-next-line no-console
-        console.error([
-            `[slot.resolveShorthand]: A slot got invalid value "${value}" (${typeof value}).`,
-            'A valid value is a slot shorthand or slot properties object.',
-            'Slot shorthands can be strings, numbers, arrays or JSX elements'
-        ].join('\n'));
+        console.error(`@fluentui/react-utilities [slot.${resolveShorthand.name}]:
+A slot got an invalid value "${value}" (${typeof value}).
+A valid value for a slot is a slot shorthand or slot properties object.
+Slot shorthands can be strings, numbers, arrays or JSX elements`);
     }
     return value;
 }

package/lib/compose/slot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["slot.ts"],"sourcesContent":["import type {\n  AsIntrinsicElement,\n  SlotComponentType,\n  SlotRenderFunction,\n  SlotShorthandValue,\n  UnknownSlotProps,\n} from './types';\nimport * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from './constants';\n\nexport type SlotOptions<Props extends UnknownSlotProps> = {\n  elementType:\n    | React.ComponentType<Props>\n    | (Props extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);\n  defaultProps?: Partial<Props>;\n};\n\n/**\n * Creates a slot from a slot shorthand or properties (`props.SLOT_NAME` or `props` itself)\n * @param value - the value of the slot, it can be a slot shorthand, a slot component or a slot properties\n * @param options - values you can pass to alter the signature of a slot, those values are:\n *\n * * `elementType` - the base element type of a slot, defaults to `'div'`\n * * `defaultProps` - similar to a React component declaration, you can provide a slot default properties to be merged with the shorthand/properties provided.\n */\nexport function always<Props extends UnknownSlotProps>(\n  value: Props | SlotShorthandValue | undefined,\n  options: SlotOptions<Props>,\n): SlotComponentType<Props> {\n  const { defaultProps, elementType } = options;\n\n  const props = resolveShorthand(value);\n\n  /**\n   * Casting is required here as SlotComponentType is a function, not an object.\n   * Although SlotComponentType has a function signature, it is still just an object.\n   * This is required to make a slot callable (JSX compatible), this is the exact same approach\n   * that is used on `@types/react` components\n   */\n  const propsWithMetadata = {\n    ...defaultProps,\n    ...props,\n    [SLOT_ELEMENT_TYPE_SYMBOL]: elementType,\n  } as SlotComponentType<Props>;\n\n  if (props && typeof props.children === 'function') {\n    propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = props.children as SlotRenderFunction<Props>;\n    propsWithMetadata.children = defaultProps?.children;\n  }\n\n  return propsWithMetadata;\n}\n\n/**\n * Creates a slot from a slot shorthand or properties (`props.SLOT_NAME` or `props` itself)\n * @param value - the value of the slot, it can be a slot shorthand, a slot component or a slot properties\n * @param options - values you can pass to alter the signature of a slot, those values are:\n *\n * * `elementType` - the base element type of a slot, defaults to `'div'`\n * * `defaultProps` - similar to a React component declaration, you can provide a slot default properties to be merged with the shorthand/properties provided\n * * `renderByDefault` - a boolean that indicates if a slot will be rendered even if it's base value is `undefined`.\n * By default if `props.SLOT_NAME` is `undefined` then `state.SLOT_NAME` becomes `undefined`\n * and nothing will be rendered, but if `renderByDefault = true` then `state.SLOT_NAME` becomes an object\n * with the values provided by `options.defaultProps` (or `{}`). This is useful for cases such as providing a default content\n * in case no shorthand is provided, like the case of the `expandIcon` slot for the `AccordionHeader`\n */\nexport function optional<Props extends UnknownSlotProps>(\n  value: Props | SlotShorthandValue | undefined | null,\n  options: { renderByDefault?: boolean } & SlotOptions<Props>,\n): SlotComponentType<Props> | undefined {\n  if (value === null || (value === undefined && !options.renderByDefault)) {\n    return undefined;\n  }\n  return always(value, options);\n}\n\n/**\n * Helper function that converts a slot shorthand or properties to a slot properties object\n * The main difference between this function and `slot` is that this function does not return the metadata required for a slot to be considered a properly renderable slot, it only converts the value to a slot properties object\n * @param value - the value of the slot, it can be a slot shorthand or a slot properties object\n */\nexport function resolveShorthand<Props extends UnknownSlotProps | null | undefined>(\n  value: Props | SlotShorthandValue,\n): Props {\n  if (\n    typeof value === 'string' ||\n    typeof value === 'number' ||\n    Array.isArray(value) ||\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    React.isValidElement<any>(value)\n  ) {\n    return { children: value } as Props;\n  }\n  if (value && typeof value !== 'object' && process.env.NODE_ENV !== 'production') {\n    // TODO: would be nice to have a link to slot documentation in this error message\n    // eslint-disable-next-line no-console\n    console.error(\n      [\n        `[slot.resolveShorthand]: A slot got invalid value \"${value}\" (${typeof value}).`,\n        'A valid value is a slot shorthand or slot properties object.',\n        'Slot shorthands can be strings, numbers, arrays or JSX elements',\n      ].join('\\n'),\n    );\n  }\n\n  return value;\n}\n"],"names":["React","SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","always","value","options","defaultProps","elementType","props","resolveShorthand","propsWithMetadata","children","optional","undefined","renderByDefault","Array","isArray","isValidElement","process","env","NODE_ENV","console","error","join"],"mappings":"AAOA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,2BAA2B,QAAQ,cAAc;AASpF;;;;;;;CAOC,GACD,OAAO,SAASC,OACdC,KAA6C,EAC7CC,OAA2B;IAE3B,MAAM,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAGF;IAEtC,MAAMG,QAAQC,iBAAiBL;IAE/B;;;;;GAKC,GACD,MAAMM,oBAAoB;QACxB,GAAGJ,YAAY;QACf,GAAGE,KAAK;QACR,CAACP,yBAAyB,EAAEM;IAC9B;IAEA,IAAIC,SAAS,OAAOA,MAAMG,QAAQ,KAAK,YAAY;YAEpBL;QAD7BI,iBAAiB,CAACR,4BAA4B,GAAGM,MAAMG,QAAQ;QAC/DD,kBAAkBC,QAAQ,IAAGL,gBAAAA,0BAAAA,oCAAAA,cAAcK,QAAQ;IACrD;IAEA,OAAOD;AACT;AAEA;;;;;;;;;;;;CAYC,GACD,OAAO,SAASE,SACdR,KAAoD,EACpDC,OAA2D;IAE3D,IAAID,UAAU,QAASA,UAAUS,aAAa,CAACR,QAAQS,eAAe,EAAG;QACvE,OAAOD;IACT;IACA,OAAOV,OAAOC,OAAOC;AACvB;AAEA;;;;CAIC,GACD,OAAO,SAASI,iBACdL,KAAiC;IAEjC,IACE,OAAOA,UAAU,YACjB,OAAOA,UAAU,YACjBW,MAAMC,OAAO,CAACZ,UACd,8DAA8D;IAC9DJ,MAAMiB,cAAc,CAAMb,QAC1B;QACA,OAAO;YAAEO,UAAUP;QAAM;IAC3B;IACA,IAAIA,SAAS,OAAOA,UAAU,YAAYc,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QAC/E,iFAAiF;QACjF,sCAAsC;QACtCC,QAAQC,KAAK,CACX;YACE,CAAC,mDAAmD,EAAElB,MAAM,GAAG,EAAE,OAAOA,MAAM,EAAE,CAAC;YACjF;YACA;SACD,CAACmB,IAAI,CAAC;IAEX;IAEA,OAAOnB;AACT"}
+{"version":3,"sources":["slot.ts"],"sourcesContent":["import type {\n  AsIntrinsicElement,\n  SlotComponentType,\n  SlotRenderFunction,\n  SlotShorthandValue,\n  UnknownSlotProps,\n} from './types';\nimport * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from './constants';\n\nexport type SlotOptions<Props extends UnknownSlotProps> = {\n  elementType:\n    | React.ComponentType<Props>\n    | (Props extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);\n  defaultProps?: Partial<Props>;\n};\n\n/**\n * Creates a slot from a slot shorthand or properties (`props.SLOT_NAME` or `props` itself)\n * @param value - the value of the slot, it can be a slot shorthand, a slot component or a slot properties\n * @param options - values you can pass to alter the signature of a slot, those values are:\n *\n * * `elementType` - the base element type of a slot, defaults to `'div'`\n * * `defaultProps` - similar to a React component declaration, you can provide a slot default properties to be merged with the shorthand/properties provided.\n */\nexport function always<Props extends UnknownSlotProps>(\n  value: Props | SlotShorthandValue | undefined,\n  options: SlotOptions<Props>,\n): SlotComponentType<Props> {\n  const { defaultProps, elementType } = options;\n\n  const props = resolveShorthand(value);\n\n  /**\n   * Casting is required here as SlotComponentType is a function, not an object.\n   * Although SlotComponentType has a function signature, it is still just an object.\n   * This is required to make a slot callable (JSX compatible), this is the exact same approach\n   * that is used on `@types/react` components\n   */\n  const propsWithMetadata = {\n    ...defaultProps,\n    ...props,\n    [SLOT_ELEMENT_TYPE_SYMBOL]: elementType,\n  } as SlotComponentType<Props>;\n\n  if (props && typeof props.children === 'function') {\n    propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = props.children as SlotRenderFunction<Props>;\n    propsWithMetadata.children = defaultProps?.children;\n  }\n\n  return propsWithMetadata;\n}\n\n/**\n * Creates a slot from a slot shorthand or properties (`props.SLOT_NAME` or `props` itself)\n * @param value - the value of the slot, it can be a slot shorthand, a slot component or a slot properties\n * @param options - values you can pass to alter the signature of a slot, those values are:\n *\n * * `elementType` - the base element type of a slot, defaults to `'div'`\n * * `defaultProps` - similar to a React component declaration, you can provide a slot default properties to be merged with the shorthand/properties provided\n * * `renderByDefault` - a boolean that indicates if a slot will be rendered even if it's base value is `undefined`.\n * By default if `props.SLOT_NAME` is `undefined` then `state.SLOT_NAME` becomes `undefined`\n * and nothing will be rendered, but if `renderByDefault = true` then `state.SLOT_NAME` becomes an object\n * with the values provided by `options.defaultProps` (or `{}`). This is useful for cases such as providing a default content\n * in case no shorthand is provided, like the case of the `expandIcon` slot for the `AccordionHeader`\n */\nexport function optional<Props extends UnknownSlotProps>(\n  value: Props | SlotShorthandValue | undefined | null,\n  options: { renderByDefault?: boolean } & SlotOptions<Props>,\n): SlotComponentType<Props> | undefined {\n  if (value === null || (value === undefined && !options.renderByDefault)) {\n    return undefined;\n  }\n  return always(value, options);\n}\n\n/**\n * Helper function that converts a slot shorthand or properties to a slot properties object\n * The main difference between this function and `slot` is that this function does not return the metadata required for a slot to be considered a properly renderable slot, it only converts the value to a slot properties object\n * @param value - the value of the slot, it can be a slot shorthand or a slot properties object\n */\nexport function resolveShorthand<Props extends UnknownSlotProps | null | undefined>(\n  value: Props | SlotShorthandValue,\n): Props {\n  if (\n    typeof value === 'string' ||\n    typeof value === 'number' ||\n    Array.isArray(value) ||\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    React.isValidElement<any>(value)\n  ) {\n    return { children: value } as Props;\n  }\n  if (value && typeof value !== 'object' && process.env.NODE_ENV !== 'production') {\n    // TODO: would be nice to have a link to slot documentation in this error message\n    // eslint-disable-next-line no-console\n    console.error(/** #__DE-INDENT__ */ `\n      @fluentui/react-utilities [slot.${resolveShorthand.name}]:\n      A slot got an invalid value \"${value}\" (${typeof value}).\n      A valid value for a slot is a slot shorthand or slot properties object.\n      Slot shorthands can be strings, numbers, arrays or JSX elements\n    `);\n  }\n\n  return value;\n}\n"],"names":["React","SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","always","value","options","defaultProps","elementType","props","resolveShorthand","propsWithMetadata","children","optional","undefined","renderByDefault","Array","isArray","isValidElement","process","env","NODE_ENV","console","error","name"],"mappings":"AAOA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,2BAA2B,QAAQ,cAAc;AASpF;;;;;;;CAOC,GACD,OAAO,SAASC,OACdC,KAA6C,EAC7CC,OAA2B;IAE3B,MAAM,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAGF;IAEtC,MAAMG,QAAQC,iBAAiBL;IAE/B;;;;;GAKC,GACD,MAAMM,oBAAoB;QACxB,GAAGJ,YAAY;QACf,GAAGE,KAAK;QACR,CAACP,yBAAyB,EAAEM;IAC9B;IAEA,IAAIC,SAAS,OAAOA,MAAMG,QAAQ,KAAK,YAAY;YAEpBL;QAD7BI,iBAAiB,CAACR,4BAA4B,GAAGM,MAAMG,QAAQ;QAC/DD,kBAAkBC,QAAQ,IAAGL,gBAAAA,0BAAAA,oCAAAA,cAAcK,QAAQ;IACrD;IAEA,OAAOD;AACT;AAEA;;;;;;;;;;;;CAYC,GACD,OAAO,SAASE,SACdR,KAAoD,EACpDC,OAA2D;IAE3D,IAAID,UAAU,QAASA,UAAUS,aAAa,CAACR,QAAQS,eAAe,EAAG;QACvE,OAAOD;IACT;IACA,OAAOV,OAAOC,OAAOC;AACvB;AAEA;;;;CAIC,GACD,OAAO,SAASI,iBACdL,KAAiC;IAEjC,IACE,OAAOA,UAAU,YACjB,OAAOA,UAAU,YACjBW,MAAMC,OAAO,CAACZ,UACd,8DAA8D;IAC9DJ,MAAMiB,cAAc,CAAMb,QAC1B;QACA,OAAO;YAAEO,UAAUP;QAAM;IAC3B;IACA,IAAIA,SAAS,OAAOA,UAAU,YAAYc,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QAC/E,iFAAiF;QACjF,sCAAsC;QACtCC,QAAQC,KAAK,CAAuB,CAAC,gCACH,EAAEb,iBAAiBc,IAAI,CAAC;6BAC3B,EAAEnB,MAAM,GAAG,EAAE,OAAOA,MAAM;;+DAGzD,CAAC;IACH;IAEA,OAAOA;AACT"}

package/lib/hooks/useControllableState.js

@@ -64,14 +64,11 @@ function isInitializer(value) {
                 const controlWarning = isControlled ? 'a controlled value to be uncontrolled' : 'an uncontrolled value to be controlled';
                 const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';
                 // eslint-disable-next-line no-console
-                console.error([
-                    // Default react error
-                    '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(' '));
+                console.error(`@fluentui/react-utilities [${useControllableState.name}]:
+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}`);
             }
         }, [
             isControlled,

package/lib/hooks/useControllableState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["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`](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\n  // Heads up!\n  // This part is specific for controlled mode and mocks behavior of React dispatcher function.\n\n  const stateValueRef = React.useRef<State | undefined>(options.state);\n\n  React.useEffect(() => {\n    stateValueRef.current = options.state;\n  }, [options.state]);\n\n  const setControlledState = React.useCallback((newState: React.SetStateAction<State>) => {\n    if (isFactoryDispatch(newState)) {\n      newState(stateValueRef.current as State);\n    }\n  }, []);\n\n  return useIsControlled(options.state) ? [options.state, setControlledState] : [internalState, setInternalState];\n};\n\nfunction isInitializer<State>(value: State | (() => State)): value is () => State {\n  return typeof value === 'function';\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"],"names":["React","isFactoryDispatch","newState","useControllableState","options","internalState","setInternalState","useState","defaultState","undefined","initialState","isInitializer","stateValueRef","useRef","state","useEffect","current","setControlledState","useCallback","useIsControlled","value","controlledValue","isControlled","process","env","NODE_ENV","error","Error","controlWarning","undefinedWarning","console","stack","join"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAqB/B,SAASC,kBAAyBC,QAAqC;IACrE,OAAO,OAAOA,aAAa;AAC7B;AAEA;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,uBAAuB,CAClCC;IAEA,MAAM,CAACC,eAAeC,iBAAiB,GAAGN,MAAMO,QAAQ,CAAQ;QAC9D,IAAIH,QAAQI,YAAY,KAAKC,WAAW;YACtC,OAAOL,QAAQM,YAAY;QAC7B;QACA,OAAOC,cAAcP,QAAQI,YAAY,IAAIJ,QAAQI,YAAY,KAAKJ,QAAQI,YAAY;IAC5F;IAEA,YAAY;IACZ,6FAA6F;IAE7F,MAAMI,gBAAgBZ,MAAMa,MAAM,CAAoBT,QAAQU,KAAK;IAEnEd,MAAMe,SAAS,CAAC;QACdH,cAAcI,OAAO,GAAGZ,QAAQU,KAAK;IACvC,GAAG;QAACV,QAAQU,KAAK;KAAC;IAElB,MAAMG,qBAAqBjB,MAAMkB,WAAW,CAAC,CAAChB;QAC5C,IAAID,kBAAkBC,WAAW;YAC/BA,SAASU,cAAcI,OAAO;QAChC;IACF,GAAG,EAAE;IAEL,OAAOG,gBAAgBf,QAAQU,KAAK,IAAI;QAACV,QAAQU,KAAK;QAAEG;KAAmB,GAAG;QAACZ;QAAeC;KAAiB;AACjH,EAAE;AAEF,SAASK,cAAqBS,KAA4B;IACxD,OAAO,OAAOA,UAAU;AAC1B;AAEA;;;;CAIC,GACD,MAAMD,kBAAkB,CAAIE;IAC1B,MAAM,CAACC,aAAa,GAAGtB,MAAMO,QAAQ,CAAU,IAAMc,oBAAoBZ;IAEzE,IAAIc,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,wFAAwF;QACxF,sDAAsD;QACtDzB,MAAMe,SAAS,CAAC;YACd,IAAIO,iBAAkBD,CAAAA,oBAAoBZ,SAAQ,GAAI;gBACpD,MAAMiB,QAAQ,IAAIC;gBAElB,MAAMC,iBAAiBN,eACnB,0CACA;gBAEJ,MAAMO,mBAAmBP,eAAe,4BAA4B;gBAEpE,sCAAsC;gBACtCQ,QAAQJ,KAAK,CACX;oBACE,sBAAsB;oBACtB,6BAA6BE,iBAAiB;oBAC9C,mBAAmBC,mBAAmB;oBACtC;oBACA;oBACAH,MAAMK,KAAK;iBACZ,CAACC,IAAI,CAAC;YAEX;QACF,GAAG;YAACV;YAAcD;SAAgB;IACpC;IAEA,OAAOC;AACT"}
+{"version":3,"sources":["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`](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\n  // Heads up!\n  // This part is specific for controlled mode and mocks behavior of React dispatcher function.\n\n  const stateValueRef = React.useRef<State | undefined>(options.state);\n\n  React.useEffect(() => {\n    stateValueRef.current = options.state;\n  }, [options.state]);\n\n  const setControlledState = React.useCallback((newState: React.SetStateAction<State>) => {\n    if (isFactoryDispatch(newState)) {\n      newState(stateValueRef.current as State);\n    }\n  }, []);\n\n  return useIsControlled(options.state) ? [options.state, setControlledState] : [internalState, setInternalState];\n};\n\nfunction isInitializer<State>(value: State | (() => State)): value is () => State {\n  return typeof value === 'function';\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(/** #__DE-INDENT__ */ `\n          @fluentui/react-utilities [${useControllableState.name}]:\n          A component is changing ${controlWarning}. This is likely caused by the value 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        `);\n      }\n    }, [isControlled, controlledValue]);\n  }\n\n  return isControlled;\n};\n"],"names":["React","isFactoryDispatch","newState","useControllableState","options","internalState","setInternalState","useState","defaultState","undefined","initialState","isInitializer","stateValueRef","useRef","state","useEffect","current","setControlledState","useCallback","useIsControlled","value","controlledValue","isControlled","process","env","NODE_ENV","error","Error","controlWarning","undefinedWarning","console","name","stack"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAqB/B,SAASC,kBAAyBC,QAAqC;IACrE,OAAO,OAAOA,aAAa;AAC7B;AAEA;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,uBAAuB,CAClCC;IAEA,MAAM,CAACC,eAAeC,iBAAiB,GAAGN,MAAMO,QAAQ,CAAQ;QAC9D,IAAIH,QAAQI,YAAY,KAAKC,WAAW;YACtC,OAAOL,QAAQM,YAAY;QAC7B;QACA,OAAOC,cAAcP,QAAQI,YAAY,IAAIJ,QAAQI,YAAY,KAAKJ,QAAQI,YAAY;IAC5F;IAEA,YAAY;IACZ,6FAA6F;IAE7F,MAAMI,gBAAgBZ,MAAMa,MAAM,CAAoBT,QAAQU,KAAK;IAEnEd,MAAMe,SAAS,CAAC;QACdH,cAAcI,OAAO,GAAGZ,QAAQU,KAAK;IACvC,GAAG;QAACV,QAAQU,KAAK;KAAC;IAElB,MAAMG,qBAAqBjB,MAAMkB,WAAW,CAAC,CAAChB;QAC5C,IAAID,kBAAkBC,WAAW;YAC/BA,SAASU,cAAcI,OAAO;QAChC;IACF,GAAG,EAAE;IAEL,OAAOG,gBAAgBf,QAAQU,KAAK,IAAI;QAACV,QAAQU,KAAK;QAAEG;KAAmB,GAAG;QAACZ;QAAeC;KAAiB;AACjH,EAAE;AAEF,SAASK,cAAqBS,KAA4B;IACxD,OAAO,OAAOA,UAAU;AAC1B;AAEA;;;;CAIC,GACD,MAAMD,kBAAkB,CAAIE;IAC1B,MAAM,CAACC,aAAa,GAAGtB,MAAMO,QAAQ,CAAU,IAAMc,oBAAoBZ;IAEzE,IAAIc,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,wFAAwF;QACxF,sDAAsD;QACtDzB,MAAMe,SAAS,CAAC;YACd,IAAIO,iBAAkBD,CAAAA,oBAAoBZ,SAAQ,GAAI;gBACpD,MAAMiB,QAAQ,IAAIC;gBAElB,MAAMC,iBAAiBN,eACnB,0CACA;gBAEJ,MAAMO,mBAAmBP,eAAe,4BAA4B;gBAEpE,sCAAsC;gBACtCQ,QAAQJ,KAAK,CAAuB,CAAC,2BACR,EAAEvB,qBAAqB4B,IAAI,CAAC;wBAC/B,EAAEH,eAAe,mDAAmD,EAAEC,iBAAiB;;;AAG/G,EAAEH,MAAMM,KAAK,CAAC,AAChB,CAAC;YACH;QACF,GAAG;YAACV;YAAcD;SAAgB;IACpC;IAEA,OAAOC;AACT"}

package/lib/ssr/SSRContext.js

@@ -38,13 +38,11 @@ export const SSRContext = /*#__PURE__*/ React.createContext(undefined);
     if (process.env.NODE_ENV !== 'production') {
         if (!isInSSRContext && !canUseDOM()) {
             // eslint-disable-next-line no-console
-            console.error([
-                '@fluentui/react-components: ',
-                'When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are ' + 'generated between the client and server.',
-                '\n',
-                '\n',
-                'Check documentation at https://aka.ms/fluentui-ssr'
-            ].join(''));
+            console.error(`@fluentui/react-components [${useIsSSR.name}]:
+When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.
+
+
+Check documentation at https://aka.ms/fluentui-ssr.`);
         }
     }
     // If on the client, and the component was initially server rendered, then schedule a layout effect to update the

package/lib/ssr/SSRContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SSRContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from './canUseDOM';\n\n/**\n * To support SSR, the auto incrementing id counter is stored in a context. This allows it to be reset on every request\n * to ensure the client and server are consistent.\n *\n * @internal\n */\nexport type SSRContextValue = {\n  current: number;\n};\n\n/**\n * Default context value to use in case there is no SSRProvider. This is fine for client-only apps.\n *\n * @internal\n */\nexport const defaultSSRContextValue: SSRContextValue = {\n  current: 0,\n};\n\nexport const SSRContext = React.createContext<SSRContextValue | undefined>(undefined) as React.Context<SSRContextValue>;\n\n/**\n * @internal\n */\nexport function useSSRContext(): SSRContextValue {\n  return React.useContext(SSRContext) ?? defaultSSRContextValue;\n}\n\n/**\n * When using SSR with Fluent UI, applications must be wrapped in an SSRProvider. This ensures that auto generated ids\n * are consistent between the client and server.\n *\n * @public\n */\nexport const SSRProvider: React.FC<{ children: React.ReactNode }> = props => {\n  const [value] = React.useState<SSRContextValue>(() => ({ current: 0 }));\n\n  return <SSRContext.Provider value={value}>{props.children}</SSRContext.Provider>;\n};\n\n/**\n * Returns whether the component is currently being server side rendered or hydrated on the client. Can be used to delay\n * browser-specific rendering until after hydration. May cause re-renders on a client when is used within SSRProvider.\n */\nexport function useIsSSR(): boolean {\n  const isInSSRContext = useSSRContext() !== defaultSSRContextValue;\n  const [isSSR, setIsSSR] = React.useState(isInSSRContext);\n\n  // If we are rendering in a non-DOM environment, and there's no SSRProvider, provide a warning to hint to the\n  // developer to add one.\n  if (process.env.NODE_ENV !== 'production') {\n    if (!isInSSRContext && !canUseDOM()) {\n      // eslint-disable-next-line no-console\n      console.error(\n        [\n          '@fluentui/react-components: ',\n          'When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are ' +\n            'generated between the client and server.',\n          '\\n',\n          '\\n',\n          'Check documentation at https://aka.ms/fluentui-ssr',\n        ].join(''),\n      );\n    }\n  }\n\n  // If on the client, and the component was initially server rendered, then schedule a layout effect to update the\n  // component after hydration.\n  if (canUseDOM() && isInSSRContext) {\n    // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after\n    // mounting.\n    // eslint-disable-next-line\n    React.useLayoutEffect(() => {\n      setIsSSR(false);\n    }, []);\n  }\n\n  return isSSR;\n}\n"],"names":["React","canUseDOM","defaultSSRContextValue","current","SSRContext","createContext","undefined","useSSRContext","useContext","SSRProvider","props","value","useState","Provider","children","useIsSSR","isInSSRContext","isSSR","setIsSSR","process","env","NODE_ENV","console","error","join","useLayoutEffect"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,SAAS,QAAQ,cAAc;AAYxC;;;;CAIC,GACD,OAAO,MAAMC,yBAA0C;IACrDC,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,2BAAaJ,MAAMK,aAAa,CAA8BC,WAA6C;AAExH;;CAEC,GACD,OAAO,SAASC;QACPP;IAAP,OAAOA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACJ,yBAAjBJ,+BAAAA,oBAAgCE;AACzC;AAEA;;;;;CAKC,GACD,OAAO,MAAMO,cAAuDC,CAAAA;IAClE,MAAM,CAACC,MAAM,GAAGX,MAAMY,QAAQ,CAAkB,IAAO,CAAA;YAAET,SAAS;QAAE,CAAA;IAEpE,qBAAO,oBAACC,WAAWS,QAAQ;QAACF,OAAOA;OAAQD,MAAMI,QAAQ;AAC3D,EAAE;AAEF;;;CAGC,GACD,OAAO,SAASC;IACd,MAAMC,iBAAiBT,oBAAoBL;IAC3C,MAAM,CAACe,OAAOC,SAAS,GAAGlB,MAAMY,QAAQ,CAACI;IAEzC,6GAA6G;IAC7G,wBAAwB;IACxB,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,CAACL,kBAAkB,CAACf,aAAa;YACnC,sCAAsC;YACtCqB,QAAQC,KAAK,CACX;gBACE;gBACA,4GACE;gBACF;gBACA;gBACA;aACD,CAACC,IAAI,CAAC;QAEX;IACF;IAEA,iHAAiH;IACjH,6BAA6B;IAC7B,IAAIvB,eAAee,gBAAgB;QACjC,iHAAiH;QACjH,YAAY;QACZ,2BAA2B;QAC3BhB,MAAMyB,eAAe,CAAC;YACpBP,SAAS;QACX,GAAG,EAAE;IACP;IAEA,OAAOD;AACT"}
+{"version":3,"sources":["SSRContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from './canUseDOM';\n\n/**\n * To support SSR, the auto incrementing id counter is stored in a context. This allows it to be reset on every request\n * to ensure the client and server are consistent.\n *\n * @internal\n */\nexport type SSRContextValue = {\n  current: number;\n};\n\n/**\n * Default context value to use in case there is no SSRProvider. This is fine for client-only apps.\n *\n * @internal\n */\nexport const defaultSSRContextValue: SSRContextValue = {\n  current: 0,\n};\n\nexport const SSRContext = React.createContext<SSRContextValue | undefined>(undefined) as React.Context<SSRContextValue>;\n\n/**\n * @internal\n */\nexport function useSSRContext(): SSRContextValue {\n  return React.useContext(SSRContext) ?? defaultSSRContextValue;\n}\n\n/**\n * When using SSR with Fluent UI, applications must be wrapped in an SSRProvider. This ensures that auto generated ids\n * are consistent between the client and server.\n *\n * @public\n */\nexport const SSRProvider: React.FC<{ children: React.ReactNode }> = props => {\n  const [value] = React.useState<SSRContextValue>(() => ({ current: 0 }));\n\n  return <SSRContext.Provider value={value}>{props.children}</SSRContext.Provider>;\n};\n\n/**\n * Returns whether the component is currently being server side rendered or hydrated on the client. Can be used to delay\n * browser-specific rendering until after hydration. May cause re-renders on a client when is used within SSRProvider.\n */\nexport function useIsSSR(): boolean {\n  const isInSSRContext = useSSRContext() !== defaultSSRContextValue;\n  const [isSSR, setIsSSR] = React.useState(isInSSRContext);\n\n  // If we are rendering in a non-DOM environment, and there's no SSRProvider, provide a warning to hint to the\n  // developer to add one.\n  if (process.env.NODE_ENV !== 'production') {\n    if (!isInSSRContext && !canUseDOM()) {\n      // eslint-disable-next-line no-console\n      console.error(/** #__DE-INDENT__ */ `\n        @fluentui/react-components [${useIsSSR.name}]:\n        When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.\n\n\n        Check documentation at https://aka.ms/fluentui-ssr.\n      `);\n    }\n  }\n\n  // If on the client, and the component was initially server rendered, then schedule a layout effect to update the\n  // component after hydration.\n  if (canUseDOM() && isInSSRContext) {\n    // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after\n    // mounting.\n    // eslint-disable-next-line\n    React.useLayoutEffect(() => {\n      setIsSSR(false);\n    }, []);\n  }\n\n  return isSSR;\n}\n"],"names":["React","canUseDOM","defaultSSRContextValue","current","SSRContext","createContext","undefined","useSSRContext","useContext","SSRProvider","props","value","useState","Provider","children","useIsSSR","isInSSRContext","isSSR","setIsSSR","process","env","NODE_ENV","console","error","name","useLayoutEffect"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,SAAS,QAAQ,cAAc;AAYxC;;;;CAIC,GACD,OAAO,MAAMC,yBAA0C;IACrDC,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,2BAAaJ,MAAMK,aAAa,CAA8BC,WAA6C;AAExH;;CAEC,GACD,OAAO,SAASC;QACPP;IAAP,OAAOA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACJ,yBAAjBJ,+BAAAA,oBAAgCE;AACzC;AAEA;;;;;CAKC,GACD,OAAO,MAAMO,cAAuDC,CAAAA;IAClE,MAAM,CAACC,MAAM,GAAGX,MAAMY,QAAQ,CAAkB,IAAO,CAAA;YAAET,SAAS;QAAE,CAAA;IAEpE,qBAAO,oBAACC,WAAWS,QAAQ;QAACF,OAAOA;OAAQD,MAAMI,QAAQ;AAC3D,EAAE;AAEF;;;CAGC,GACD,OAAO,SAASC;IACd,MAAMC,iBAAiBT,oBAAoBL;IAC3C,MAAM,CAACe,OAAOC,SAAS,GAAGlB,MAAMY,QAAQ,CAACI;IAEzC,6GAA6G;IAC7G,wBAAwB;IACxB,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,CAACL,kBAAkB,CAACf,aAAa;YACnC,sCAAsC;YACtCqB,QAAQC,KAAK,CAAuB,CAAC,4BACP,EAAER,SAASS,IAAI,CAAC;;;;mDAK9C,CAAC;QACH;IACF;IAEA,iHAAiH;IACjH,6BAA6B;IAC7B,IAAIvB,eAAee,gBAAgB;QACjC,iHAAiH;QACjH,YAAY;QACZ,2BAA2B;QAC3BhB,MAAMyB,eAAe,CAAC;YACpBP,SAAS;QACX,GAAG,EAAE;IACP;IAEA,OAAOD;AACT"}

package/lib/utils/getReactCallbackName.js

@@ -17,9 +17,7 @@ import * as React from 'react';
     }
     if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
-        console.error([
-            'Passed React.SyntheticEvent does not contain ".dispatchConfig" or "._reactName".',
-            'This should not happen, please report it to https://github.com/microsoft/fluentui'
-        ]);
+        console.error(`@fluentui/react-utilities [${getReactCallbackName.name}]:
+Passed React.SyntheticEvent does not contain ".dispatchConfig" or "._reactName". This should not happen, please report it to https://github.com/microsoft/fluentui.`);
     }
 }

package/lib/utils/getReactCallbackName.js.map

@@ -1 +1 @@
-{"version":3,"sources":["getReactCallbackName.ts"],"sourcesContent":["import * as React from 'react';\n\ninterface ReactSyntheticEvent extends React.SyntheticEvent<unknown> {\n  // React 17/18\n  // See https://github.com/facebook/react/pull/19236\n  _reactName?: string;\n\n  // React 16\n  dispatchConfig?: {\n    registrationName: string;\n    phasedRegistrationNames: {\n      bubbled: string;\n      captured: string;\n    };\n  };\n}\n\ntype NonUndefined<A> = A extends undefined ? never : A;\ntype FunctionKeys<T extends object> = {\n  [K in keyof T]-?: NonUndefined<T[K]> extends Function ? K : never;\n}[keyof T];\n\nexport type ReactCallbackName = FunctionKeys<React.DOMAttributes<unknown>>;\n\n/**\n * React.SyntheticEvent contains name of a callback that should be fired, this function returns it.\n *\n * Ideally, it should also distinguish regular and \"capture\" callbacks, but it's possible only with React 17 as\n * \".eventPhase\" there has proper value, see https://github.com/facebook/react/pull/19244. In React 16 all events\n * are handled in bubble phase.\n */\nexport function getReactCallbackName(event: ReactSyntheticEvent): ReactCallbackName | undefined {\n  if (event._reactName) {\n    return event._reactName as ReactCallbackName;\n  }\n\n  if (event.dispatchConfig) {\n    if (event.dispatchConfig.registrationName) {\n      return event.dispatchConfig.registrationName as ReactCallbackName;\n    }\n\n    return event.dispatchConfig.phasedRegistrationNames.bubbled as ReactCallbackName;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.error([\n      'Passed React.SyntheticEvent does not contain \".dispatchConfig\" or \"._reactName\".',\n      'This should not happen, please report it to https://github.com/microsoft/fluentui',\n    ]);\n  }\n}\n"],"names":["React","getReactCallbackName","event","_reactName","dispatchConfig","registrationName","phasedRegistrationNames","bubbled","process","env","NODE_ENV","console","error"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAwB/B;;;;;;CAMC,GACD,OAAO,SAASC,qBAAqBC,KAA0B;IAC7D,IAAIA,MAAMC,UAAU,EAAE;QACpB,OAAOD,MAAMC,UAAU;IACzB;IAEA,IAAID,MAAME,cAAc,EAAE;QACxB,IAAIF,MAAME,cAAc,CAACC,gBAAgB,EAAE;YACzC,OAAOH,MAAME,cAAc,CAACC,gBAAgB;QAC9C;QAEA,OAAOH,MAAME,cAAc,CAACE,uBAAuB,CAACC,OAAO;IAC7D;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sCAAsC;QACtCC,QAAQC,KAAK,CAAC;YACZ;YACA;SACD;IACH;AACF"}
+{"version":3,"sources":["getReactCallbackName.ts"],"sourcesContent":["import * as React from 'react';\n\ninterface ReactSyntheticEvent extends React.SyntheticEvent<unknown> {\n  // React 17/18\n  // See https://github.com/facebook/react/pull/19236\n  _reactName?: string;\n\n  // React 16\n  dispatchConfig?: {\n    registrationName: string;\n    phasedRegistrationNames: {\n      bubbled: string;\n      captured: string;\n    };\n  };\n}\n\ntype NonUndefined<A> = A extends undefined ? never : A;\ntype FunctionKeys<T extends object> = {\n  [K in keyof T]-?: NonUndefined<T[K]> extends Function ? K : never;\n}[keyof T];\n\nexport type ReactCallbackName = FunctionKeys<React.DOMAttributes<unknown>>;\n\n/**\n * React.SyntheticEvent contains name of a callback that should be fired, this function returns it.\n *\n * Ideally, it should also distinguish regular and \"capture\" callbacks, but it's possible only with React 17 as\n * \".eventPhase\" there has proper value, see https://github.com/facebook/react/pull/19244. In React 16 all events\n * are handled in bubble phase.\n */\nexport function getReactCallbackName(event: ReactSyntheticEvent): ReactCallbackName | undefined {\n  if (event._reactName) {\n    return event._reactName as ReactCallbackName;\n  }\n\n  if (event.dispatchConfig) {\n    if (event.dispatchConfig.registrationName) {\n      return event.dispatchConfig.registrationName as ReactCallbackName;\n    }\n\n    return event.dispatchConfig.phasedRegistrationNames.bubbled as ReactCallbackName;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.error(/** #__DE-INDENT__ */ `\n      @fluentui/react-utilities [${getReactCallbackName.name}]:\n      Passed React.SyntheticEvent does not contain \".dispatchConfig\" or \"._reactName\". This should not happen, please report it to https://github.com/microsoft/fluentui.\n    `);\n  }\n}\n"],"names":["React","getReactCallbackName","event","_reactName","dispatchConfig","registrationName","phasedRegistrationNames","bubbled","process","env","NODE_ENV","console","error","name"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAwB/B;;;;;;CAMC,GACD,OAAO,SAASC,qBAAqBC,KAA0B;IAC7D,IAAIA,MAAMC,UAAU,EAAE;QACpB,OAAOD,MAAMC,UAAU;IACzB;IAEA,IAAID,MAAME,cAAc,EAAE;QACxB,IAAIF,MAAME,cAAc,CAACC,gBAAgB,EAAE;YACzC,OAAOH,MAAME,cAAc,CAACC,gBAAgB;QAC9C;QAEA,OAAOH,MAAME,cAAc,CAACE,uBAAuB,CAACC,OAAO;IAC7D;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sCAAsC;QACtCC,QAAQC,KAAK,CAAuB,CAAC,2BACR,EAAEX,qBAAqBY,IAAI,CAAC;mKAEzD,CAAC;IACH;AACF"}

package/lib-commonjs/compose/assertSlots.js

@@ -32,7 +32,9 @@ function assertSlots(state) {
                     elementType: typedState.components[slotName]
                 });
                 // eslint-disable-next-line no-console
-                console.warn(`${assertSlots.name} warning: state.${slotName} is not a slot.\n` + `Be sure to create slots properly by using 'slot.always' or 'slot.optional'.`);
+                console.warn(`@fluentui/react-utilities [${assertSlots.name}]:
+"state.${slotName}" is not a slot!
+Be sure to create slots properly by using "slot.always" or "slot.optional".`);
             } else {
                 // This means a slot is being declared by using resolveShorthand on the state hook,
                 // but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type
@@ -40,7 +42,10 @@ function assertSlots(state) {
                 if (elementType !== typedState.components[slotName]) {
                     slotElement[_constants.SLOT_ELEMENT_TYPE_SYMBOL] = typedState.components[slotName];
                     // eslint-disable-next-line no-console
-                    console.warn(`${assertSlots.name} warning: state.${slotName} element type differs from state.components.${slotName}, ${elementType} !== ${typedState.components[slotName]}. \n` + `Be sure to create slots properly by using 'slot.always' or 'slot.optional' with the correct elementType`);
+                    console.warn(`@fluentui/react-utilities [${assertSlots.name}]:
+"state.${slotName}" element type differs from "state.components.${slotName}",
+${elementType} !== ${typedState.components[slotName]}.
+Be sure to create slots properly by using "slot.always" or "slot.optional" with the correct elementType.`);
                 }
             }
         }

package/lib-commonjs/compose/assertSlots.js.map

@@ -1 +1 @@
-{"version":3,"sources":["assertSlots.js"],"sourcesContent":["import * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL } from './constants';\nimport { isSlot } from './isSlot';\nimport { slot } from './index';\n/**\n * @internal\n * Assertion method to ensure state slots properties are properly declared.\n * A properly declared slot must be declared by using the `slot` method.\n *\n * @example\n * ```tsx\n * export const renderInput_unstable = (state: InputState) => {\n    assertSlots<InputSlots>(state);\n    return (\n      <state.root>\n        {state.contentBefore && <state.contentBefore />}\n        <state.input />\n        {state.contentAfter && <state.contentAfter />}\n      </state.root>\n    );\n  };\n * ```\n */ export function assertSlots(state) {\n    /**\n   * This verification is not necessary in production\n   * as we're verifying static properties that will not change between environments\n   */ if (process.env.NODE_ENV !== 'production') {\n        const typedState = state;\n        for (const slotName of Object.keys(typedState.components)){\n            const slotElement = typedState[slotName];\n            if (slotElement === undefined) {\n                continue;\n            }\n            // this means a slot is being declared without using, slot.always or slot.optional or even resolveShorthand on the state hook,\n            // but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type\n            // FIXME: this slot will still fail to support child render function scenario\n            if (!isSlot(slotElement)) {\n                typedState[slotName] = slot.always(slotElement, {\n                    elementType: typedState.components[slotName]\n                });\n                // eslint-disable-next-line no-console\n                console.warn(`${assertSlots.name} warning: state.${slotName} is not a slot.\\n` + `Be sure to create slots properly by using 'slot.always' or 'slot.optional'.`);\n            } else {\n                // This means a slot is being declared by using resolveShorthand on the state hook,\n                // but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type\n                const { [SLOT_ELEMENT_TYPE_SYMBOL]: elementType } = slotElement;\n                if (elementType !== typedState.components[slotName]) {\n                    slotElement[SLOT_ELEMENT_TYPE_SYMBOL] = typedState.components[slotName];\n                    // eslint-disable-next-line no-console\n                    console.warn(`${assertSlots.name} warning: state.${slotName} element type differs from state.components.${slotName}, ${elementType} !== ${typedState.components[slotName]}. \\n` + `Be sure to create slots properly by using 'slot.always' or 'slot.optional' with the correct elementType`);\n                }\n            }\n        }\n    }\n}\n"],"names":["assertSlots","state","process","env","NODE_ENV","typedState","slotName","Object","keys","components","slotElement","undefined","isSlot","slot","always","elementType","console","warn","name","SLOT_ELEMENT_TYPE_SYMBOL"],"mappings":";;;;+BAsBoBA;;;eAAAA;;;;iEAtBG;2BACkB;wBAClB;uBACF;AAmBV,SAASA,YAAYC,KAAK;IACjC;;;GAGD,GAAG,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,MAAMC,aAAaJ;QACnB,KAAK,MAAMK,YAAYC,OAAOC,IAAI,CAACH,WAAWI,UAAU,EAAE;YACtD,MAAMC,cAAcL,UAAU,CAACC,SAAS;YACxC,IAAII,gBAAgBC,WAAW;gBAC3B;YACJ;YACA,8HAA8H;YAC9H,4JAA4J;YAC5J,6EAA6E;YAC7E,IAAI,CAACC,IAAAA,cAAM,EAACF,cAAc;gBACtBL,UAAU,CAACC,SAAS,GAAGO,WAAI,CAACC,MAAM,CAACJ,aAAa;oBAC5CK,aAAaV,WAAWI,UAAU,CAACH,SAAS;gBAChD;gBACA,sCAAsC;gBACtCU,QAAQC,IAAI,CAAC,CAAC,EAAEjB,YAAYkB,IAAI,CAAC,gBAAgB,EAAEZ,SAAS,iBAAiB,CAAC,GAAG,CAAC,2EAA2E,CAAC;YAClK,OAAO;gBACH,mFAAmF;gBACnF,4JAA4J;gBAC5J,MAAM,EAAE,CAACa,mCAAwB,CAAC,EAAEJ,WAAW,EAAE,GAAGL;gBACpD,IAAIK,gBAAgBV,WAAWI,UAAU,CAACH,SAAS,EAAE;oBACjDI,WAAW,CAACS,mCAAwB,CAAC,GAAGd,WAAWI,UAAU,CAACH,SAAS;oBACvE,sCAAsC;oBACtCU,QAAQC,IAAI,CAAC,CAAC,EAAEjB,YAAYkB,IAAI,CAAC,gBAAgB,EAAEZ,SAAS,4CAA4C,EAAEA,SAAS,EAAE,EAAES,YAAY,KAAK,EAAEV,WAAWI,UAAU,CAACH,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,uGAAuG,CAAC;gBAC/R;YACJ;QACJ;IACJ;AACJ"}
+{"version":3,"sources":["assertSlots.js"],"sourcesContent":["import * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL } from './constants';\nimport { isSlot } from './isSlot';\nimport { slot } from './index';\n/**\n * @internal\n * Assertion method to ensure state slots properties are properly declared.\n * A properly declared slot must be declared by using the `slot` method.\n *\n * @example\n * ```tsx\n * export const renderInput_unstable = (state: InputState) => {\n    assertSlots<InputSlots>(state);\n    return (\n      <state.root>\n        {state.contentBefore && <state.contentBefore />}\n        <state.input />\n        {state.contentAfter && <state.contentAfter />}\n      </state.root>\n    );\n  };\n * ```\n */ export function assertSlots(state) {\n    /**\n   * This verification is not necessary in production\n   * as we're verifying static properties that will not change between environments\n   */ if (process.env.NODE_ENV !== 'production') {\n        const typedState = state;\n        for (const slotName of Object.keys(typedState.components)){\n            const slotElement = typedState[slotName];\n            if (slotElement === undefined) {\n                continue;\n            }\n            // this means a slot is being declared without using, slot.always or slot.optional or even resolveShorthand on the state hook,\n            // but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type\n            // FIXME: this slot will still fail to support child render function scenario\n            if (!isSlot(slotElement)) {\n                typedState[slotName] = slot.always(slotElement, {\n                    elementType: typedState.components[slotName]\n                });\n                // eslint-disable-next-line no-console\n                console.warn(`@fluentui/react-utilities [${assertSlots.name}]:\n\"state.${slotName}\" is not a slot!\nBe sure to create slots properly by using \"slot.always\" or \"slot.optional\".`);\n            } else {\n                // This means a slot is being declared by using resolveShorthand on the state hook,\n                // but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type\n                const { [SLOT_ELEMENT_TYPE_SYMBOL]: elementType } = slotElement;\n                if (elementType !== typedState.components[slotName]) {\n                    slotElement[SLOT_ELEMENT_TYPE_SYMBOL] = typedState.components[slotName];\n                    // eslint-disable-next-line no-console\n                    console.warn(`@fluentui/react-utilities [${assertSlots.name}]:\n\"state.${slotName}\" element type differs from \"state.components.${slotName}\",\n${elementType} !== ${typedState.components[slotName]}.\nBe sure to create slots properly by using \"slot.always\" or \"slot.optional\" with the correct elementType.`);\n                }\n            }\n        }\n    }\n}\n"],"names":["assertSlots","state","process","env","NODE_ENV","typedState","slotName","Object","keys","components","slotElement","undefined","isSlot","slot","always","elementType","console","warn","name","SLOT_ELEMENT_TYPE_SYMBOL"],"mappings":";;;;+BAsBoBA;;;eAAAA;;;;iEAtBG;2BACkB;wBAClB;uBACF;AAmBV,SAASA,YAAYC,KAAK;IACjC;;;GAGD,GAAG,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,MAAMC,aAAaJ;QACnB,KAAK,MAAMK,YAAYC,OAAOC,IAAI,CAACH,WAAWI,UAAU,EAAE;YACtD,MAAMC,cAAcL,UAAU,CAACC,SAAS;YACxC,IAAII,gBAAgBC,WAAW;gBAC3B;YACJ;YACA,8HAA8H;YAC9H,4JAA4J;YAC5J,6EAA6E;YAC7E,IAAI,CAACC,IAAAA,cAAM,EAACF,cAAc;gBACtBL,UAAU,CAACC,SAAS,GAAGO,WAAI,CAACC,MAAM,CAACJ,aAAa;oBAC5CK,aAAaV,WAAWI,UAAU,CAACH,SAAS;gBAChD;gBACA,sCAAsC;gBACtCU,QAAQC,IAAI,CAAC,CAAC,2BAA2B,EAAEjB,YAAYkB,IAAI,CAAC;OACrE,EAAEZ,SAAS;2EACyD,CAAC;YAChE,OAAO;gBACH,mFAAmF;gBACnF,4JAA4J;gBAC5J,MAAM,EAAE,CAACa,mCAAwB,CAAC,EAAEJ,WAAW,EAAE,GAAGL;gBACpD,IAAIK,gBAAgBV,WAAWI,UAAU,CAACH,SAAS,EAAE;oBACjDI,WAAW,CAACS,mCAAwB,CAAC,GAAGd,WAAWI,UAAU,CAACH,SAAS;oBACvE,sCAAsC;oBACtCU,QAAQC,IAAI,CAAC,CAAC,2BAA2B,EAAEjB,YAAYkB,IAAI,CAAC;OACzE,EAAEZ,SAAS,8CAA8C,EAAEA,SAAS;AAC3E,EAAES,YAAY,KAAK,EAAEV,WAAWI,UAAU,CAACH,SAAS,CAAC;wGACmD,CAAC;gBACzF;YACJ;QACJ;IACJ;AACJ"}

package/lib-commonjs/compose/slot.js

@@ -58,11 +58,10 @@ function resolveShorthand(value) {
     if (value && typeof value !== 'object' && process.env.NODE_ENV !== 'production') {
         // TODO: would be nice to have a link to slot documentation in this error message
         // eslint-disable-next-line no-console
-        console.error([
-            `[slot.resolveShorthand]: A slot got invalid value "${value}" (${typeof value}).`,
-            'A valid value is a slot shorthand or slot properties object.',
-            'Slot shorthands can be strings, numbers, arrays or JSX elements'
-        ].join('\n'));
+        console.error(`@fluentui/react-utilities [slot.${resolveShorthand.name}]:
+A slot got an invalid value "${value}" (${typeof value}).
+A valid value for a slot is a slot shorthand or slot properties object.
+Slot shorthands can be strings, numbers, arrays or JSX elements`);
     }
     return value;
 }

package/lib-commonjs/compose/slot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["slot.js"],"sourcesContent":["import * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from './constants';\n/**\n * Creates a slot from a slot shorthand or properties (`props.SLOT_NAME` or `props` itself)\n * @param value - the value of the slot, it can be a slot shorthand, a slot component or a slot properties\n * @param options - values you can pass to alter the signature of a slot, those values are:\n *\n * * `elementType` - the base element type of a slot, defaults to `'div'`\n * * `defaultProps` - similar to a React component declaration, you can provide a slot default properties to be merged with the shorthand/properties provided.\n */ export function always(value, options) {\n    const { defaultProps, elementType } = options;\n    const props = resolveShorthand(value);\n    /**\n   * Casting is required here as SlotComponentType is a function, not an object.\n   * Although SlotComponentType has a function signature, it is still just an object.\n   * This is required to make a slot callable (JSX compatible), this is the exact same approach\n   * that is used on `@types/react` components\n   */ const propsWithMetadata = {\n        ...defaultProps,\n        ...props,\n        [SLOT_ELEMENT_TYPE_SYMBOL]: elementType\n    };\n    if (props && typeof props.children === 'function') {\n        var _defaultProps;\n        propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = props.children;\n        propsWithMetadata.children = (_defaultProps = defaultProps) === null || _defaultProps === void 0 ? void 0 : _defaultProps.children;\n    }\n    return propsWithMetadata;\n}\n/**\n * Creates a slot from a slot shorthand or properties (`props.SLOT_NAME` or `props` itself)\n * @param value - the value of the slot, it can be a slot shorthand, a slot component or a slot properties\n * @param options - values you can pass to alter the signature of a slot, those values are:\n *\n * * `elementType` - the base element type of a slot, defaults to `'div'`\n * * `defaultProps` - similar to a React component declaration, you can provide a slot default properties to be merged with the shorthand/properties provided\n * * `renderByDefault` - a boolean that indicates if a slot will be rendered even if it's base value is `undefined`.\n * By default if `props.SLOT_NAME` is `undefined` then `state.SLOT_NAME` becomes `undefined`\n * and nothing will be rendered, but if `renderByDefault = true` then `state.SLOT_NAME` becomes an object\n * with the values provided by `options.defaultProps` (or `{}`). This is useful for cases such as providing a default content\n * in case no shorthand is provided, like the case of the `expandIcon` slot for the `AccordionHeader`\n */ export function optional(value, options) {\n    if (value === null || value === undefined && !options.renderByDefault) {\n        return undefined;\n    }\n    return always(value, options);\n}\n/**\n * Helper function that converts a slot shorthand or properties to a slot properties object\n * The main difference between this function and `slot` is that this function does not return the metadata required for a slot to be considered a properly renderable slot, it only converts the value to a slot properties object\n * @param value - the value of the slot, it can be a slot shorthand or a slot properties object\n */ export function resolveShorthand(value) {\n    if (typeof value === 'string' || typeof value === 'number' || Array.isArray(value) || // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    React.isValidElement(value)) {\n        return {\n            children: value\n        };\n    }\n    if (value && typeof value !== 'object' && process.env.NODE_ENV !== 'production') {\n        // TODO: would be nice to have a link to slot documentation in this error message\n        // eslint-disable-next-line no-console\n        console.error([\n            `[slot.resolveShorthand]: A slot got invalid value \"${value}\" (${typeof value}).`,\n            'A valid value is a slot shorthand or slot properties object.',\n            'Slot shorthands can be strings, numbers, arrays or JSX elements'\n        ].join('\\n'));\n    }\n    return value;\n}\n"],"names":["always","optional","resolveShorthand","value","options","defaultProps","elementType","props","propsWithMetadata","SLOT_ELEMENT_TYPE_SYMBOL","children","_defaultProps","SLOT_RENDER_FUNCTION_SYMBOL","undefined","renderByDefault","Array","isArray","React","isValidElement","process","env","NODE_ENV","console","error","join"],"mappings":";;;;;;;;;;;IASoBA,MAAM;eAANA;;IAgCAC,QAAQ;eAARA;;IAUAC,gBAAgB;eAAhBA;;;;iEAnDG;2BAC+C;AAQ3D,SAASF,OAAOG,KAAK,EAAEC,OAAO;IACrC,MAAM,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAGF;IACtC,MAAMG,QAAQL,iBAAiBC;IAC/B;;;;;GAKD,GAAG,MAAMK,oBAAoB;QACxB,GAAGH,YAAY;QACf,GAAGE,KAAK;QACR,CAACE,mCAAwB,CAAC,EAAEH;IAChC;IACA,IAAIC,SAAS,OAAOA,MAAMG,QAAQ,KAAK,YAAY;QAC/C,IAAIC;QACJH,iBAAiB,CAACI,sCAA2B,CAAC,GAAGL,MAAMG,QAAQ;QAC/DF,kBAAkBE,QAAQ,GAAG,AAACC,CAAAA,gBAAgBN,YAAW,MAAO,QAAQM,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcD,QAAQ;IACtI;IACA,OAAOF;AACX;AAaW,SAASP,SAASE,KAAK,EAAEC,OAAO;IACvC,IAAID,UAAU,QAAQA,UAAUU,aAAa,CAACT,QAAQU,eAAe,EAAE;QACnE,OAAOD;IACX;IACA,OAAOb,OAAOG,OAAOC;AACzB;AAKW,SAASF,iBAAiBC,KAAK;IACtC,IAAI,OAAOA,UAAU,YAAY,OAAOA,UAAU,YAAYY,MAAMC,OAAO,CAACb,UAAU,8DAA8D;kBACpJc,OAAMC,cAAc,CAACf,QAAQ;QACzB,OAAO;YACHO,UAAUP;QACd;IACJ;IACA,IAAIA,SAAS,OAAOA,UAAU,YAAYgB,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QAC7E,iFAAiF;QACjF,sCAAsC;QACtCC,QAAQC,KAAK,CAAC;YACV,CAAC,mDAAmD,EAAEpB,MAAM,GAAG,EAAE,OAAOA,MAAM,EAAE,CAAC;YACjF;YACA;SACH,CAACqB,IAAI,CAAC;IACX;IACA,OAAOrB;AACX"}
+{"version":3,"sources":["slot.js"],"sourcesContent":["import * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from './constants';\n/**\n * Creates a slot from a slot shorthand or properties (`props.SLOT_NAME` or `props` itself)\n * @param value - the value of the slot, it can be a slot shorthand, a slot component or a slot properties\n * @param options - values you can pass to alter the signature of a slot, those values are:\n *\n * * `elementType` - the base element type of a slot, defaults to `'div'`\n * * `defaultProps` - similar to a React component declaration, you can provide a slot default properties to be merged with the shorthand/properties provided.\n */ export function always(value, options) {\n    const { defaultProps, elementType } = options;\n    const props = resolveShorthand(value);\n    /**\n   * Casting is required here as SlotComponentType is a function, not an object.\n   * Although SlotComponentType has a function signature, it is still just an object.\n   * This is required to make a slot callable (JSX compatible), this is the exact same approach\n   * that is used on `@types/react` components\n   */ const propsWithMetadata = {\n        ...defaultProps,\n        ...props,\n        [SLOT_ELEMENT_TYPE_SYMBOL]: elementType\n    };\n    if (props && typeof props.children === 'function') {\n        var _defaultProps;\n        propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = props.children;\n        propsWithMetadata.children = (_defaultProps = defaultProps) === null || _defaultProps === void 0 ? void 0 : _defaultProps.children;\n    }\n    return propsWithMetadata;\n}\n/**\n * Creates a slot from a slot shorthand or properties (`props.SLOT_NAME` or `props` itself)\n * @param value - the value of the slot, it can be a slot shorthand, a slot component or a slot properties\n * @param options - values you can pass to alter the signature of a slot, those values are:\n *\n * * `elementType` - the base element type of a slot, defaults to `'div'`\n * * `defaultProps` - similar to a React component declaration, you can provide a slot default properties to be merged with the shorthand/properties provided\n * * `renderByDefault` - a boolean that indicates if a slot will be rendered even if it's base value is `undefined`.\n * By default if `props.SLOT_NAME` is `undefined` then `state.SLOT_NAME` becomes `undefined`\n * and nothing will be rendered, but if `renderByDefault = true` then `state.SLOT_NAME` becomes an object\n * with the values provided by `options.defaultProps` (or `{}`). This is useful for cases such as providing a default content\n * in case no shorthand is provided, like the case of the `expandIcon` slot for the `AccordionHeader`\n */ export function optional(value, options) {\n    if (value === null || value === undefined && !options.renderByDefault) {\n        return undefined;\n    }\n    return always(value, options);\n}\n/**\n * Helper function that converts a slot shorthand or properties to a slot properties object\n * The main difference between this function and `slot` is that this function does not return the metadata required for a slot to be considered a properly renderable slot, it only converts the value to a slot properties object\n * @param value - the value of the slot, it can be a slot shorthand or a slot properties object\n */ export function resolveShorthand(value) {\n    if (typeof value === 'string' || typeof value === 'number' || Array.isArray(value) || // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    React.isValidElement(value)) {\n        return {\n            children: value\n        };\n    }\n    if (value && typeof value !== 'object' && process.env.NODE_ENV !== 'production') {\n        // TODO: would be nice to have a link to slot documentation in this error message\n        // eslint-disable-next-line no-console\n        console.error(`@fluentui/react-utilities [slot.${resolveShorthand.name}]:\nA slot got an invalid value \"${value}\" (${typeof value}).\nA valid value for a slot is a slot shorthand or slot properties object.\nSlot shorthands can be strings, numbers, arrays or JSX elements`);\n    }\n    return value;\n}\n"],"names":["always","optional","resolveShorthand","value","options","defaultProps","elementType","props","propsWithMetadata","SLOT_ELEMENT_TYPE_SYMBOL","children","_defaultProps","SLOT_RENDER_FUNCTION_SYMBOL","undefined","renderByDefault","Array","isArray","React","isValidElement","process","env","NODE_ENV","console","error","name"],"mappings":";;;;;;;;;;;IASoBA,MAAM;eAANA;;IAgCAC,QAAQ;eAARA;;IAUAC,gBAAgB;eAAhBA;;;;iEAnDG;2BAC+C;AAQ3D,SAASF,OAAOG,KAAK,EAAEC,OAAO;IACrC,MAAM,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAGF;IACtC,MAAMG,QAAQL,iBAAiBC;IAC/B;;;;;GAKD,GAAG,MAAMK,oBAAoB;QACxB,GAAGH,YAAY;QACf,GAAGE,KAAK;QACR,CAACE,mCAAwB,CAAC,EAAEH;IAChC;IACA,IAAIC,SAAS,OAAOA,MAAMG,QAAQ,KAAK,YAAY;QAC/C,IAAIC;QACJH,iBAAiB,CAACI,sCAA2B,CAAC,GAAGL,MAAMG,QAAQ;QAC/DF,kBAAkBE,QAAQ,GAAG,AAACC,CAAAA,gBAAgBN,YAAW,MAAO,QAAQM,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcD,QAAQ;IACtI;IACA,OAAOF;AACX;AAaW,SAASP,SAASE,KAAK,EAAEC,OAAO;IACvC,IAAID,UAAU,QAAQA,UAAUU,aAAa,CAACT,QAAQU,eAAe,EAAE;QACnE,OAAOD;IACX;IACA,OAAOb,OAAOG,OAAOC;AACzB;AAKW,SAASF,iBAAiBC,KAAK;IACtC,IAAI,OAAOA,UAAU,YAAY,OAAOA,UAAU,YAAYY,MAAMC,OAAO,CAACb,UAAU,8DAA8D;kBACpJc,OAAMC,cAAc,CAACf,QAAQ;QACzB,OAAO;YACHO,UAAUP;QACd;IACJ;IACA,IAAIA,SAAS,OAAOA,UAAU,YAAYgB,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QAC7E,iFAAiF;QACjF,sCAAsC;QACtCC,QAAQC,KAAK,CAAC,CAAC,gCAAgC,EAAErB,iBAAiBsB,IAAI,CAAC;6BAClD,EAAErB,MAAM,GAAG,EAAE,OAAOA,MAAM;;+DAEQ,CAAC;IAC5D;IACA,OAAOA;AACX"}

package/lib-commonjs/hooks/useControllableState.js

@@ -59,14 +59,11 @@ function isInitializer(value) {
                 const controlWarning = isControlled ? 'a controlled value to be uncontrolled' : 'an uncontrolled value to be controlled';
                 const undefinedWarning = isControlled ? 'defined to an undefined' : 'undefined to a defined';
                 // eslint-disable-next-line no-console
-                console.error([
-                    // Default react error
-                    '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(' '));
+                console.error(`@fluentui/react-utilities [${useControllableState.name}]:
+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}`);
             }
         }, [
             isControlled,

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

@@ -1 +1 @@
-{"version":3,"sources":["useControllableState.js"],"sourcesContent":["import * as React from 'react';\nfunction isFactoryDispatch(newState) {\n    return typeof newState === 'function';\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 */ export 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    // Heads up!\n    // This part is specific for controlled mode and mocks behavior of React dispatcher function.\n    const stateValueRef = React.useRef(options.state);\n    React.useEffect(()=>{\n        stateValueRef.current = options.state;\n    }, [\n        options.state\n    ]);\n    const setControlledState = React.useCallback((newState)=>{\n        if (isFactoryDispatch(newState)) {\n            newState(stateValueRef.current);\n        }\n    }, []);\n    return useIsControlled(options.state) ? [\n        options.state,\n        setControlledState\n    ] : [\n        internalState,\n        setInternalState\n    ];\n};\nfunction isInitializer(value) {\n    return typeof value === 'function';\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 */ const 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',\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,\n            controlledValue\n        ]);\n    }\n    return isControlled;\n};\n"],"names":["useControllableState","isFactoryDispatch","newState","options","internalState","setInternalState","React","useState","defaultState","undefined","initialState","isInitializer","stateValueRef","useRef","state","useEffect","current","setControlledState","useCallback","useIsControlled","value","controlledValue","isControlled","process","env","NODE_ENV","error","Error","controlWarning","undefinedWarning","console","stack","join"],"mappings":";;;;+BAoBiBA;;;eAAAA;;;;iEApBM;AACvB,SAASC,kBAAkBC,QAAQ;IAC/B,OAAO,OAAOA,aAAa;AAC/B;AAiBW,MAAMF,uBAAuB,CAACG;IACrC,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,OAAMC,QAAQ,CAAC;QACrD,IAAIJ,QAAQK,YAAY,KAAKC,WAAW;YACpC,OAAON,QAAQO,YAAY;QAC/B;QACA,OAAOC,cAAcR,QAAQK,YAAY,IAAIL,QAAQK,YAAY,KAAKL,QAAQK,YAAY;IAC9F;IACA,YAAY;IACZ,6FAA6F;IAC7F,MAAMI,gBAAgBN,OAAMO,MAAM,CAACV,QAAQW,KAAK;IAChDR,OAAMS,SAAS,CAAC;QACZH,cAAcI,OAAO,GAAGb,QAAQW,KAAK;IACzC,GAAG;QACCX,QAAQW,KAAK;KAChB;IACD,MAAMG,qBAAqBX,OAAMY,WAAW,CAAC,CAAChB;QAC1C,IAAID,kBAAkBC,WAAW;YAC7BA,SAASU,cAAcI,OAAO;QAClC;IACJ,GAAG,EAAE;IACL,OAAOG,gBAAgBhB,QAAQW,KAAK,IAAI;QACpCX,QAAQW,KAAK;QACbG;KACH,GAAG;QACAb;QACAC;KACH;AACL;AACA,SAASM,cAAcS,KAAK;IACxB,OAAO,OAAOA,UAAU;AAC5B;AACA;;;;CAIC,GAAG,MAAMD,kBAAkB,CAACE;IACzB,MAAM,CAACC,aAAa,GAAGhB,OAAMC,QAAQ,CAAC,IAAIc,oBAAoBZ;IAC9D,IAAIc,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,wFAAwF;QACxF,sDAAsD;QACtDnB,OAAMS,SAAS,CAAC;YACZ,IAAIO,iBAAkBD,CAAAA,oBAAoBZ,SAAQ,GAAI;gBAClD,MAAMiB,QAAQ,IAAIC;gBAClB,MAAMC,iBAAiBN,eAAe,0CAA0C;gBAChF,MAAMO,mBAAmBP,eAAe,4BAA4B;gBACpE,sCAAsC;gBACtCQ,QAAQJ,KAAK,CAAC;oBACV,sBAAsB;oBACtB,6BAA6BE,iBAAiB;oBAC9C,mBAAmBC,mBAAmB;oBACtC;oBACA;oBACAH,MAAMK,KAAK;iBACd,CAACC,IAAI,CAAC;YACX;QACJ,GAAG;YACCV;YACAD;SACH;IACL;IACA,OAAOC;AACX"}
+{"version":3,"sources":["useControllableState.js"],"sourcesContent":["import * as React from 'react';\nfunction isFactoryDispatch(newState) {\n    return typeof newState === 'function';\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 */ export 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    // Heads up!\n    // This part is specific for controlled mode and mocks behavior of React dispatcher function.\n    const stateValueRef = React.useRef(options.state);\n    React.useEffect(()=>{\n        stateValueRef.current = options.state;\n    }, [\n        options.state\n    ]);\n    const setControlledState = React.useCallback((newState)=>{\n        if (isFactoryDispatch(newState)) {\n            newState(stateValueRef.current);\n        }\n    }, []);\n    return useIsControlled(options.state) ? [\n        options.state,\n        setControlledState\n    ] : [\n        internalState,\n        setInternalState\n    ];\n};\nfunction isInitializer(value) {\n    return typeof value === 'function';\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 */ const 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(`@fluentui/react-utilities [${useControllableState.name}]:\nA component is changing ${controlWarning}. This is likely caused by the value changing from ${undefinedWarning} value, which should not happen.\nDecide between using a controlled or uncontrolled input element for the lifetime of the component.\nMore info: https://reactjs.org/link/controlled-components\n${error.stack}`);\n            }\n        }, [\n            isControlled,\n            controlledValue\n        ]);\n    }\n    return isControlled;\n};\n"],"names":["useControllableState","isFactoryDispatch","newState","options","internalState","setInternalState","React","useState","defaultState","undefined","initialState","isInitializer","stateValueRef","useRef","state","useEffect","current","setControlledState","useCallback","useIsControlled","value","controlledValue","isControlled","process","env","NODE_ENV","error","Error","controlWarning","undefinedWarning","console","name","stack"],"mappings":";;;;+BAoBiBA;;;eAAAA;;;;iEApBM;AACvB,SAASC,kBAAkBC,QAAQ;IAC/B,OAAO,OAAOA,aAAa;AAC/B;AAiBW,MAAMF,uBAAuB,CAACG;IACrC,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,OAAMC,QAAQ,CAAC;QACrD,IAAIJ,QAAQK,YAAY,KAAKC,WAAW;YACpC,OAAON,QAAQO,YAAY;QAC/B;QACA,OAAOC,cAAcR,QAAQK,YAAY,IAAIL,QAAQK,YAAY,KAAKL,QAAQK,YAAY;IAC9F;IACA,YAAY;IACZ,6FAA6F;IAC7F,MAAMI,gBAAgBN,OAAMO,MAAM,CAACV,QAAQW,KAAK;IAChDR,OAAMS,SAAS,CAAC;QACZH,cAAcI,OAAO,GAAGb,QAAQW,KAAK;IACzC,GAAG;QACCX,QAAQW,KAAK;KAChB;IACD,MAAMG,qBAAqBX,OAAMY,WAAW,CAAC,CAAChB;QAC1C,IAAID,kBAAkBC,WAAW;YAC7BA,SAASU,cAAcI,OAAO;QAClC;IACJ,GAAG,EAAE;IACL,OAAOG,gBAAgBhB,QAAQW,KAAK,IAAI;QACpCX,QAAQW,KAAK;QACbG;KACH,GAAG;QACAb;QACAC;KACH;AACL;AACA,SAASM,cAAcS,KAAK;IACxB,OAAO,OAAOA,UAAU;AAC5B;AACA;;;;CAIC,GAAG,MAAMD,kBAAkB,CAACE;IACzB,MAAM,CAACC,aAAa,GAAGhB,OAAMC,QAAQ,CAAC,IAAIc,oBAAoBZ;IAC9D,IAAIc,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,wFAAwF;QACxF,sDAAsD;QACtDnB,OAAMS,SAAS,CAAC;YACZ,IAAIO,iBAAkBD,CAAAA,oBAAoBZ,SAAQ,GAAI;gBAClD,MAAMiB,QAAQ,IAAIC;gBAClB,MAAMC,iBAAiBN,eAAe,0CAA0C;gBAChF,MAAMO,mBAAmBP,eAAe,4BAA4B;gBACpE,sCAAsC;gBACtCQ,QAAQJ,KAAK,CAAC,CAAC,2BAA2B,EAAE1B,qBAAqB+B,IAAI,CAAC;wBAC9D,EAAEH,eAAe,mDAAmD,EAAEC,iBAAiB;;;AAG/G,EAAEH,MAAMM,KAAK,CAAC,CAAC;YACH;QACJ,GAAG;YACCV;YACAD;SACH;IACL;IACA,OAAOC;AACX"}

package/lib-commonjs/ssr/SSRContext.js

@@ -52,13 +52,11 @@ function useIsSSR() {
     if (process.env.NODE_ENV !== 'production') {
         if (!isInSSRContext && !(0, _canUseDOM.canUseDOM)()) {
             // eslint-disable-next-line no-console
-            console.error([
-                '@fluentui/react-components: ',
-                'When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are ' + 'generated between the client and server.',
-                '\n',
-                '\n',
-                'Check documentation at https://aka.ms/fluentui-ssr'
-            ].join(''));
+            console.error(`@fluentui/react-components [${useIsSSR.name}]:
+When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.
+
+
+Check documentation at https://aka.ms/fluentui-ssr.`);
         }
     }
     // If on the client, and the component was initially server rendered, then schedule a layout effect to update the

package/lib-commonjs/ssr/SSRContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SSRContext.js"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from './canUseDOM';\n/**\n * Default context value to use in case there is no SSRProvider. This is fine for client-only apps.\n *\n * @internal\n */ export const defaultSSRContextValue = {\n    current: 0\n};\nexport const SSRContext = /*#__PURE__*/ React.createContext(undefined);\n/**\n * @internal\n */ export function useSSRContext() {\n    var _React_useContext;\n    return (_React_useContext = React.useContext(SSRContext)) !== null && _React_useContext !== void 0 ? _React_useContext : defaultSSRContextValue;\n}\n/**\n * When using SSR with Fluent UI, applications must be wrapped in an SSRProvider. This ensures that auto generated ids\n * are consistent between the client and server.\n *\n * @public\n */ export const SSRProvider = (props)=>{\n    const [value] = React.useState(()=>({\n            current: 0\n        }));\n    return /*#__PURE__*/ React.createElement(SSRContext.Provider, {\n        value: value\n    }, props.children);\n};\n/**\n * Returns whether the component is currently being server side rendered or hydrated on the client. Can be used to delay\n * browser-specific rendering until after hydration. May cause re-renders on a client when is used within SSRProvider.\n */ export function useIsSSR() {\n    const isInSSRContext = useSSRContext() !== defaultSSRContextValue;\n    const [isSSR, setIsSSR] = React.useState(isInSSRContext);\n    // If we are rendering in a non-DOM environment, and there's no SSRProvider, provide a warning to hint to the\n    // developer to add one.\n    if (process.env.NODE_ENV !== 'production') {\n        if (!isInSSRContext && !canUseDOM()) {\n            // eslint-disable-next-line no-console\n            console.error([\n                '@fluentui/react-components: ',\n                'When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are ' + 'generated between the client and server.',\n                '\\n',\n                '\\n',\n                'Check documentation at https://aka.ms/fluentui-ssr'\n            ].join(''));\n        }\n    }\n    // If on the client, and the component was initially server rendered, then schedule a layout effect to update the\n    // component after hydration.\n    if (canUseDOM() && isInSSRContext) {\n        // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after\n        // mounting.\n        // eslint-disable-next-line\n        React.useLayoutEffect(()=>{\n            setIsSSR(false);\n        }, []);\n    }\n    return isSSR;\n}\n"],"names":["defaultSSRContextValue","SSRContext","useSSRContext","SSRProvider","useIsSSR","current","React","createContext","undefined","_React_useContext","useContext","props","value","useState","createElement","Provider","children","isInSSRContext","isSSR","setIsSSR","process","env","NODE_ENV","canUseDOM","console","error","join","useLayoutEffect"],"mappings":";;;;;;;;;;;IAMiBA,sBAAsB;eAAtBA;;IAGJC,UAAU;eAAVA;;IAGOC,aAAa;eAAbA;;IASHC,WAAW;eAAXA;;IAWGC,QAAQ;eAARA;;;;iEAhCG;2BACG;AAKf,MAAMJ,yBAAyB;IACtCK,SAAS;AACb;AACO,MAAMJ,aAAa,WAAW,GAAGK,OAAMC,aAAa,CAACC;AAGjD,SAASN;IAChB,IAAIO;IACJ,OAAO,AAACA,CAAAA,oBAAoBH,OAAMI,UAAU,CAACT,WAAU,MAAO,QAAQQ,sBAAsB,KAAK,IAAIA,oBAAoBT;AAC7H;AAMW,MAAMG,cAAc,CAACQ;IAC5B,MAAM,CAACC,MAAM,GAAGN,OAAMO,QAAQ,CAAC,IAAK,CAAA;YAC5BR,SAAS;QACb,CAAA;IACJ,OAAO,WAAW,GAAGC,OAAMQ,aAAa,CAACb,WAAWc,QAAQ,EAAE;QAC1DH,OAAOA;IACX,GAAGD,MAAMK,QAAQ;AACrB;AAIW,SAASZ;IAChB,MAAMa,iBAAiBf,oBAAoBF;IAC3C,MAAM,CAACkB,OAAOC,SAAS,GAAGb,OAAMO,QAAQ,CAACI;IACzC,6GAA6G;IAC7G,wBAAwB;IACxB,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,IAAI,CAACL,kBAAkB,CAACM,IAAAA,oBAAS,KAAI;YACjC,sCAAsC;YACtCC,QAAQC,KAAK,CAAC;gBACV;gBACA,4GAA4G;gBAC5G;gBACA;gBACA;aACH,CAACC,IAAI,CAAC;QACX;IACJ;IACA,iHAAiH;IACjH,6BAA6B;IAC7B,IAAIH,IAAAA,oBAAS,OAAMN,gBAAgB;QAC/B,iHAAiH;QACjH,YAAY;QACZ,2BAA2B;QAC3BX,OAAMqB,eAAe,CAAC;YAClBR,SAAS;QACb,GAAG,EAAE;IACT;IACA,OAAOD;AACX"}
+{"version":3,"sources":["SSRContext.js"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from './canUseDOM';\n/**\n * Default context value to use in case there is no SSRProvider. This is fine for client-only apps.\n *\n * @internal\n */ export const defaultSSRContextValue = {\n    current: 0\n};\nexport const SSRContext = /*#__PURE__*/ React.createContext(undefined);\n/**\n * @internal\n */ export function useSSRContext() {\n    var _React_useContext;\n    return (_React_useContext = React.useContext(SSRContext)) !== null && _React_useContext !== void 0 ? _React_useContext : defaultSSRContextValue;\n}\n/**\n * When using SSR with Fluent UI, applications must be wrapped in an SSRProvider. This ensures that auto generated ids\n * are consistent between the client and server.\n *\n * @public\n */ export const SSRProvider = (props)=>{\n    const [value] = React.useState(()=>({\n            current: 0\n        }));\n    return /*#__PURE__*/ React.createElement(SSRContext.Provider, {\n        value: value\n    }, props.children);\n};\n/**\n * Returns whether the component is currently being server side rendered or hydrated on the client. Can be used to delay\n * browser-specific rendering until after hydration. May cause re-renders on a client when is used within SSRProvider.\n */ export function useIsSSR() {\n    const isInSSRContext = useSSRContext() !== defaultSSRContextValue;\n    const [isSSR, setIsSSR] = React.useState(isInSSRContext);\n    // If we are rendering in a non-DOM environment, and there's no SSRProvider, provide a warning to hint to the\n    // developer to add one.\n    if (process.env.NODE_ENV !== 'production') {\n        if (!isInSSRContext && !canUseDOM()) {\n            // eslint-disable-next-line no-console\n            console.error(`@fluentui/react-components [${useIsSSR.name}]:\nWhen server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.\n\n\nCheck documentation at https://aka.ms/fluentui-ssr.`);\n        }\n    }\n    // If on the client, and the component was initially server rendered, then schedule a layout effect to update the\n    // component after hydration.\n    if (canUseDOM() && isInSSRContext) {\n        // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after\n        // mounting.\n        // eslint-disable-next-line\n        React.useLayoutEffect(()=>{\n            setIsSSR(false);\n        }, []);\n    }\n    return isSSR;\n}\n"],"names":["defaultSSRContextValue","SSRContext","useSSRContext","SSRProvider","useIsSSR","current","React","createContext","undefined","_React_useContext","useContext","props","value","useState","createElement","Provider","children","isInSSRContext","isSSR","setIsSSR","process","env","NODE_ENV","canUseDOM","console","error","name","useLayoutEffect"],"mappings":";;;;;;;;;;;IAMiBA,sBAAsB;eAAtBA;;IAGJC,UAAU;eAAVA;;IAGOC,aAAa;eAAbA;;IASHC,WAAW;eAAXA;;IAWGC,QAAQ;eAARA;;;;iEAhCG;2BACG;AAKf,MAAMJ,yBAAyB;IACtCK,SAAS;AACb;AACO,MAAMJ,aAAa,WAAW,GAAGK,OAAMC,aAAa,CAACC;AAGjD,SAASN;IAChB,IAAIO;IACJ,OAAO,AAACA,CAAAA,oBAAoBH,OAAMI,UAAU,CAACT,WAAU,MAAO,QAAQQ,sBAAsB,KAAK,IAAIA,oBAAoBT;AAC7H;AAMW,MAAMG,cAAc,CAACQ;IAC5B,MAAM,CAACC,MAAM,GAAGN,OAAMO,QAAQ,CAAC,IAAK,CAAA;YAC5BR,SAAS;QACb,CAAA;IACJ,OAAO,WAAW,GAAGC,OAAMQ,aAAa,CAACb,WAAWc,QAAQ,EAAE;QAC1DH,OAAOA;IACX,GAAGD,MAAMK,QAAQ;AACrB;AAIW,SAASZ;IAChB,MAAMa,iBAAiBf,oBAAoBF;IAC3C,MAAM,CAACkB,OAAOC,SAAS,GAAGb,OAAMO,QAAQ,CAACI;IACzC,6GAA6G;IAC7G,wBAAwB;IACxB,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,IAAI,CAACL,kBAAkB,CAACM,IAAAA,oBAAS,KAAI;YACjC,sCAAsC;YACtCC,QAAQC,KAAK,CAAC,CAAC,4BAA4B,EAAErB,SAASsB,IAAI,CAAC;;;;mDAIpB,CAAC;QAC5C;IACJ;IACA,iHAAiH;IACjH,6BAA6B;IAC7B,IAAIH,IAAAA,oBAAS,OAAMN,gBAAgB;QAC/B,iHAAiH;QACjH,YAAY;QACZ,2BAA2B;QAC3BX,OAAMqB,eAAe,CAAC;YAClBR,SAAS;QACb,GAAG,EAAE;IACT;IACA,OAAOD;AACX"}

package/lib-commonjs/utils/getReactCallbackName.js

@@ -22,9 +22,7 @@ function getReactCallbackName(event) {
     }
     if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
-        console.error([
-            'Passed React.SyntheticEvent does not contain ".dispatchConfig" or "._reactName".',
-            'This should not happen, please report it to https://github.com/microsoft/fluentui'
-        ]);
+        console.error(`@fluentui/react-utilities [${getReactCallbackName.name}]:
+Passed React.SyntheticEvent does not contain ".dispatchConfig" or "._reactName". This should not happen, please report it to https://github.com/microsoft/fluentui.`);
     }
 }

package/lib-commonjs/utils/getReactCallbackName.js.map

@@ -1 +1 @@
-{"version":3,"sources":["getReactCallbackName.js"],"sourcesContent":["import * as React from 'react';\n/**\n * React.SyntheticEvent contains name of a callback that should be fired, this function returns it.\n *\n * Ideally, it should also distinguish regular and \"capture\" callbacks, but it's possible only with React 17 as\n * \".eventPhase\" there has proper value, see https://github.com/facebook/react/pull/19244. In React 16 all events\n * are handled in bubble phase.\n */ export function getReactCallbackName(event) {\n    if (event._reactName) {\n        return event._reactName;\n    }\n    if (event.dispatchConfig) {\n        if (event.dispatchConfig.registrationName) {\n            return event.dispatchConfig.registrationName;\n        }\n        return event.dispatchConfig.phasedRegistrationNames.bubbled;\n    }\n    if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error([\n            'Passed React.SyntheticEvent does not contain \".dispatchConfig\" or \"._reactName\".',\n            'This should not happen, please report it to https://github.com/microsoft/fluentui'\n        ]);\n    }\n}\n"],"names":["getReactCallbackName","event","_reactName","dispatchConfig","registrationName","phasedRegistrationNames","bubbled","process","env","NODE_ENV","console","error"],"mappings":";;;;+BAOoBA;;;eAAAA;;;;iEAPG;AAOZ,SAASA,qBAAqBC,KAAK;IAC1C,IAAIA,MAAMC,UAAU,EAAE;QAClB,OAAOD,MAAMC,UAAU;IAC3B;IACA,IAAID,MAAME,cAAc,EAAE;QACtB,IAAIF,MAAME,cAAc,CAACC,gBAAgB,EAAE;YACvC,OAAOH,MAAME,cAAc,CAACC,gBAAgB;QAChD;QACA,OAAOH,MAAME,cAAc,CAACE,uBAAuB,CAACC,OAAO;IAC/D;IACA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,sCAAsC;QACtCC,QAAQC,KAAK,CAAC;YACV;YACA;SACH;IACL;AACJ"}
+{"version":3,"sources":["getReactCallbackName.js"],"sourcesContent":["import * as React from 'react';\n/**\n * React.SyntheticEvent contains name of a callback that should be fired, this function returns it.\n *\n * Ideally, it should also distinguish regular and \"capture\" callbacks, but it's possible only with React 17 as\n * \".eventPhase\" there has proper value, see https://github.com/facebook/react/pull/19244. In React 16 all events\n * are handled in bubble phase.\n */ export function getReactCallbackName(event) {\n    if (event._reactName) {\n        return event._reactName;\n    }\n    if (event.dispatchConfig) {\n        if (event.dispatchConfig.registrationName) {\n            return event.dispatchConfig.registrationName;\n        }\n        return event.dispatchConfig.phasedRegistrationNames.bubbled;\n    }\n    if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error(`@fluentui/react-utilities [${getReactCallbackName.name}]:\nPassed React.SyntheticEvent does not contain \".dispatchConfig\" or \"._reactName\". This should not happen, please report it to https://github.com/microsoft/fluentui.`);\n    }\n}\n"],"names":["getReactCallbackName","event","_reactName","dispatchConfig","registrationName","phasedRegistrationNames","bubbled","process","env","NODE_ENV","console","error","name"],"mappings":";;;;+BAOoBA;;;eAAAA;;;;iEAPG;AAOZ,SAASA,qBAAqBC,KAAK;IAC1C,IAAIA,MAAMC,UAAU,EAAE;QAClB,OAAOD,MAAMC,UAAU;IAC3B;IACA,IAAID,MAAME,cAAc,EAAE;QACtB,IAAIF,MAAME,cAAc,CAACC,gBAAgB,EAAE;YACvC,OAAOH,MAAME,cAAc,CAACC,gBAAgB;QAChD;QACA,OAAOH,MAAME,cAAc,CAACE,uBAAuB,CAACC,OAAO;IAC/D;IACA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,sCAAsC;QACtCC,QAAQC,KAAK,CAAC,CAAC,2BAA2B,EAAEX,qBAAqBY,IAAI,CAAC;mKACqF,CAAC;IAChK;AACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-utilities",
-  "version": "0.0.0-nightly-20230901-0414.1",
+  "version": "0.0.0-nightly-20230905-0414.1",
   "description": "A set of general React-specific utilities.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -31,7 +31,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "0.0.0-nightly-20230901-0414.1",
+    "@fluentui/keyboard-keys": "0.0.0-nightly-20230905-0414.1",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {