@fluentui/react-infobutton 9.0.0-beta.8 → 9.0.0-beta.81

package/lib-commonjs/components/InfoButton/renderInfoButton.js

@@ -1,27 +1,24 @@
-"use strict";
-
+/* eslint-disable deprecation/deprecation */ "use strict";
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.renderInfoButton_unstable = void 0;
-const React = /*#__PURE__*/require("react");
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-const react_popover_1 = /*#__PURE__*/require("@fluentui/react-popover");
-/**
- * Render the final JSX of InfoButton
- */
-const renderInfoButton_unstable = state => {
-  const {
-    slots,
-    slotProps
-  } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.popover, {
-    ...slotProps.popover
-  }, React.createElement(react_popover_1.PopoverTrigger, null, React.createElement(slots.root, {
-    ...slotProps.root
-  })), React.createElement(slots.content, {
-    ...slotProps.content
-  }));
+Object.defineProperty(exports, "renderInfoButton_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderInfoButton_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reactpopover = require("@fluentui/react-popover");
+const renderInfoButton_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.popover, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactpopover.PopoverTrigger, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(state.info, {})
+        ]
+    });
 };
-exports.renderInfoButton_unstable = renderInfoButton_unstable;
-//# sourceMappingURL=renderInfoButton.js.map

package/lib-commonjs/components/InfoButton/renderInfoButton.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAIA;;;AAGO,MAAMA,yBAAyB,GAAIC,KAAsB,IAAI;EAClE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAkBH,KAAK,CAAC;EAE7D,OACEI,oBAACH,KAAK,CAACI,OAAO;IAAA,GAAMH,SAAS,CAACG;EAAwB,GACpDD,oBAACE,8BAAc,QACbF,oBAACH,KAAK,CAACM,IAAI;IAAA,GAAKL,SAAS,CAACK;EAAI,EAAI,CACnB,EACjBH,oBAACH,KAAK,CAACO,OAAO;IAAA,GAAKN,SAAS,CAACM;EAAO,EAAI,CAC1B;AAEpB,CAAC;AAXYC,iCAAyB","names":["renderInfoButton_unstable","state","slots","slotProps","react_utilities_1","React","popover","react_popover_1","root","content","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/renderInfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { PopoverProps } from '@fluentui/react-popover';\nimport type { InfoButtonState, InfoButtonSlots } from './InfoButton.types';\n\n/**\n * Render the final JSX of InfoButton\n */\nexport const renderInfoButton_unstable = (state: InfoButtonState) => {\n  const { slots, slotProps } = getSlots<InfoButtonSlots>(state);\n\n  return (\n    <slots.popover {...(slotProps.popover as PopoverProps)}>\n      <PopoverTrigger>\n        <slots.root {...slotProps.root} />\n      </PopoverTrigger>\n      <slots.content {...slotProps.content} />\n    </slots.popover>\n  );\n};\n"]}
+{"version":3,"sources":["renderInfoButton.js"],"sourcesContent":["/* eslint-disable deprecation/deprecation */   import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\n/**\n * Render the final JSX of InfoButton\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */ export const renderInfoButton_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsxs(state.popover, {\n        children: [\n            /*#__PURE__*/ _jsx(PopoverTrigger, {\n                children: /*#__PURE__*/ _jsx(state.root, {})\n            }),\n            /*#__PURE__*/ _jsx(state.info, {})\n        ]\n    });\n};\n"],"names":["renderInfoButton_unstable","state","assertSlots","_jsxs","popover","children","_jsx","PopoverTrigger","root","info"],"mappings":"AAAA,0CAA0C;;;;+BAOzBA;;;eAAAA;;;4BAPyE;gCAC9D;8BACG;AAKpB,MAAMA,4BAA4B,CAACC;IAC1CC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,gBAAK,EAACF,MAAMG,OAAO,EAAE;QACtCC,UAAU;YACN,WAAW,GAAGC,IAAAA,eAAI,EAACC,4BAAc,EAAE;gBAC/BF,UAAU,WAAW,GAAGC,IAAAA,eAAI,EAACL,MAAMO,IAAI,EAAE,CAAC;YAC9C;YACA,WAAW,GAAGF,IAAAA,eAAI,EAACL,MAAMQ,IAAI,EAAE,CAAC;SACnC;IACL;AACJ"}

package/lib-commonjs/components/InfoButton/useInfoButton.js

@@ -1,73 +1,87 @@
-"use strict";
-
+/* eslint-disable deprecation/deprecation */ "use strict";
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.useInfoButton_unstable = void 0;
-const React = /*#__PURE__*/require("react");
-const DefaultInfoButtonIcons_1 = /*#__PURE__*/require("./DefaultInfoButtonIcons");
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-const react_popover_1 = /*#__PURE__*/require("@fluentui/react-popover");
-const react_utilities_2 = /*#__PURE__*/require("@fluentui/react-utilities");
+Object.defineProperty(exports, "useInfoButton_unstable", {
+    enumerable: true,
+    get: function() {
+        return useInfoButton_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _DefaultInfoButtonIcons = require("./DefaultInfoButtonIcons");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reactpopover = require("@fluentui/react-popover");
 const infoButtonIconMap = {
-  small: /*#__PURE__*/React.createElement(DefaultInfoButtonIcons_1.DefaultInfoButtonIcon12, null),
-  medium: /*#__PURE__*/React.createElement(DefaultInfoButtonIcons_1.DefaultInfoButtonIcon16, null),
-  large: /*#__PURE__*/React.createElement(DefaultInfoButtonIcons_1.DefaultInfoButtonIcon20, null)
+    small: /*#__PURE__*/ _react.createElement(_DefaultInfoButtonIcons.DefaultInfoButtonIcon12, null),
+    medium: /*#__PURE__*/ _react.createElement(_DefaultInfoButtonIcons.DefaultInfoButtonIcon16, null),
+    large: /*#__PURE__*/ _react.createElement(_DefaultInfoButtonIcons.DefaultInfoButtonIcon20, null)
 };
 const popoverSizeMap = {
-  small: 'small',
-  medium: 'small',
-  large: 'medium'
+    small: 'small',
+    medium: 'small',
+    large: 'medium'
 };
-/**
- * Create the state required to render InfoButton.
- *
- * The returned state can be modified with hooks such as useInfoButtonStyles_unstable,
- * before being passed to renderInfoButton_unstable.
- *
- * @param props - props from this instance of InfoButton
- * @param ref - reference to root HTMLElement of InfoButton
- */
-const useInfoButton_unstable = (props, ref) => {
-  const {
-    size = 'medium'
-  } = props;
-  const state = {
-    size,
-    components: {
-      root: 'button',
-      popover: react_popover_1.Popover,
-      content: react_popover_1.PopoverSurface
-    },
-    root: react_utilities_1.getNativeElementProps('button', {
-      children: infoButtonIconMap[size],
-      type: 'button',
-      ...props,
-      ref
-    }),
-    popover: react_utilities_1.resolveShorthand(props.popover, {
-      required: true,
-      defaultProps: {
-        positioning: 'above-start',
-        size: popoverSizeMap[size],
-        withArrow: true
-      }
-    }),
-    content: react_utilities_1.resolveShorthand(props.content, {
-      required: true,
-      defaultProps: {
-        role: 'note'
-      }
-    })
-  };
-  const [popoverOpen, setPopoverOpen] = react_utilities_2.useControllableState({
-    state: state.popover.open,
-    defaultState: state.popover.defaultOpen,
-    initialState: false
-  });
-  state.popover.open = popoverOpen;
-  state.popover.onOpenChange = react_utilities_1.mergeCallbacks(state.popover.onOpenChange, (e, data) => setPopoverOpen(data.open));
-  return state;
+const useInfoButton_unstable = (props, ref)=>{
+    const { size = 'medium', inline = true } = props;
+    const state = {
+        inline,
+        size,
+        components: {
+            root: 'button',
+            popover: _reactpopover.Popover,
+            info: _reactpopover.PopoverSurface
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('button', {
+            children: infoButtonIconMap[size],
+            type: 'button',
+            'aria-label': 'information',
+            ...props,
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref
+        }), {
+            elementType: 'button'
+        }),
+        popover: _reactutilities.slot.always(props.popover, {
+            defaultProps: {
+                inline,
+                positioning: 'above-start',
+                size: popoverSizeMap[size],
+                withArrow: true
+            },
+            elementType: _reactpopover.Popover
+        }),
+        info: _reactutilities.slot.always(props.info, {
+            defaultProps: {
+                role: 'note',
+                tabIndex: -1
+            },
+            elementType: _reactpopover.PopoverSurface
+        })
+    };
+    const [popoverOpen, setPopoverOpen] = (0, _reactutilities.useControllableState)({
+        state: state.popover.open,
+        defaultState: state.popover.defaultOpen,
+        initialState: false
+    });
+    state.popover.open = popoverOpen;
+    state.popover.onOpenChange = (0, _reactutilities.mergeCallbacks)(state.popover.onOpenChange, (e, data)=>setPopoverOpen(data.open));
+    const focusOutRef = _react.useCallback((el)=>{
+        if (!el) {
+            return;
+        }
+        el.addEventListener('focusout', (e)=>{
+            const nextFocused = e.relatedTarget;
+            if ((0, _reactutilities.isHTMLElement)(nextFocused) && !(0, _reactutilities.elementContains)(el, nextFocused)) {
+                setPopoverOpen(false);
+            }
+        });
+    }, [
+        setPopoverOpen
+    ]);
+    state.info.ref = (0, _reactutilities.useMergedRefs)(state.info.ref, focusOutRef);
+    return state;
 };
-exports.useInfoButton_unstable = useInfoButton_unstable;
-//# sourceMappingURL=useInfoButton.js.map

package/lib-commonjs/components/InfoButton/useInfoButton.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAIA,MAAMA,iBAAiB,GAAG;EACxBC,KAAK,eAAEC,oBAACC,gDAAuB,OAAG;EAClCC,MAAM,eAAEF,oBAACC,gDAAuB,OAAG;EACnCE,KAAK,eAAEH,oBAACC,gDAAuB;CACvB;AAEV,MAAMG,cAAc,GAAG;EACrBL,KAAK,EAAE,OAAO;EACdG,MAAM,EAAE,OAAO;EACfC,KAAK,EAAE;CACC;AAEV;;;;;;;;;AASO,MAAME,sBAAsB,GAAG,CAACC,KAAsB,EAAEC,GAA2B,KAAqB;EAC7G,MAAM;IAAEC,IAAI,GAAG;EAAQ,CAAE,GAAGF,KAAK;EAEjC,MAAMG,KAAK,GAAoB;IAC7BD,IAAI;IAEJE,UAAU,EAAE;MACVC,IAAI,EAAE,QAAQ;MACdC,OAAO,EAAEC,uBAA0C;MACnDC,OAAO,EAAED;KACV;IAEDF,IAAI,EAAEI,uCAAqB,CAAC,QAAQ,EAAE;MACpCC,QAAQ,EAAElB,iBAAiB,CAACU,IAAI,CAAC;MACjCS,IAAI,EAAE,QAAQ;MACd,GAAGX,KAAK;MACRC;KACD,CAAC;IACFK,OAAO,EAAEG,kCAAgB,CAACT,KAAK,CAACM,OAAO,EAAE;MACvCM,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZC,WAAW,EAAE,aAAa;QAC1BZ,IAAI,EAAEJ,cAAc,CAACI,IAAI,CAAC;QAC1Ba,SAAS,EAAE;;KAEd,CAAC;IACFP,OAAO,EAAEC,kCAAgB,CAACT,KAAK,CAACQ,OAAO,EAAE;MACvCI,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZG,IAAI,EAAE;;KAET;GACF;EAED,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGC,sCAAoB,CAAC;IACzDhB,KAAK,EAAEA,KAAK,CAACG,OAAO,CAACc,IAAI;IACzBC,YAAY,EAAElB,KAAK,CAACG,OAAO,CAACgB,WAAW;IACvCC,YAAY,EAAE;GACf,CAAC;EAEFpB,KAAK,CAACG,OAAO,CAACc,IAAI,GAAGH,WAAW;EAChCd,KAAK,CAACG,OAAO,CAACkB,YAAY,GAAGf,gCAAc,CAACN,KAAK,CAACG,OAAO,CAACkB,YAAY,EAAE,CAACC,CAAC,EAAEC,IAAI,KAAKR,cAAc,CAACQ,IAAI,CAACN,IAAI,CAAC,CAAC;EAE/G,OAAOjB,KAAK;AACd,CAAC;AA5CYwB,8BAAsB","names":["infoButtonIconMap","small","React","DefaultInfoButtonIcons_1","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","state","components","root","popover","react_popover_1","content","react_utilities_1","children","type","required","defaultProps","positioning","withArrow","role","popoverOpen","setPopoverOpen","react_utilities_2","open","defaultState","defaultOpen","initialState","onOpenChange","e","data","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport type { InfoButtonProps, InfoButtonState } from './InfoButton.types';\nimport type { PopoverProps } from '@fluentui/react-popover';\n\nconst infoButtonIconMap = {\n  small: <DefaultInfoButtonIcon12 />,\n  medium: <DefaultInfoButtonIcon16 />,\n  large: <DefaultInfoButtonIcon20 />,\n} as const;\n\nconst popoverSizeMap = {\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n} as const;\n\n/**\n * Create the state required to render InfoButton.\n *\n * The returned state can be modified with hooks such as useInfoButtonStyles_unstable,\n * before being passed to renderInfoButton_unstable.\n *\n * @param props - props from this instance of InfoButton\n * @param ref - reference to root HTMLElement of InfoButton\n */\nexport const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLElement>): InfoButtonState => {\n  const { size = 'medium' } = props;\n\n  const state: InfoButtonState = {\n    size,\n\n    components: {\n      root: 'button',\n      popover: Popover as React.FC<Partial<PopoverProps>>,\n      content: PopoverSurface,\n    },\n\n    root: getNativeElementProps('button', {\n      children: infoButtonIconMap[size],\n      type: 'button',\n      ...props,\n      ref,\n    }),\n    popover: resolveShorthand(props.popover, {\n      required: true,\n      defaultProps: {\n        positioning: 'above-start',\n        size: popoverSizeMap[size],\n        withArrow: true,\n      },\n    }),\n    content: resolveShorthand(props.content, {\n      required: true,\n      defaultProps: {\n        role: 'note',\n      },\n    }),\n  };\n\n  const [popoverOpen, setPopoverOpen] = useControllableState({\n    state: state.popover.open,\n    defaultState: state.popover.defaultOpen,\n    initialState: false,\n  });\n\n  state.popover.open = popoverOpen;\n  state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data) => setPopoverOpen(data.open));\n\n  return state;\n};\n"]}
+{"version":3,"sources":["useInfoButton.js"],"sourcesContent":["/* eslint-disable deprecation/deprecation */ import * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport { getIntrinsicElementProps, mergeCallbacks, useControllableState, slot, useMergedRefs, isHTMLElement, elementContains } from '@fluentui/react-utilities';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nconst infoButtonIconMap = {\n    small: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon12, null),\n    medium: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon16, null),\n    large: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon20, null)\n};\nconst popoverSizeMap = {\n    small: 'small',\n    medium: 'small',\n    large: 'medium'\n};\n/**\n * Create the state required to render InfoButton.\n *\n * The returned state can be modified with hooks such as useInfoButtonStyles_unstable,\n * before being passed to renderInfoButton_unstable.\n *\n * @param props - props from this instance of InfoButton\n * @param ref - reference to root HTMLElement of InfoButton\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */ export const useInfoButton_unstable = (props, ref)=>{\n    const { size = 'medium', inline = true } = props;\n    const state = {\n        inline,\n        size,\n        components: {\n            root: 'button',\n            popover: Popover,\n            info: PopoverSurface\n        },\n        root: slot.always(getIntrinsicElementProps('button', {\n            children: infoButtonIconMap[size],\n            type: 'button',\n            'aria-label': 'information',\n            ...props,\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: ref\n        }), {\n            elementType: 'button'\n        }),\n        popover: slot.always(props.popover, {\n            defaultProps: {\n                inline,\n                positioning: 'above-start',\n                size: popoverSizeMap[size],\n                withArrow: true\n            },\n            elementType: Popover\n        }),\n        info: slot.always(props.info, {\n            defaultProps: {\n                role: 'note',\n                tabIndex: -1\n            },\n            elementType: PopoverSurface\n        })\n    };\n    const [popoverOpen, setPopoverOpen] = useControllableState({\n        state: state.popover.open,\n        defaultState: state.popover.defaultOpen,\n        initialState: false\n    });\n    state.popover.open = popoverOpen;\n    state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data)=>setPopoverOpen(data.open));\n    const focusOutRef = React.useCallback((el)=>{\n        if (!el) {\n            return;\n        }\n        el.addEventListener('focusout', (e)=>{\n            const nextFocused = e.relatedTarget;\n            if (isHTMLElement(nextFocused) && !elementContains(el, nextFocused)) {\n                setPopoverOpen(false);\n            }\n        });\n    }, [\n        setPopoverOpen\n    ]);\n    state.info.ref = useMergedRefs(state.info.ref, focusOutRef);\n    return state;\n};\n"],"names":["useInfoButton_unstable","infoButtonIconMap","small","React","createElement","DefaultInfoButtonIcon12","medium","DefaultInfoButtonIcon16","large","DefaultInfoButtonIcon20","popoverSizeMap","props","ref","size","inline","state","components","root","popover","Popover","info","PopoverSurface","slot","always","getIntrinsicElementProps","children","type","elementType","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","useControllableState","open","defaultState","defaultOpen","initialState","onOpenChange","mergeCallbacks","e","data","focusOutRef","useCallback","el","addEventListener","nextFocused","relatedTarget","isHTMLElement","elementContains","useMergedRefs"],"mappings":"AAAA,0CAA0C;;;;+BAwBzBA;;;eAAAA;;;;iEAxBmD;wCACsB;gCAC0C;8BAC5F;AACxC,MAAMC,oBAAoB;IACtBC,OAAO,WAAW,GAAGC,OAAMC,aAAa,CAACC,+CAAuB,EAAE;IAClEC,QAAQ,WAAW,GAAGH,OAAMC,aAAa,CAACG,+CAAuB,EAAE;IACnEC,OAAO,WAAW,GAAGL,OAAMC,aAAa,CAACK,+CAAuB,EAAE;AACtE;AACA,MAAMC,iBAAiB;IACnBR,OAAO;IACPI,QAAQ;IACRE,OAAO;AACX;AAWW,MAAMR,yBAAyB,CAACW,OAAOC;IAC9C,MAAM,EAAEC,OAAO,QAAQ,EAAEC,SAAS,IAAI,EAAE,GAAGH;IAC3C,MAAMI,QAAQ;QACVD;QACAD;QACAG,YAAY;YACRC,MAAM;YACNC,SAASC,qBAAO;YAChBC,MAAMC,4BAAc;QACxB;QACAJ,MAAMK,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,UAAU;YACjDC,UAAUxB,iBAAiB,CAACY,KAAK;YACjCa,MAAM;YACN,cAAc;YACd,GAAGf,KAAK;YACR,SAAS;YACT,+EAA+E;YAC/E,4FAA4F;YAC5FC,KAAKA;QACT,IAAI;YACAe,aAAa;QACjB;QACAT,SAASI,oBAAI,CAACC,MAAM,CAACZ,MAAMO,OAAO,EAAE;YAChCU,cAAc;gBACVd;gBACAe,aAAa;gBACbhB,MAAMH,cAAc,CAACG,KAAK;gBAC1BiB,WAAW;YACf;YACAH,aAAaR,qBAAO;QACxB;QACAC,MAAME,oBAAI,CAACC,MAAM,CAACZ,MAAMS,IAAI,EAAE;YAC1BQ,cAAc;gBACVG,MAAM;gBACNC,UAAU,CAAC;YACf;YACAL,aAAaN,4BAAc;QAC/B;IACJ;IACA,MAAM,CAACY,aAAaC,eAAe,GAAGC,IAAAA,oCAAoB,EAAC;QACvDpB,OAAOA,MAAMG,OAAO,CAACkB,IAAI;QACzBC,cAActB,MAAMG,OAAO,CAACoB,WAAW;QACvCC,cAAc;IAClB;IACAxB,MAAMG,OAAO,CAACkB,IAAI,GAAGH;IACrBlB,MAAMG,OAAO,CAACsB,YAAY,GAAGC,IAAAA,8BAAc,EAAC1B,MAAMG,OAAO,CAACsB,YAAY,EAAE,CAACE,GAAGC,OAAOT,eAAeS,KAAKP,IAAI;IAC3G,MAAMQ,cAAczC,OAAM0C,WAAW,CAAC,CAACC;QACnC,IAAI,CAACA,IAAI;YACL;QACJ;QACAA,GAAGC,gBAAgB,CAAC,YAAY,CAACL;YAC7B,MAAMM,cAAcN,EAAEO,aAAa;YACnC,IAAIC,IAAAA,6BAAa,EAACF,gBAAgB,CAACG,IAAAA,+BAAe,EAACL,IAAIE,cAAc;gBACjEd,eAAe;YACnB;QACJ;IACJ,GAAG;QACCA;KACH;IACDnB,MAAMK,IAAI,CAACR,GAAG,GAAGwC,IAAAA,6BAAa,EAACrC,MAAMK,IAAI,CAACR,GAAG,EAAEgC;IAC/C,OAAO7B;AACX"}

package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.js

@@ -0,0 +1,376 @@
+/* eslint-disable deprecation/deprecation */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    infoButtonClassNames: function() {
+        return infoButtonClassNames;
+    },
+    useInfoButtonStyles_unstable: function() {
+        return useInfoButtonStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const infoButtonClassNames = {
+    root: 'fui-InfoButton',
+    // this className won't be used, but it's needed to satisfy the type checker
+    popover: 'fui-InfoButton__popover',
+    info: 'fui-InfoButton__info'
+};
+/**
+ * Styles for the root slot
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
+ */ const useButtonStyles = /*#__PURE__*/ (0, _react.__styles)({
+    base: {
+        Bt984gj: "f122n59",
+        B7ck84d: "f1ewtqcl",
+        mc9l5x: "ftuwxu6",
+        Brf1p80: "f4d9j23",
+        w71qe1: "f1iuv45f",
+        ha4doy: "fmrv4ls",
+        qhf8xq: "f10pi13n",
+        De3pzq: "f1c21dwh",
+        sj55zd: "fkfq4zb",
+        icvyot: "f1ern45e",
+        vrafjx: [
+            "f1n71otn",
+            "f1deefiw"
+        ],
+        oivjwe: "f1h8hb77",
+        wvpqe5: [
+            "f1deefiw",
+            "f1n71otn"
+        ],
+        Bbmb7ep: [
+            "f1aa9q02",
+            "f16jpd5f"
+        ],
+        Beyfa6y: [
+            "f16jpd5f",
+            "f1aa9q02"
+        ],
+        B7oj6ja: [
+            "f1jar5jt",
+            "fyu767a"
+        ],
+        Btl43ni: [
+            "fyu767a",
+            "f1jar5jt"
+        ],
+        B6of3ja: "f1hu3pq6",
+        t21cq0: [
+            "f11qmguv",
+            "f1tyq0we"
+        ],
+        jrapky: "f19f4twv",
+        Frg6f3: [
+            "f1tyq0we",
+            "f11qmguv"
+        ],
+        z8tnut: "f1ywm7hm",
+        z189sj: [
+            "f7x41pl",
+            "fruq291"
+        ],
+        Byoj8tv: "f14wxoun",
+        uwmqm3: [
+            "fruq291",
+            "f7x41pl"
+        ],
+        D0sxk3: "f16u1re",
+        t6yez3: "f1rw4040",
+        Jwef8y: "fjxutwb",
+        Bi91k9c: "f139oj5f",
+        eoavqd: "f8491dx",
+        Bk3fhr4: "f1jpd6y0",
+        Bmfj8id: "fuxngvv",
+        iro3zm: "fwiml72",
+        B2d53fq: "f1fg1p5m"
+    },
+    selected: {
+        De3pzq: "f1q9pm1r",
+        sj55zd: "f1qj7y59",
+        D0sxk3: "fgzdkf0",
+        t6yez3: "f15q0o9g",
+        Bsw6fvg: "f1rirnrt",
+        Bbusuzp: "f1cg6951"
+    },
+    highContrast: {
+        Bbusuzp: "fn0tkbb",
+        Bs6v0vm: "f1rp3av6",
+        B46dtvo: "f1u7gwqv",
+        gh1jta: "fl6kagl"
+    },
+    focusIndicator: {
+        Brovlpu: "ftqa4ok",
+        B486eqv: "f2hkw1w",
+        B8q5s1w: "f8hki3x",
+        Bci5o5g: [
+            "f1d2448m",
+            "ffh67wi"
+        ],
+        n8qw10: "f1bjia2o",
+        Bdrgwmp: [
+            "ffh67wi",
+            "f1d2448m"
+        ],
+        Bb7d1vk: "f226i61",
+        zhwhgb: [
+            "f13kzufm",
+            "fsx75g8"
+        ],
+        dhy2o1: "flujwa2",
+        Gfyso: [
+            "fsx75g8",
+            "f13kzufm"
+        ],
+        Bm4h7ae: "f15bsgw9",
+        B7ys5i9: "f14e48fq",
+        Busjfv9: "f18yb2kv",
+        Bhk32uz: "fd6o370",
+        Bf4ptjt: "fh1cnn4",
+        kclons: [
+            "fy7oxxb",
+            "f184ne2d"
+        ],
+        Bhdgwq3: "fpukqih",
+        Blkhhs4: [
+            "f184ne2d",
+            "fy7oxxb"
+        ],
+        Bqtpl0w: "frrh606",
+        clg4pj: [
+            "f1v5zibi",
+            "fo2hd23"
+        ],
+        hgwjuy: "ful5kiu",
+        Bonggc9: [
+            "fo2hd23",
+            "f1v5zibi"
+        ],
+        B1tsrr9: [
+            "f1jqcqds",
+            "ftffrms"
+        ],
+        Dah5zi: [
+            "ftffrms",
+            "f1jqcqds"
+        ],
+        Bkh64rk: [
+            "f2e7qr6",
+            "fsr1zz6"
+        ],
+        qqdqy8: [
+            "fsr1zz6",
+            "f2e7qr6"
+        ],
+        B6dhp37: "f1dvezut",
+        i03rao: [
+            "fd0oaoj",
+            "f1cwg4i8"
+        ],
+        Boxcth7: "fjvm52t",
+        Bsom6fd: [
+            "f1cwg4i8",
+            "fd0oaoj"
+        ],
+        J0r882: "f57olzd",
+        Bule8hv: [
+            "f4stah7",
+            "fs1por5"
+        ],
+        Bjwuhne: "f480a47",
+        Ghsupd: [
+            "fs1por5",
+            "f4stah7"
+        ]
+    },
+    large: {
+        z8tnut: "fclwglc",
+        z189sj: [
+            "f1w3695s",
+            "f1b0r8ql"
+        ],
+        Byoj8tv: "fywfov9",
+        uwmqm3: [
+            "f1b0r8ql",
+            "f1w3695s"
+        ]
+    }
+}, {
+    d: [
+        ".f122n59{align-items:center;}",
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".ftuwxu6{display:inline-flex;}",
+        ".f4d9j23{justify-content:center;}",
+        ".f1iuv45f{text-decoration-line:none;}",
+        ".fmrv4ls{vertical-align:middle;}",
+        ".f10pi13n{position:relative;}",
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
+        ".fkfq4zb{color:var(--colorNeutralForeground2);}",
+        ".f1ern45e{border-top-style:none;}",
+        ".f1n71otn{border-right-style:none;}",
+        ".f1deefiw{border-left-style:none;}",
+        ".f1h8hb77{border-bottom-style:none;}",
+        ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}",
+        ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}",
+        ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}",
+        ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}",
+        ".f1hu3pq6{margin-top:0;}",
+        ".f11qmguv{margin-right:0;}",
+        ".f1tyq0we{margin-left:0;}",
+        ".f19f4twv{margin-bottom:0;}",
+        ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
+        ".f7x41pl{padding-right:var(--spacingHorizontalXS);}",
+        ".fruq291{padding-left:var(--spacingHorizontalXS);}",
+        ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}",
+        ".f16u1re .fui-Icon-filled{display:none;}",
+        ".f1rw4040 .fui-Icon-regular{display:inline-flex;}",
+        ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}",
+        ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}",
+        ".fgzdkf0 .fui-Icon-filled{display:inline-flex;}",
+        ".f15q0o9g .fui-Icon-regular{display:none;}",
+        ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}",
+        ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}",
+        ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}",
+        ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}",
+        ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}",
+        ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}",
+        ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}",
+        ".fd6o370[data-fui-focus-visible]::after{z-index:1;}",
+        ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}",
+        ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}",
+        ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}",
+        ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}",
+        ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}",
+        ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}",
+        ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}",
+        ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}",
+        ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}",
+        ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}",
+        ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}",
+        ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}",
+        ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}",
+        ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}",
+        ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}",
+        ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}",
+        ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}",
+        ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}",
+        ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}",
+        ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}",
+        ".fclwglc{padding-top:var(--spacingVerticalXXS);}",
+        ".f1w3695s{padding-right:var(--spacingVerticalXXS);}",
+        ".f1b0r8ql{padding-left:var(--spacingVerticalXXS);}",
+        ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}"
+    ],
+    h: [
+        ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}",
+        ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}",
+        ".f8491dx:hover{cursor:pointer;}",
+        ".f1jpd6y0:hover .fui-Icon-filled{display:inline-flex;}",
+        ".fuxngvv:hover .fui-Icon-regular{display:none;}",
+        ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}",
+        ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1cg6951{color:Canvas;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fn0tkbb{color:CanvasText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1rp3av6:hover,.f1rp3av6:hover:active{forced-color-adjust:none;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1u7gwqv:hover,.f1u7gwqv:hover:active{background-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fl6kagl:hover,.fl6kagl:hover:active{color:Canvas;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f226i61[data-fui-focus-visible]::after{border-top-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f13kzufm[data-fui-focus-visible]::after{border-right-color:Highlight;}.fsx75g8[data-fui-focus-visible]::after{border-left-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.flujwa2[data-fui-focus-visible]::after{border-bottom-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ],
+    f: [
+        ".ftqa4ok:focus{outline-style:none;}"
+    ],
+    i: [
+        ".f2hkw1w:focus-visible{outline-style:none;}"
+    ]
+});
+const usePopoverSurfaceStyles = /*#__PURE__*/ (0, _react.__styles)({
+    smallMedium: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fwrc4pm"
+    },
+    large: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi"
+    }
+}, {
+    d: [
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}"
+    ]
+});
+const useInfoButtonStyles_unstable = (state)=>{
+    const { size } = state;
+    const { open } = state.popover;
+    const buttonStyles = useButtonStyles();
+    const popoverSurfaceStyles = usePopoverSurfaceStyles();
+    state.info.className = (0, _react.mergeClasses)(infoButtonClassNames.info, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);
+    state.root.className = (0, _react.mergeClasses)(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
+    return state;
+}; //# sourceMappingURL=useInfoButtonStyles.styles.js.map