@fluentui/react-utilities 0.0.0-nightlya9c3d10d9520220113.1 → 0.0.0-nightlyb8663b78ad20220207.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/CHANGELOG.json +48 -6
  2. package/CHANGELOG.md +11 -6
  3. package/dist/react-utilities.d.ts +134 -52
  4. package/lib/compose/getSlots.d.ts +7 -7
  5. package/lib/compose/getSlots.js.map +1 -1
  6. package/lib/compose/resolveShorthand.d.ts +5 -5
  7. package/lib/compose/resolveShorthand.js +3 -3
  8. package/lib/compose/types.d.ts +47 -25
  9. package/lib/compose/types.js.map +1 -1
  10. package/lib/hooks/index.d.ts +1 -0
  11. package/lib/hooks/index.js +1 -0
  12. package/lib/hooks/index.js.map +1 -1
  13. package/lib/hooks/useMergedEventCallbacks.d.ts +18 -0
  14. package/lib/hooks/useMergedEventCallbacks.js +26 -0
  15. package/lib/hooks/useMergedEventCallbacks.js.map +1 -0
  16. package/lib/utils/applyTriggerPropsToChildren.js +19 -2
  17. package/lib/utils/applyTriggerPropsToChildren.js.map +1 -1
  18. package/lib/utils/getReactCallbackName.d.ts +25 -0
  19. package/lib/utils/getReactCallbackName.js +26 -0
  20. package/lib/utils/getReactCallbackName.js.map +1 -0
  21. package/lib/utils/getTriggerChild.d.ts +22 -0
  22. package/lib/utils/getTriggerChild.js +26 -0
  23. package/lib/utils/getTriggerChild.js.map +1 -0
  24. package/lib/utils/index.d.ts +2 -1
  25. package/lib/utils/index.js +2 -1
  26. package/lib/utils/index.js.map +1 -1
  27. package/lib/utils/isFluentTrigger.d.ts +22 -0
  28. package/lib/utils/isFluentTrigger.js +8 -0
  29. package/lib/utils/isFluentTrigger.js.map +1 -0
  30. package/lib-commonjs/compose/getSlots.d.ts +7 -7
  31. package/lib-commonjs/compose/getSlots.js.map +1 -1
  32. package/lib-commonjs/compose/resolveShorthand.d.ts +5 -5
  33. package/lib-commonjs/compose/resolveShorthand.js +3 -3
  34. package/lib-commonjs/compose/types.d.ts +47 -25
  35. package/lib-commonjs/compose/types.js.map +1 -1
  36. package/lib-commonjs/hooks/index.d.ts +1 -0
  37. package/lib-commonjs/hooks/index.js +2 -0
  38. package/lib-commonjs/hooks/index.js.map +1 -1
  39. package/lib-commonjs/hooks/useMergedEventCallbacks.d.ts +18 -0
  40. package/lib-commonjs/hooks/useMergedEventCallbacks.js +36 -0
  41. package/lib-commonjs/hooks/useMergedEventCallbacks.js.map +1 -0
  42. package/lib-commonjs/utils/applyTriggerPropsToChildren.js +19 -2
  43. package/lib-commonjs/utils/applyTriggerPropsToChildren.js.map +1 -1
  44. package/lib-commonjs/utils/getReactCallbackName.d.ts +25 -0
  45. package/lib-commonjs/utils/getReactCallbackName.js +35 -0
  46. package/lib-commonjs/utils/getReactCallbackName.js.map +1 -0
  47. package/lib-commonjs/utils/getTriggerChild.d.ts +22 -0
  48. package/lib-commonjs/utils/getTriggerChild.js +37 -0
  49. package/lib-commonjs/utils/getTriggerChild.js.map +1 -0
  50. package/lib-commonjs/utils/index.d.ts +2 -1
  51. package/lib-commonjs/utils/index.js +4 -2
  52. package/lib-commonjs/utils/index.js.map +1 -1
  53. package/lib-commonjs/utils/isFluentTrigger.d.ts +22 -0
  54. package/lib-commonjs/utils/isFluentTrigger.js +17 -0
  55. package/lib-commonjs/utils/isFluentTrigger.js.map +1 -0
  56. package/package.json +3 -3
  57. package/lib/utils/onlyChild.d.ts +0 -5
  58. package/lib/utils/onlyChild.js +0 -13
  59. package/lib/utils/onlyChild.js.map +0 -1
  60. package/lib-commonjs/utils/onlyChild.d.ts +0 -5
  61. package/lib-commonjs/utils/onlyChild.js +0 -23
  62. package/lib-commonjs/utils/onlyChild.js.map +0 -1
@@ -0,0 +1,35 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getReactCallbackName = void 0;
7
+ /**
8
+ * React.SyntheticEvent contains name of a callback that should be fired, this function returns it.
9
+ *
10
+ * Ideally, it should also distinguish regular and "capture" callbacks, but it's possible only with React 17 as
11
+ * ".eventPhase" there has proper value, see https://github.com/facebook/react/pull/19244. In React 16 all events
12
+ * are handled in bubble phase.
13
+ */
14
+
15
+ function getReactCallbackName(event) {
16
+ if (event._reactName) {
17
+ return event._reactName;
18
+ }
19
+
20
+ if (event.dispatchConfig) {
21
+ if (event.dispatchConfig.registrationName) {
22
+ return event.dispatchConfig.registrationName;
23
+ }
24
+
25
+ return event.dispatchConfig.phasedRegistrationNames.bubbled;
26
+ }
27
+
28
+ if (process.env.NODE_ENV !== 'production') {
29
+ // eslint-disable-next-line no-console
30
+ console.error(['Passed React.SyntheticEvent does not contain ".dispatchConfig" or "._reactName".', 'This should not happen, please report it to https://github.com/microsoft/fluentui']);
31
+ }
32
+ }
33
+
34
+ exports.getReactCallbackName = getReactCallbackName;
35
+ //# sourceMappingURL=getReactCallbackName.js.map
@@ -0,0 +1 @@
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":""}
@@ -0,0 +1,22 @@
1
+ import * as React from 'react';
2
+ /**
3
+ * Gets the trigger element of a FluentTriggerComponent (such as Tooltip or MenuTrigger).
4
+ *
5
+ * In the case where the immediate child is itself a FluentTriggerComponent and/or React Fragment,
6
+ * it returns the first descendant that is _not_ a FluentTriggerComponent or Fragment.
7
+ * This allows multiple triggers to be stacked, and still apply their props to the actual trigger element.
8
+ *
9
+ * For example, the following returns `<div id="child" />`:
10
+ * ```jsx
11
+ * getTriggerChild(
12
+ * <Tooltip>
13
+ * <MenuTrigger>
14
+ * <div id="child" />
15
+ * </MenuTrigger>
16
+ * </Tooltip>
17
+ * );
18
+ * ```
19
+ */
20
+ export declare const getTriggerChild: (children: React.ReactNode) => React.ReactElement & {
21
+ ref?: React.Ref<unknown>;
22
+ };
@@ -0,0 +1,37 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getTriggerChild = void 0;
7
+
8
+ const React = /*#__PURE__*/require("react");
9
+
10
+ const isFluentTrigger_1 = /*#__PURE__*/require("./isFluentTrigger");
11
+ /**
12
+ * Gets the trigger element of a FluentTriggerComponent (such as Tooltip or MenuTrigger).
13
+ *
14
+ * In the case where the immediate child is itself a FluentTriggerComponent and/or React Fragment,
15
+ * it returns the first descendant that is _not_ a FluentTriggerComponent or Fragment.
16
+ * This allows multiple triggers to be stacked, and still apply their props to the actual trigger element.
17
+ *
18
+ * For example, the following returns `<div id="child" />`:
19
+ * ```jsx
20
+ * getTriggerChild(
21
+ * <Tooltip>
22
+ * <MenuTrigger>
23
+ * <div id="child" />
24
+ * </MenuTrigger>
25
+ * </Tooltip>
26
+ * );
27
+ * ```
28
+ */
29
+
30
+
31
+ const getTriggerChild = children => {
32
+ const child = React.Children.only(children);
33
+ return isFluentTrigger_1.isFluentTrigger(child) ? exports.getTriggerChild(child.props.children) : child;
34
+ };
35
+
36
+ exports.getTriggerChild = getTriggerChild;
37
+ //# sourceMappingURL=getTriggerChild.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/utils/getTriggerChild.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;;;;;;;;;;;;;;;AAiBG;;;AACI,MAAM,eAAe,GAAI,QAAD,IAAiF;AAC9G,QAAM,KAAK,GAAG,KAAK,CAAC,QAAN,CAAe,IAAf,CAAoB,QAApB,CAAd;AACA,SAAO,iBAAA,CAAA,eAAA,CAAgB,KAAhB,IAAyB,OAAA,CAAA,eAAA,CAAgB,KAAK,CAAC,KAAN,CAAY,QAA5B,CAAzB,GAAiE,KAAxE;AACD,CAHM;;AAAM,OAAA,CAAA,eAAA,GAAe,eAAf","sourceRoot":""}
@@ -2,7 +2,8 @@ export * from './applyTriggerPropsToChildren';
2
2
  export * from './clamp';
3
3
  export * from './getNativeElementProps';
4
4
  export * from './getRTLSafeKey';
5
+ export * from './getTriggerChild';
6
+ export * from './isFluentTrigger';
5
7
  export * from './omit';
6
- export * from './onlyChild';
7
8
  export * from './properties';
8
9
  export * from './shouldPreventDefaultOnKeyDown';
@@ -14,9 +14,11 @@ tslib_1.__exportStar(require("./getNativeElementProps"), exports);
14
14
 
15
15
  tslib_1.__exportStar(require("./getRTLSafeKey"), exports);
16
16
 
17
- tslib_1.__exportStar(require("./omit"), exports);
17
+ tslib_1.__exportStar(require("./getTriggerChild"), exports);
18
+
19
+ tslib_1.__exportStar(require("./isFluentTrigger"), exports);
18
20
 
19
- tslib_1.__exportStar(require("./onlyChild"), exports);
21
+ tslib_1.__exportStar(require("./omit"), exports);
20
22
 
21
23
  tslib_1.__exportStar(require("./properties"), exports);
22
24
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iCAAA,CAAA,EAAA,OAAA","sourceRoot":""}
1
+ {"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iCAAA,CAAA,EAAA,OAAA","sourceRoot":""}
@@ -0,0 +1,22 @@
1
+ import * as React from 'react';
2
+ /**
3
+ * Allows a component to be tagged as a FluentUI trigger component.
4
+ *
5
+ * Triggers are special-case components: they attach event listeners and other props on their child,
6
+ * and use them to trigger another component to show. Examples include `MenuTrigger` and `Tooltip`.
7
+ *
8
+ * A component can be tagged as a trigger as follows:
9
+ * ```ts
10
+ * const MyComponent: React.FC<MyComponentProps> & FluentTriggerComponent = ...;
11
+ *
12
+ * MyComponent.isFluentTriggerComponent = true; // MUST also set this to true
13
+ * ```
14
+ */
15
+ export declare type FluentTriggerComponent = {
16
+ isFluentTriggerComponent?: boolean;
17
+ };
18
+ /**
19
+ * Checks if a given element is a FluentUI trigger (e.g. `MenuTrigger` or `Tooltip`).
20
+ * See the {@link FluentTriggerComponent} type for more info.
21
+ */
22
+ export declare const isFluentTrigger: (element: React.ReactElement) => boolean | undefined;
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.isFluentTrigger = void 0;
7
+ /**
8
+ * Checks if a given element is a FluentUI trigger (e.g. `MenuTrigger` or `Tooltip`).
9
+ * See the {@link FluentTriggerComponent} type for more info.
10
+ */
11
+
12
+ const isFluentTrigger = element => {
13
+ return element.type.isFluentTriggerComponent;
14
+ };
15
+
16
+ exports.isFluentTrigger = isFluentTrigger;
17
+ //# sourceMappingURL=isFluentTrigger.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/utils/isFluentTrigger.ts"],"names":[],"mappings":";;;;;;AAmBA;;;AAGG;;AACI,MAAM,eAAe,GAAI,OAAD,IAAgC;AAC7D,SAAQ,OAAO,CAAC,IAAR,CAAwC,wBAAhD;AACD,CAFM;;AAAM,OAAA,CAAA,eAAA,GAAe,eAAf","sourceRoot":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-utilities",
3
- "version": "0.0.0-nightlya9c3d10d9520220113.1",
3
+ "version": "0.0.0-nightlyb8663b78ad20220207.1",
4
4
  "description": "A set of general React-specific utilities.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -18,7 +18,7 @@
18
18
  "code-style": "just-scripts code-style",
19
19
  "just": "just-scripts",
20
20
  "lint": "just-scripts lint",
21
- "test": "jest",
21
+ "test": "jest --passWithNoTests",
22
22
  "docs": "api-extractor run --config=config/api-extractor.local.json --local",
23
23
  "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-utilities/src && yarn docs",
24
24
  "start": "yarn storybook",
@@ -33,7 +33,7 @@
33
33
  "react-test-renderer": "^16.3.0"
34
34
  },
35
35
  "dependencies": {
36
- "@fluentui/keyboard-keys": "0.0.0-nightlya9c3d10d9520220113.1",
36
+ "@fluentui/keyboard-keys": "0.0.0-nightlyb8663b78ad20220207.1",
37
37
  "tslib": "^2.1.0"
38
38
  },
39
39
  "peerDependencies": {
@@ -1,5 +0,0 @@
1
- import * as React from 'react';
2
- /**
3
- * Similar to React.Children.only, but drills into fragments rather than treating them as a single child
4
- */
5
- export declare const onlyChild: <P>(child: boolean | React.ReactText | React.ReactFragment | React.ReactPortal | React.ReactElement<P, string | React.JSXElementConstructor<any>> | null | undefined) => React.ReactElement<P, string | React.JSXElementConstructor<any>>;
@@ -1,13 +0,0 @@
1
- import * as React from 'react';
2
- /**
3
- * Similar to React.Children.only, but drills into fragments rather than treating them as a single child
4
- */
5
-
6
- export const onlyChild = child => {
7
- if (! /*#__PURE__*/React.isValidElement(child)) {
8
- throw new Error(`Component's child must be a single element`);
9
- }
10
-
11
- return child.type === React.Fragment ? onlyChild(child.props.children) : child;
12
- };
13
- //# sourceMappingURL=onlyChild.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/utils/onlyChild.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA;;AAEG;;AACH,OAAO,MAAM,SAAS,GACpB,KADuB,IAEE;AACzB,MAAI,eAAC,KAAK,CAAC,cAAN,CAAqB,KAArB,CAAL,EAAkC;AAChC,UAAM,IAAI,KAAJ,CAAU,4CAAV,CAAN;AACD;;AAED,SAAO,KAAK,CAAC,IAAN,KAAe,KAAK,CAAC,QAArB,GAAgC,SAAS,CAAC,KAAK,CAAC,KAAN,CAAY,QAAb,CAAzC,GAAkE,KAAzE;AACD,CARM","sourceRoot":""}
@@ -1,5 +0,0 @@
1
- import * as React from 'react';
2
- /**
3
- * Similar to React.Children.only, but drills into fragments rather than treating them as a single child
4
- */
5
- export declare const onlyChild: <P>(child: boolean | React.ReactText | React.ReactFragment | React.ReactPortal | React.ReactElement<P, string | React.JSXElementConstructor<any>> | null | undefined) => React.ReactElement<P, string | React.JSXElementConstructor<any>>;
@@ -1,23 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.onlyChild = void 0;
7
-
8
- const React = /*#__PURE__*/require("react");
9
- /**
10
- * Similar to React.Children.only, but drills into fragments rather than treating them as a single child
11
- */
12
-
13
-
14
- const onlyChild = child => {
15
- if (!React.isValidElement(child)) {
16
- throw new Error(`Component's child must be a single element`);
17
- }
18
-
19
- return child.type === React.Fragment ? exports.onlyChild(child.props.children) : child;
20
- };
21
-
22
- exports.onlyChild = onlyChild;
23
- //# sourceMappingURL=onlyChild.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/utils/onlyChild.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,SAAS,GACpB,KADuB,IAEE;AACzB,MAAI,CAAC,KAAK,CAAC,cAAN,CAAqB,KAArB,CAAL,EAAkC;AAChC,UAAM,IAAI,KAAJ,CAAU,4CAAV,CAAN;AACD;;AAED,SAAO,KAAK,CAAC,IAAN,KAAe,KAAK,CAAC,QAArB,GAAgC,OAAA,CAAA,SAAA,CAAU,KAAK,CAAC,KAAN,CAAY,QAAtB,CAAhC,GAAkE,KAAzE;AACD,CARM;;AAAM,OAAA,CAAA,SAAA,GAAS,SAAT","sourceRoot":""}