@fluentui/react-utilities 0.0.0-nightly5ab766c40f20220114.1 → 0.0.0-nightly6a6e258c4020220125.1

package/CHANGELOG.json

@@ -2,23 +2,35 @@
   "name": "@fluentui/react-utilities",
   "entries": [
     {
-      "date": "Fri, 14 Jan 2022 04:15:04 GMT",
-      "tag": "@fluentui/react-utilities_v0.0.0-nightly5ab766c40f20220114.1",
-      "version": "0.0.0-nightly5ab766c40f20220114.1",
+      "date": "Tue, 25 Jan 2022 04:17:22 GMT",
+      "tag": "@fluentui/react-utilities_v0.0.0-nightly6a6e258c4020220125.1",
+      "version": "0.0.0-nightly6a6e258c4020220125.1",
       "comments": {
         "prerelease": [
           {
             "author": "email not defined",
             "package": "@fluentui/react-utilities",
-            "commit": "afbf0defba27d6180bd53e24443fff8da633f9dd",
+            "commit": "1d41ec351a6d5902e871c87fcbaacf8db8ecb40d",
             "comment": "Release nightly v9"
           },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "317209bb5cd57c40f35bc42060acb7e3cce5ec95",
+            "comment": "Rename component hooks add the suffix _unstable, as their API has not been finalized yet"
+          },
           {
             "author": "behowell@microsoft.com",
             "package": "@fluentui/react-utilities",
             "commit": "7cc28ed8320b00f42d91c63882f10316db2205c5",
             "comment": "getSlots: remove slotNames param, and infer from state.components instead"
           },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "d2eb57808a403b70845a732a62b55aa64d66b2a0",
+            "comment": "add useTriggerElement() hook"
+          },
           {
             "author": "elcraig@microsoft.com",
             "package": "@fluentui/react-utilities",
@@ -28,8 +40,8 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-utilities",
-            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly5ab766c40f20220114.1",
-            "commit": "afbf0defba27d6180bd53e24443fff8da633f9dd"
+            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly6a6e258c4020220125.1",
+            "commit": "1d41ec351a6d5902e871c87fcbaacf8db8ecb40d"
           }
         ],
         "none": [
@@ -39,6 +51,18 @@
             "commit": "3360b45ec159250b1346c91afad7dce138e6bc20",
             "comment": "Update API file to version generated by typescript 4.3"
           },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "c061e98be4b4a718c72a144a1f60bb5515824612",
+            "comment": "remove inline-style-expand-shorthand from tsconfigs"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-utilities",
+            "commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
+            "comment": "chore: use storybook runner for all vNext packages"
+          },
           {
             "author": "seanmonahan@microsoft.com",
             "package": "@fluentui/react-utilities",

package/CHANGELOG.md

@@ -1,20 +1,22 @@
 # Change Log - @fluentui/react-utilities
 
-This log was last generated on Fri, 14 Jan 2022 04:15:04 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jan 2022 04:17:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly5ab766c40f20220114.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v0.0.0-nightly5ab766c40f20220114.1)
+## [0.0.0-nightly6a6e258c4020220125.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v0.0.0-nightly6a6e258c4020220125.1)
 
-Fri, 14 Jan 2022 04:15:04 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-beta.4..@fluentui/react-utilities_v0.0.0-nightly5ab766c40f20220114.1)
+Tue, 25 Jan 2022 04:17:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-beta.4..@fluentui/react-utilities_v0.0.0-nightly6a6e258c4020220125.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/afbf0defba27d6180bd53e24443fff8da633f9dd) by email not defined)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/1d41ec351a6d5902e871c87fcbaacf8db8ecb40d) by email not defined)
+- Rename component hooks add the suffix _unstable, as their API has not been finalized yet ([PR #21365](https://github.com/microsoft/fluentui/pull/21365) by behowell@microsoft.com)
 - getSlots: remove slotNames param, and infer from state.components instead ([PR #21134](https://github.com/microsoft/fluentui/pull/21134) by behowell@microsoft.com)
+- add useTriggerElement() hook ([PR #21225](https://github.com/microsoft/fluentui/pull/21225) by olfedias@microsoft.com)
 - [breaking] Remove useControllableValue hook (use useControllableState instead) ([PR #20865](https://github.com/microsoft/fluentui/pull/20865) by elcraig@microsoft.com)
-- Bump @fluentui/keyboard-keys to v0.0.0-nightly5ab766c40f20220114.1 ([commit](https://github.com/microsoft/fluentui/commit/afbf0defba27d6180bd53e24443fff8da633f9dd) by beachball)
+- Bump @fluentui/keyboard-keys to v0.0.0-nightly6a6e258c4020220125.1 ([commit](https://github.com/microsoft/fluentui/commit/1d41ec351a6d5902e871c87fcbaacf8db8ecb40d) by beachball)
 
 ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-beta.4)
 

package/dist/react-utilities.d.ts

@@ -642,6 +642,25 @@ export declare function useSSRContext(): SSRContextValue;
  */
 export declare function useTimeout(): readonly [(fn: () => void, delay: number) => void, () => void];
 
+/**
+ * A hook that handles "trigger" pattern.
+ *
+ * Clones a passed element or calls render props. Merges props including refs and callbacks, callbacks are kept stable
+ * by reference.
+ */
+export declare function useTriggerElement<TriggerProps extends React_2.HTMLProps<unknown>>(options: UseTriggerElementOptions<TriggerProps>): React_2.ReactNode;
+
+export declare type UseTriggerElementOptions<TriggerProps> = {
+    /** An actual trigger element or render props function. */
+    children: React_2.ReactElement | ((props: TriggerProps) => React_2.ReactNode) | null | undefined;
+    /** A ref to trigger element. */
+    ref: React_2.Ref<unknown> | undefined;
+    /** Props that are passed to a parent component and should be forwarded down. */
+    outerProps: React_2.HTMLProps<unknown>;
+    /** Custom props including callbacks. */
+    overrideProps: TriggerProps;
+};
+
 /**
  * Hook which synchronously executes a callback when the component is about to unmount.
  *

package/lib/hooks/index.d.ts

@@ -11,5 +11,6 @@ export * from './useOnClickOutside';
 export * from './useOnScrollOutside';
 export * from './usePrevious';
 export * from './useTimeout';
+export * from './useTriggerElement';
 export * from './useUnmount';
 export * from './useForceUpdate';

package/lib/hooks/index.js

@@ -11,6 +11,7 @@ export * from './useOnClickOutside';
 export * from './useOnScrollOutside';
 export * from './usePrevious';
 export * from './useTimeout';
+export * from './useTriggerElement';
 export * from './useUnmount';
 export * from './useForceUpdate';
 //# sourceMappingURL=index.js.map

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC"}

package/lib/hooks/useTriggerElement.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export declare type UseTriggerElementOptions<TriggerProps> = {
+    /** An actual trigger element or render props function. */
+    children: React.ReactElement | ((props: TriggerProps) => React.ReactNode) | null | undefined;
+    /** A ref to trigger element. */
+    ref: React.Ref<unknown> | undefined;
+    /** Props that are passed to a parent component and should be forwarded down. */
+    outerProps: React.HTMLProps<unknown>;
+    /** Custom props including callbacks. */
+    overrideProps: TriggerProps;
+};
+/**
+ * A hook that handles "trigger" pattern.
+ *
+ * Clones a passed element or calls render props. Merges props including refs and callbacks, callbacks are kept stable
+ * by reference.
+ */
+export declare function useTriggerElement<TriggerProps extends React.HTMLProps<unknown>>(options: UseTriggerElementOptions<TriggerProps>): React.ReactNode;

package/lib/hooks/useTriggerElement.js

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { applyTriggerPropsToChildren } from '../utils/applyTriggerPropsToChildren';
+import { getReactCallbackName } from '../utils/getReactCallbackName';
+import { onlyChild } from '../utils/onlyChild';
+import { useEventCallback } from './useEventCallback';
+import { useMergedRefs } from './useMergedRefs';
+const CAPTURE_CALLBACK_REGEX = /on[A-Z].+Capture$/;
+const CALLBACK_REGEX = /on[A-Z].+/;
+/**
+ * A hook that handles "trigger" pattern.
+ *
+ * Clones a passed element or calls render props. Merges props including refs and callbacks, callbacks are kept stable
+ * by reference.
+ */
+
+export function useTriggerElement(options) {
+  const {
+    children,
+    ref,
+    outerProps,
+    overrideProps
+  } = options;
+  let childProps = {};
+  let childRef = null; // child can be a render func, `applyTriggerPropsToChildren`does the same check again
+  // TODO figure out a way to only do this check once
+
+  if ( /*#__PURE__*/React.isValidElement(children)) {
+    const child = onlyChild(children);
+    childProps = child.props;
+    childRef = child.ref;
+  } // Two separate callbacks are needed to handle properly bubble and capture callbacks
+  // "getReactCallbackName()" could return proper callback name, but it's possible only with React 17
+
+
+  const handleBubbleEvent = useEventCallback(ev => {
+    var _a, _b, _c;
+
+    const callbackName = getReactCallbackName(ev);
+
+    if (callbackName) {
+      // Typecast is required as "ev" is "React.SyntheticEvent" while callbacks have stricter typings and accept
+      // "FocusEvent", "ClipboardEvent" and etc.
+
+      /* eslint-disable @typescript-eslint/no-explicit-any */
+      (_a = childProps[callbackName]) === null || _a === void 0 ? void 0 : _a.call(childProps, ev);
+      (_b = overrideProps[callbackName]) === null || _b === void 0 ? void 0 : _b.call(overrideProps, ev);
+      (_c = outerProps[callbackName]) === null || _c === void 0 ? void 0 : _c.call(outerProps, ev);
+      /* eslint-enable @typescript-eslint/no-explicit-any */
+    }
+  });
+  const handleCaptureEvent = useEventCallback(ev => {
+    var _a, _b, _c;
+
+    const callbackName = getReactCallbackName(ev) + 'Capture';
+
+    if (callbackName) {
+      // Typecast is required as "ev" is "React.SyntheticEvent" while callbacks have stricter typings and accept
+      // "FocusEvent", "ClipboardEvent" and etc.
+
+      /* eslint-disable @typescript-eslint/no-explicit-any */
+      (_a = childProps[callbackName]) === null || _a === void 0 ? void 0 : _a.call(childProps, ev);
+      (_b = overrideProps[callbackName]) === null || _b === void 0 ? void 0 : _b.call(overrideProps, ev);
+      (_c = outerProps[callbackName]) === null || _c === void 0 ? void 0 : _c.call(outerProps, ev);
+      /* eslint-enable @typescript-eslint/no-explicit-any */
+    }
+  });
+  const mergedPropEntries = Object.entries({ ...outerProps,
+    ...overrideProps,
+    ...childProps,
+    // Undocumented, but React supports ref cloning through props
+    ref: useMergedRefs(childRef, ref)
+  }); // TODO: fix me after https://github.com/microsoft/fluentui/issues/21229
+  // Causes TS error:
+  // "Property 'fromEntries' does not exist on type 'ObjectConstructor'"
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const triggerProps = Object.fromEntries(mergedPropEntries.map(([propName, propValue]) => {
+    if (propName.match(CAPTURE_CALLBACK_REGEX)) {
+      return [propName, handleCaptureEvent];
+    }
+
+    if (propName.match(CALLBACK_REGEX)) {
+      return [propName, handleBubbleEvent];
+    }
+
+    return [propName, propValue];
+  }));
+  return applyTriggerPropsToChildren(children, triggerProps);
+}
+//# sourceMappingURL=useTriggerElement.js.map

package/lib/hooks/useTriggerElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useTriggerElement.ts"],"names":[],"mappings":"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","sourceRoot":""}

package/lib/utils/getReactCallbackName.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+interface ReactSyntheticEvent extends React.SyntheticEvent<unknown> {
+    _reactName?: string;
+    dispatchConfig?: {
+        registrationName: string;
+        phasedRegistrationNames: {
+            bubbled: string;
+            captured: string;
+        };
+    };
+}
+declare type NonUndefined<A> = A extends undefined ? never : A;
+declare type FunctionKeys<T extends object> = {
+    [K in keyof T]-?: NonUndefined<T[K]> extends Function ? K : never;
+}[keyof T];
+export declare type ReactCallbackName = FunctionKeys<React.DOMAttributes<unknown>>;
+/**
+ * React.SyntheticEvent contains name of a callback that should be fired, this function returns it.
+ *
+ * Ideally, it should also distinguish regular and "capture" callbacks, but it's possible only with React 17 as
+ * ".eventPhase" there has proper value, see https://github.com/facebook/react/pull/19244. In React 16 all events
+ * are handled in bubble phase.
+ */
+export declare function getReactCallbackName(event: ReactSyntheticEvent): ReactCallbackName | undefined;
+export {};

package/lib/utils/getReactCallbackName.js

@@ -0,0 +1,26 @@
+/**
+ * React.SyntheticEvent contains name of a callback that should be fired, this function returns it.
+ *
+ * Ideally, it should also distinguish regular and "capture" callbacks, but it's possible only with React 17 as
+ * ".eventPhase" there has proper value, see https://github.com/facebook/react/pull/19244. In React 16 all events
+ * are handled in bubble phase.
+ */
+export function getReactCallbackName(event) {
+  if (event._reactName) {
+    return event._reactName;
+  }
+
+  if (event.dispatchConfig) {
+    if (event.dispatchConfig.registrationName) {
+      return event.dispatchConfig.registrationName;
+    }
+
+    return event.dispatchConfig.phasedRegistrationNames.bubbled;
+  }
+
+  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']);
+  }
+}
+//# sourceMappingURL=getReactCallbackName.js.map

package/lib/utils/getReactCallbackName.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/getReactCallbackName.ts"],"names":[],"mappings":"AAwBA;;;;;;AAMG;AACH,OAAM,SAAU,oBAAV,CAA+B,KAA/B,EAAyD;AAC7D,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,WAAO,KAAK,CAAC,UAAb;AACD;;AAED,MAAI,KAAK,CAAC,cAAV,EAA0B;AACxB,QAAI,KAAK,CAAC,cAAN,CAAqB,gBAAzB,EAA2C;AACzC,aAAO,KAAK,CAAC,cAAN,CAAqB,gBAA5B;AACD;;AAED,WAAO,KAAK,CAAC,cAAN,CAAqB,uBAArB,CAA6C,OAApD;AACD;;AAED,MAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;AACA,IAAA,OAAO,CAAC,KAAR,CAAc,CACZ,kFADY,EAEZ,mFAFY,CAAd;AAID;AACF","sourceRoot":""}

package/lib-commonjs/hooks/index.d.ts

@@ -11,5 +11,6 @@ export * from './useOnClickOutside';
 export * from './useOnScrollOutside';
 export * from './usePrevious';
 export * from './useTimeout';
+export * from './useTriggerElement';
 export * from './useUnmount';
 export * from './useForceUpdate';

package/lib-commonjs/hooks/index.js

@@ -32,6 +32,8 @@ tslib_1.__exportStar(require("./usePrevious"), exports);
 
 tslib_1.__exportStar(require("./useTimeout"), exports);
 
+tslib_1.__exportStar(require("./useTriggerElement"), exports);
+
 tslib_1.__exportStar(require("./useUnmount"), exports);
 
 tslib_1.__exportStar(require("./useForceUpdate"), exports);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["../../src/hooks/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/hooks/useTriggerElement.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export declare type UseTriggerElementOptions<TriggerProps> = {
+    /** An actual trigger element or render props function. */
+    children: React.ReactElement | ((props: TriggerProps) => React.ReactNode) | null | undefined;
+    /** A ref to trigger element. */
+    ref: React.Ref<unknown> | undefined;
+    /** Props that are passed to a parent component and should be forwarded down. */
+    outerProps: React.HTMLProps<unknown>;
+    /** Custom props including callbacks. */
+    overrideProps: TriggerProps;
+};
+/**
+ * A hook that handles "trigger" pattern.
+ *
+ * Clones a passed element or calls render props. Merges props including refs and callbacks, callbacks are kept stable
+ * by reference.
+ */
+export declare function useTriggerElement<TriggerProps extends React.HTMLProps<unknown>>(options: UseTriggerElementOptions<TriggerProps>): React.ReactNode;

package/lib-commonjs/hooks/useTriggerElement.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTriggerElement = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const applyTriggerPropsToChildren_1 = /*#__PURE__*/require("../utils/applyTriggerPropsToChildren");
+
+const getReactCallbackName_1 = /*#__PURE__*/require("../utils/getReactCallbackName");
+
+const onlyChild_1 = /*#__PURE__*/require("../utils/onlyChild");
+
+const useEventCallback_1 = /*#__PURE__*/require("./useEventCallback");
+
+const useMergedRefs_1 = /*#__PURE__*/require("./useMergedRefs");
+
+const CAPTURE_CALLBACK_REGEX = /on[A-Z].+Capture$/;
+const CALLBACK_REGEX = /on[A-Z].+/;
+/**
+ * A hook that handles "trigger" pattern.
+ *
+ * Clones a passed element or calls render props. Merges props including refs and callbacks, callbacks are kept stable
+ * by reference.
+ */
+
+function useTriggerElement(options) {
+  const {
+    children,
+    ref,
+    outerProps,
+    overrideProps
+  } = options;
+  let childProps = {};
+  let childRef = null; // child can be a render func, `applyTriggerPropsToChildren`does the same check again
+  // TODO figure out a way to only do this check once
+
+  if (React.isValidElement(children)) {
+    const child = onlyChild_1.onlyChild(children);
+    childProps = child.props;
+    childRef = child.ref;
+  } // Two separate callbacks are needed to handle properly bubble and capture callbacks
+  // "getReactCallbackName()" could return proper callback name, but it's possible only with React 17
+
+
+  const handleBubbleEvent = useEventCallback_1.useEventCallback(ev => {
+    var _a, _b, _c;
+
+    const callbackName = getReactCallbackName_1.getReactCallbackName(ev);
+
+    if (callbackName) {
+      // Typecast is required as "ev" is "React.SyntheticEvent" while callbacks have stricter typings and accept
+      // "FocusEvent", "ClipboardEvent" and etc.
+
+      /* eslint-disable @typescript-eslint/no-explicit-any */
+      (_a = childProps[callbackName]) === null || _a === void 0 ? void 0 : _a.call(childProps, ev);
+      (_b = overrideProps[callbackName]) === null || _b === void 0 ? void 0 : _b.call(overrideProps, ev);
+      (_c = outerProps[callbackName]) === null || _c === void 0 ? void 0 : _c.call(outerProps, ev);
+      /* eslint-enable @typescript-eslint/no-explicit-any */
+    }
+  });
+  const handleCaptureEvent = useEventCallback_1.useEventCallback(ev => {
+    var _a, _b, _c;
+
+    const callbackName = getReactCallbackName_1.getReactCallbackName(ev) + 'Capture';
+
+    if (callbackName) {
+      // Typecast is required as "ev" is "React.SyntheticEvent" while callbacks have stricter typings and accept
+      // "FocusEvent", "ClipboardEvent" and etc.
+
+      /* eslint-disable @typescript-eslint/no-explicit-any */
+      (_a = childProps[callbackName]) === null || _a === void 0 ? void 0 : _a.call(childProps, ev);
+      (_b = overrideProps[callbackName]) === null || _b === void 0 ? void 0 : _b.call(overrideProps, ev);
+      (_c = outerProps[callbackName]) === null || _c === void 0 ? void 0 : _c.call(outerProps, ev);
+      /* eslint-enable @typescript-eslint/no-explicit-any */
+    }
+  });
+  const mergedPropEntries = Object.entries({ ...outerProps,
+    ...overrideProps,
+    ...childProps,
+    // Undocumented, but React supports ref cloning through props
+    ref: useMergedRefs_1.useMergedRefs(childRef, ref)
+  }); // TODO: fix me after https://github.com/microsoft/fluentui/issues/21229
+  // Causes TS error:
+  // "Property 'fromEntries' does not exist on type 'ObjectConstructor'"
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const triggerProps = Object.fromEntries(mergedPropEntries.map(([propName, propValue]) => {
+    if (propName.match(CAPTURE_CALLBACK_REGEX)) {
+      return [propName, handleCaptureEvent];
+    }
+
+    if (propName.match(CALLBACK_REGEX)) {
+      return [propName, handleBubbleEvent];
+    }
+
+    return [propName, propValue];
+  }));
+  return applyTriggerPropsToChildren_1.applyTriggerPropsToChildren(children, triggerProps);
+}
+
+exports.useTriggerElement = useTriggerElement;
+//# sourceMappingURL=useTriggerElement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useTriggerElement.ts"],"names":[],"mappings":"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","sourceRoot":""}

package/lib-commonjs/utils/getReactCallbackName.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+interface ReactSyntheticEvent extends React.SyntheticEvent<unknown> {
+    _reactName?: string;
+    dispatchConfig?: {
+        registrationName: string;
+        phasedRegistrationNames: {
+            bubbled: string;
+            captured: string;
+        };
+    };
+}
+declare type NonUndefined<A> = A extends undefined ? never : A;
+declare type FunctionKeys<T extends object> = {
+    [K in keyof T]-?: NonUndefined<T[K]> extends Function ? K : never;
+}[keyof T];
+export declare type ReactCallbackName = FunctionKeys<React.DOMAttributes<unknown>>;
+/**
+ * React.SyntheticEvent contains name of a callback that should be fired, this function returns it.
+ *
+ * Ideally, it should also distinguish regular and "capture" callbacks, but it's possible only with React 17 as
+ * ".eventPhase" there has proper value, see https://github.com/facebook/react/pull/19244. In React 16 all events
+ * are handled in bubble phase.
+ */
+export declare function getReactCallbackName(event: ReactSyntheticEvent): ReactCallbackName | undefined;
+export {};

package/lib-commonjs/utils/getReactCallbackName.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getReactCallbackName = void 0;
+/**
+ * React.SyntheticEvent contains name of a callback that should be fired, this function returns it.
+ *
+ * Ideally, it should also distinguish regular and "capture" callbacks, but it's possible only with React 17 as
+ * ".eventPhase" there has proper value, see https://github.com/facebook/react/pull/19244. In React 16 all events
+ * are handled in bubble phase.
+ */
+
+function getReactCallbackName(event) {
+  if (event._reactName) {
+    return event._reactName;
+  }
+
+  if (event.dispatchConfig) {
+    if (event.dispatchConfig.registrationName) {
+      return event.dispatchConfig.registrationName;
+    }
+
+    return event.dispatchConfig.phasedRegistrationNames.bubbled;
+  }
+
+  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']);
+  }
+}
+
+exports.getReactCallbackName = getReactCallbackName;
+//# sourceMappingURL=getReactCallbackName.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/getReactCallbackName.ts"],"names":[],"mappings":";;;;;;AAwBA;;;;;;AAMG;;AACH,SAAgB,oBAAhB,CAAqC,KAArC,EAA+D;AAC7D,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,WAAO,KAAK,CAAC,UAAb;AACD;;AAED,MAAI,KAAK,CAAC,cAAV,EAA0B;AACxB,QAAI,KAAK,CAAC,cAAN,CAAqB,gBAAzB,EAA2C;AACzC,aAAO,KAAK,CAAC,cAAN,CAAqB,gBAA5B;AACD;;AAED,WAAO,KAAK,CAAC,cAAN,CAAqB,uBAArB,CAA6C,OAApD;AACD;;AAED,MAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;AACA,IAAA,OAAO,CAAC,KAAR,CAAc,CACZ,kFADY,EAEZ,mFAFY,CAAd;AAID;AACF;;AApBD,OAAA,CAAA,oBAAA,GAAA,oBAAA","sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-utilities",
-  "version": "0.0.0-nightly5ab766c40f20220114.1",
+  "version": "0.0.0-nightly6a6e258c4020220125.1",
   "description": "A set of general React-specific utilities.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -18,7 +18,7 @@
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
-    "test": "jest",
+    "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
     "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-utilities/src && yarn docs",
     "start": "yarn storybook",
@@ -33,7 +33,7 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "0.0.0-nightly5ab766c40f20220114.1",
+    "@fluentui/keyboard-keys": "0.0.0-nightly6a6e258c4020220125.1",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {