@fluentui/react-tooltip 0.0.0-nightlyd514b3e0ee20220121.1 → 0.0.0-nightlyd80c90385320220216.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.
- package/CHANGELOG.json +147 -42
- package/CHANGELOG.md +38 -14
- package/dist/react-tooltip.d.ts +23 -38
- package/lib/components/Tooltip/Tooltip.d.ts +3 -2
- package/lib/components/Tooltip/Tooltip.js +9 -9
- package/lib/components/Tooltip/Tooltip.js.map +1 -1
- package/lib/components/Tooltip/Tooltip.types.d.ts +17 -30
- package/lib/components/Tooltip/renderTooltip.d.ts +1 -1
- package/lib/components/Tooltip/renderTooltip.js +3 -3
- package/lib/components/Tooltip/renderTooltip.js.map +1 -1
- package/lib/components/Tooltip/useTooltip.d.ts +3 -5
- package/lib/components/Tooltip/useTooltip.js +42 -57
- package/lib/components/Tooltip/useTooltip.js.map +1 -1
- package/lib/components/Tooltip/useTooltipStyles.d.ts +1 -1
- package/lib/components/Tooltip/useTooltipStyles.js +3 -3
- package/lib/components/Tooltip/useTooltipStyles.js.map +1 -1
- package/lib-commonjs/components/Tooltip/Tooltip.d.ts +3 -2
- package/lib-commonjs/components/Tooltip/Tooltip.js +8 -7
- package/lib-commonjs/components/Tooltip/Tooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/Tooltip.types.d.ts +17 -30
- package/lib-commonjs/components/Tooltip/renderTooltip.d.ts +1 -1
- package/lib-commonjs/components/Tooltip/renderTooltip.js +5 -5
- package/lib-commonjs/components/Tooltip/renderTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltip.d.ts +3 -5
- package/lib-commonjs/components/Tooltip/useTooltip.js +43 -58
- package/lib-commonjs/components/Tooltip/useTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltipStyles.d.ts +1 -1
- package/lib-commonjs/components/Tooltip/useTooltipStyles.js +6 -6
- package/lib-commonjs/components/Tooltip/useTooltipStyles.js.map +1 -1
- package/package.json +8 -10
| @@ -3,7 +3,7 @@ | |
| 3 3 | 
             
            Object.defineProperty(exports, "__esModule", {
         | 
| 4 4 | 
             
              value: true
         | 
| 5 5 | 
             
            });
         | 
| 6 | 
            -
            exports. | 
| 6 | 
            +
            exports.useTooltip_unstable = void 0;
         | 
| 7 7 |  | 
| 8 8 | 
             
            const React = /*#__PURE__*/require("react");
         | 
| 9 9 |  | 
| @@ -17,15 +17,14 @@ const constants_1 = /*#__PURE__*/require("./private/constants"); | |
| 17 17 | 
             
            /**
         | 
| 18 18 | 
             
             * Create the state required to render Tooltip.
         | 
| 19 19 | 
             
             *
         | 
| 20 | 
            -
             * The returned state can be modified with hooks such as  | 
| 21 | 
            -
             * before being passed to  | 
| 20 | 
            +
             * The returned state can be modified with hooks such as useTooltipStyles_unstable,
         | 
| 21 | 
            +
             * before being passed to renderTooltip_unstable.
         | 
| 22 22 | 
             
             *
         | 
| 23 23 | 
             
             * @param props - props from this instance of Tooltip
         | 
| 24 | 
            -
             * @param ref - reference to root HTMLElement of Tooltip
         | 
| 25 24 | 
             
             */
         | 
| 26 25 |  | 
| 27 26 |  | 
| 28 | 
            -
            const  | 
| 27 | 
            +
            const useTooltip_unstable = props => {
         | 
| 29 28 | 
             
              var _a, _b, _c, _d;
         | 
| 30 29 |  | 
| 31 30 | 
             
              const context = React.useContext(react_shared_contexts_1.TooltipContext);
         | 
| @@ -35,12 +34,13 @@ const useTooltip = (props, ref) => { | |
| 35 34 | 
             
              } = react_shared_contexts_1.useFluent();
         | 
| 36 35 | 
             
              const [setDelayTimeout, clearDelayTimeout] = react_utilities_1.useTimeout();
         | 
| 37 36 | 
             
              const {
         | 
| 38 | 
            -
                content,
         | 
| 39 37 | 
             
                appearance,
         | 
| 38 | 
            +
                children,
         | 
| 39 | 
            +
                content,
         | 
| 40 40 | 
             
                withArrow,
         | 
| 41 41 | 
             
                positioning,
         | 
| 42 42 | 
             
                onVisibleChange,
         | 
| 43 | 
            -
                 | 
| 43 | 
            +
                relationship,
         | 
| 44 44 | 
             
                showDelay = 250,
         | 
| 45 45 | 
             
                hideDelay = 250
         | 
| 46 46 | 
             
              } = props;
         | 
| @@ -61,26 +61,26 @@ const useTooltip = (props, ref) => { | |
| 61 61 | 
             
                });
         | 
| 62 62 | 
             
              }, [clearDelayTimeout, setVisibleInternal, onVisibleChange]);
         | 
| 63 63 | 
             
              const state = {
         | 
| 64 | 
            -
                content,
         | 
| 65 64 | 
             
                withArrow,
         | 
| 66 65 | 
             
                positioning,
         | 
| 67 66 | 
             
                showDelay,
         | 
| 68 67 | 
             
                hideDelay,
         | 
| 69 | 
            -
                 | 
| 68 | 
            +
                relationship,
         | 
| 70 69 | 
             
                visible,
         | 
| 71 70 | 
             
                shouldRenderTooltip: visible,
         | 
| 72 71 | 
             
                appearance,
         | 
| 73 72 | 
             
                // Slots
         | 
| 74 73 | 
             
                components: {
         | 
| 75 | 
            -
                   | 
| 74 | 
            +
                  content: 'div'
         | 
| 76 75 | 
             
                },
         | 
| 77 | 
            -
                 | 
| 78 | 
            -
                   | 
| 79 | 
            -
             | 
| 80 | 
            -
                   | 
| 81 | 
            -
                   | 
| 76 | 
            +
                content: react_utilities_1.resolveShorthand(content, {
         | 
| 77 | 
            +
                  defaultProps: {
         | 
| 78 | 
            +
                    role: 'tooltip'
         | 
| 79 | 
            +
                  },
         | 
| 80 | 
            +
                  required: true
         | 
| 82 81 | 
             
                })
         | 
| 83 82 | 
             
              };
         | 
| 83 | 
            +
              state.content.id = react_utilities_1.useId('tooltip-', state.content.id);
         | 
| 84 84 | 
             
              const popperOptions = {
         | 
| 85 85 | 
             
                enabled: state.visible,
         | 
| 86 86 | 
             
                arrowPadding: 2 * constants_1.tooltipBorderRadius,
         | 
| @@ -99,7 +99,7 @@ const useTooltip = (props, ref) => { | |
| 99 99 | 
             
                containerRef,
         | 
| 100 100 | 
             
                arrowRef
         | 
| 101 101 | 
             
              } = react_positioning_1.usePopper(popperOptions);
         | 
| 102 | 
            -
              state. | 
| 102 | 
            +
              state.content.ref = react_utilities_1.useMergedRefs(state.content.ref, containerRef);
         | 
| 103 103 | 
             
              state.arrowRef = arrowRef; // When this tooltip is visible, hide any other tooltips, and register it
         | 
| 104 104 | 
             
              // as the visibleTooltip with the TooltipContext.
         | 
| 105 105 | 
             
              // Also add a listener on document to hide the tooltip if Escape is pressed
         | 
| @@ -167,56 +167,41 @@ const useTooltip = (props, ref) => { | |
| 167 167 | 
             
              }, [setDelayTimeout, setVisible, state.hideDelay, targetDocument]); // Cancel the hide timer when the pointer enters the tooltip, and restart it when the mouse leaves.
         | 
| 168 168 | 
             
              // This keeps the tooltip visible when the pointer is moved over it.
         | 
| 169 169 |  | 
| 170 | 
            -
              state. | 
| 171 | 
            -
              state. | 
| 172 | 
            -
              const child = React.isValidElement( | 
| 173 | 
            -
             | 
| 174 | 
            -
              const triggerProps = {
         | 
| 175 | 
            -
                onPointerEnter: useMergedCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onPointerEnter, onEnterTrigger),
         | 
| 176 | 
            -
                onPointerLeave: useMergedCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onPointerLeave, onLeaveTrigger),
         | 
| 177 | 
            -
                onFocus: useMergedCallbacks((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.onFocus, onEnterTrigger),
         | 
| 178 | 
            -
                onBlur: useMergedCallbacks((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.onBlur, onLeaveTrigger)
         | 
| 179 | 
            -
              }; // If the target prop is not provided, attach targetRef to the trigger element's ref prop
         | 
| 170 | 
            +
              state.content.onPointerEnter = react_utilities_1.useMergedEventCallbacks(state.content.onPointerEnter, clearDelayTimeout);
         | 
| 171 | 
            +
              state.content.onPointerLeave = react_utilities_1.useMergedEventCallbacks(state.content.onPointerLeave, onLeaveTrigger);
         | 
| 172 | 
            +
              const child = React.isValidElement(children) ? react_utilities_1.getTriggerChild(children) : undefined;
         | 
| 173 | 
            +
              const triggerAriaProps = {};
         | 
| 180 174 |  | 
| 181 | 
            -
               | 
| 182 | 
            -
             | 
| 175 | 
            +
              if (relationship === 'label') {
         | 
| 176 | 
            +
                // aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.
         | 
| 177 | 
            +
                if (typeof state.content.children === 'string') {
         | 
| 178 | 
            +
                  triggerAriaProps['aria-label'] = state.content.children;
         | 
| 179 | 
            +
                } else if (!isServerSideRender) {
         | 
| 180 | 
            +
                  triggerAriaProps['aria-labelledby'] = state.content.id; // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
         | 
| 183 181 |  | 
| 184 | 
            -
             | 
| 185 | 
            -
                 | 
| 186 | 
            -
              }
         | 
| 182 | 
            +
                  state.shouldRenderTooltip = true;
         | 
| 183 | 
            +
                }
         | 
| 184 | 
            +
              } else if (relationship === 'description') {
         | 
| 185 | 
            +
                if (!isServerSideRender) {
         | 
| 186 | 
            +
                  triggerAriaProps['aria-describedby'] = state.content.id; // Always render the tooltip even if hidden, so that aria-describedby refers to a valid element
         | 
| 187 187 |  | 
| 188 | 
            -
             | 
| 189 | 
            -
                // aria-label only works if the content is a string. Otherwise, need to use labelledby.
         | 
| 190 | 
            -
                if (typeof state.content === 'string') {
         | 
| 191 | 
            -
                  triggerProps['aria-label'] = state.content;
         | 
| 192 | 
            -
                } else {
         | 
| 193 | 
            -
                  state.triggerAriaAttribute = 'labelledby';
         | 
| 188 | 
            +
                  state.shouldRenderTooltip = true;
         | 
| 194 189 | 
             
                }
         | 
| 195 190 | 
             
              }
         | 
| 196 191 |  | 
| 197 | 
            -
               | 
| 198 | 
            -
                triggerProps['aria-labelledby'] = state.root.id; // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
         | 
| 199 | 
            -
             | 
| 200 | 
            -
                state.shouldRenderTooltip = true;
         | 
| 201 | 
            -
              } else if (state.triggerAriaAttribute === 'describedby' && !isServerSideRender) {
         | 
| 202 | 
            -
                triggerProps['aria-describedby'] = state.root.id;
         | 
| 203 | 
            -
                state.shouldRenderTooltip = true;
         | 
| 204 | 
            -
              } // Apply the trigger props to the child, either by calling the render function, or cloning with the new props
         | 
| 192 | 
            +
              const childTargetRef = react_utilities_1.useMergedRefs(child === null || child === void 0 ? void 0 : child.ref, targetRef); // Apply the trigger props to the child, either by calling the render function, or cloning with the new props
         | 
| 205 193 |  | 
| 206 | 
            -
             | 
| 207 | 
            -
             | 
| 194 | 
            +
              state.children = react_utilities_1.applyTriggerPropsToChildren(children, { ...triggerAriaProps,
         | 
| 195 | 
            +
                ...(child === null || child === void 0 ? void 0 : child.props),
         | 
| 196 | 
            +
                // If the target prop is not provided, attach targetRef to the trigger element's ref prop
         | 
| 197 | 
            +
                ref: popperOptions.target === undefined ? childTargetRef : child === null || child === void 0 ? void 0 : child.ref,
         | 
| 198 | 
            +
                onPointerEnter: react_utilities_1.useMergedEventCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onPointerEnter, onEnterTrigger),
         | 
| 199 | 
            +
                onPointerLeave: react_utilities_1.useMergedEventCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onPointerLeave, onLeaveTrigger),
         | 
| 200 | 
            +
                onFocus: react_utilities_1.useMergedEventCallbacks((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.onFocus, onEnterTrigger),
         | 
| 201 | 
            +
                onBlur: react_utilities_1.useMergedEventCallbacks((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.onBlur, onLeaveTrigger)
         | 
| 202 | 
            +
              });
         | 
| 208 203 | 
             
              return state;
         | 
| 209 204 | 
             
            };
         | 
| 210 205 |  | 
| 211 | 
            -
            exports. | 
| 212 | 
            -
            /**
         | 
| 213 | 
            -
             * Combine up to two event callbacks into a single function that calls them in order
         | 
| 214 | 
            -
             */
         | 
| 215 | 
            -
             | 
| 216 | 
            -
            const useMergedCallbacks = (callback1, callback2) => {
         | 
| 217 | 
            -
              return React.useCallback(ev => {
         | 
| 218 | 
            -
                callback1 === null || callback1 === void 0 ? void 0 : callback1(ev);
         | 
| 219 | 
            -
                callback2 === null || callback2 === void 0 ? void 0 : callback2(ev);
         | 
| 220 | 
            -
              }, [callback1, callback2]);
         | 
| 221 | 
            -
            };
         | 
| 206 | 
            +
            exports.useTooltip_unstable = useTooltip_unstable;
         | 
| 222 207 | 
             
            //# sourceMappingURL=useTooltip.js.map
         | 
| @@ -1 +1 @@ | |
| 1 | 
            -
            {"version":3,"sources":["../../../src/components/Tooltip/useTooltip.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;; | 
| 1 | 
            +
            {"version":3,"sources":["../../../src/components/Tooltip/useTooltip.tsx"],"names":[],"mappings":"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","sourceRoot":""}
         | 
| @@ -3,4 +3,4 @@ export declare const tooltipClassName = "fui-Tooltip"; | |
| 3 3 | 
             
            /**
         | 
| 4 4 | 
             
             * Apply styling to the Tooltip slots based on the state
         | 
| 5 5 | 
             
             */
         | 
| 6 | 
            -
            export declare const  | 
| 6 | 
            +
            export declare const useTooltipStyles_unstable: (state: TooltipState) => TooltipState;
         | 
| @@ -3,9 +3,9 @@ | |
| 3 3 | 
             
            Object.defineProperty(exports, "__esModule", {
         | 
| 4 4 | 
             
              value: true
         | 
| 5 5 | 
             
            });
         | 
| 6 | 
            -
            exports. | 
| 6 | 
            +
            exports.useTooltipStyles_unstable = exports.tooltipClassName = void 0;
         | 
| 7 7 |  | 
| 8 | 
            -
            const  | 
| 8 | 
            +
            const react_1 = /*#__PURE__*/require("@griffel/react");
         | 
| 9 9 |  | 
| 10 10 | 
             
            const react_positioning_1 = /*#__PURE__*/require("@fluentui/react-positioning");
         | 
| 11 11 |  | 
| @@ -18,7 +18,7 @@ exports.tooltipClassName = 'fui-Tooltip'; | |
| 18 18 | 
             
             * Styles for the tooltip
         | 
| 19 19 | 
             
             */
         | 
| 20 20 |  | 
| 21 | 
            -
            const useStyles = /*#__PURE__*/ | 
| 21 | 
            +
            const useStyles = /*#__PURE__*/react_1.__styles({
         | 
| 22 22 | 
             
              "root": {
         | 
| 23 23 | 
             
                "mc9l5x": "fjseox",
         | 
| 24 24 | 
             
                "B7ck84d": "f1ewtqcl",
         | 
| @@ -97,12 +97,12 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({ | |
| 97 97 | 
             
             */
         | 
| 98 98 |  | 
| 99 99 |  | 
| 100 | 
            -
            const  | 
| 100 | 
            +
            const useTooltipStyles_unstable = state => {
         | 
| 101 101 | 
             
              const styles = useStyles();
         | 
| 102 | 
            -
              state. | 
| 102 | 
            +
              state.content.className = react_1.mergeClasses(exports.tooltipClassName, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);
         | 
| 103 103 | 
             
              state.arrowClassName = styles.arrow;
         | 
| 104 104 | 
             
              return state;
         | 
| 105 105 | 
             
            };
         | 
| 106 106 |  | 
| 107 | 
            -
            exports. | 
| 107 | 
            +
            exports.useTooltipStyles_unstable = useTooltipStyles_unstable;
         | 
| 108 108 | 
             
            //# sourceMappingURL=useTooltipStyles.js.map
         | 
| @@ -1 +1 @@ | |
| 1 | 
            -
            {"version":3,"sources":["../../../src/components/Tooltip/useTooltipStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA, | 
| 1 | 
            +
            {"version":3,"sources":["../../../src/components/Tooltip/useTooltipStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AAGa,OAAA,CAAA,gBAAA,GAAmB,aAAnB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAkCA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAAsC;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,OAAA,CAAA,YAAA,CACxB,OAAA,CAAA,gBADwB,EAExB,MAAM,CAAC,IAFiB,EAGxB,KAAK,CAAC,UAAN,KAAqB,UAArB,IAAmC,MAAM,CAAC,QAHlB,EAIxB,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,OAJA,EAKxB,KAAK,CAAC,OAAN,CAAc,SALU,CAA1B;AAQA,EAAA,KAAK,CAAC,cAAN,GAAuB,MAAM,CAAC,KAA9B;AAEA,SAAO,KAAP;AACD,CAdM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourceRoot":""}
         | 
    
        package/package.json
    CHANGED
    
    | @@ -1,6 +1,6 @@ | |
| 1 1 | 
             
            {
         | 
| 2 2 | 
             
              "name": "@fluentui/react-tooltip",
         | 
| 3 | 
            -
              "version": "0.0.0- | 
| 3 | 
            +
              "version": "0.0.0-nightlyd80c90385320220216.1",
         | 
| 4 4 | 
             
              "description": "React components for building web experiences",
         | 
| 5 5 | 
             
              "main": "lib-commonjs/index.js",
         | 
| 6 6 | 
             
              "module": "lib/index.js",
         | 
| @@ -26,11 +26,9 @@ | |
| 26 26 | 
             
                "type-check": "tsc -b tsconfig.json"
         | 
| 27 27 | 
             
              },
         | 
| 28 28 | 
             
              "devDependencies": {
         | 
| 29 | 
            -
                "@fluentui/babel-make-styles": "0.0.0-nightlyd514b3e0ee20220121.1",
         | 
| 30 29 | 
             
                "@fluentui/eslint-plugin": "*",
         | 
| 31 | 
            -
                "@fluentui/jest-serializer-make-styles": "0.0.0-nightlyd514b3e0ee20220121.1",
         | 
| 32 30 | 
             
                "@fluentui/react-conformance": "*",
         | 
| 33 | 
            -
                "@fluentui/react-conformance- | 
| 31 | 
            +
                "@fluentui/react-conformance-griffel": "0.0.0-nightlyd80c90385320220216.1",
         | 
| 34 32 | 
             
                "@fluentui/scripts": "^1.0.0",
         | 
| 35 33 | 
             
                "@types/enzyme": "3.10.3",
         | 
| 36 34 | 
             
                "@types/enzyme-adapter-react-16": "1.0.3",
         | 
| @@ -44,12 +42,12 @@ | |
| 44 42 | 
             
                "react-test-renderer": "^16.3.0"
         | 
| 45 43 | 
             
              },
         | 
| 46 44 | 
             
              "dependencies": {
         | 
| 47 | 
            -
                "@fluentui/react- | 
| 48 | 
            -
                "@fluentui/react- | 
| 49 | 
            -
                "@fluentui/react- | 
| 50 | 
            -
                "@fluentui/react- | 
| 51 | 
            -
                "@fluentui/react- | 
| 52 | 
            -
                "@ | 
| 45 | 
            +
                "@fluentui/react-portal": "0.0.0-nightlyd80c90385320220216.1",
         | 
| 46 | 
            +
                "@fluentui/react-positioning": "0.0.0-nightlyd80c90385320220216.1",
         | 
| 47 | 
            +
                "@fluentui/react-shared-contexts": "0.0.0-nightlyd80c90385320220216.1",
         | 
| 48 | 
            +
                "@fluentui/react-theme": "0.0.0-nightlyd80c90385320220216.1",
         | 
| 49 | 
            +
                "@fluentui/react-utilities": "0.0.0-nightlyd80c90385320220216.1",
         | 
| 50 | 
            +
                "@griffel/react": "1.0.0",
         | 
| 53 51 | 
             
                "tslib": "^2.1.0"
         | 
| 54 52 | 
             
              },
         | 
| 55 53 | 
             
              "peerDependencies": {
         |