@fluentui/react-infobutton 9.0.0-beta.7 → 9.0.0-beta.70

package/lib/components/InfoLabel/useInfoLabel.js

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { Label } from '@fluentui/react-label';
+import { mergeCallbacks, useEventCallback, useId, slot } from '@fluentui/react-utilities';
+import { InfoButton } from '../InfoButton/InfoButton';
+/**
+ * Create the state required to render InfoLabel.
+ *
+ * The returned state can be modified with hooks such as useInfoLabelStyles_unstable,
+ * before being passed to renderInfoLabel_unstable.
+ *
+ * @param props - props from this instance of InfoLabel
+ * @param ref - reference to label element of InfoLabel
+ */ export const useInfoLabel_unstable = (props, ref)=>{
+    const { root: rootShorthand, label: labelShorthand, infoButton: infoButtonShorthand, info, size, className, style, ...labelProps } = props;
+    const baseId = useId('infolabel-');
+    const [open, setOpen] = React.useState(false);
+    const root = slot.always(rootShorthand, {
+        defaultProps: {
+            className,
+            style
+        },
+        elementType: 'span'
+    });
+    const label = slot.always(labelShorthand, {
+        defaultProps: {
+            id: baseId + '__label',
+            ref,
+            size,
+            ...labelProps
+        },
+        elementType: Label
+    });
+    const infoButton = slot.optional(infoButtonShorthand, {
+        renderByDefault: !!info,
+        defaultProps: {
+            id: baseId + '__infoButton',
+            size,
+            info
+        },
+        elementType: InfoButton
+    });
+    const infoButtonPopover = slot.always(infoButton === null || infoButton === void 0 ? void 0 : infoButton.popover, {
+        elementType: 'div'
+    });
+    infoButtonPopover.onOpenChange = useEventCallback(mergeCallbacks(infoButtonPopover.onOpenChange, (e, data)=>{
+        setOpen(data.open);
+    }));
+    if (infoButton) {
+        var _infoButton, _arialabelledby;
+        infoButton.popover = infoButtonPopover;
+        infoButton.info = slot.optional(infoButton === null || infoButton === void 0 ? void 0 : infoButton.info, {
+            defaultProps: {
+                id: baseId + '__info'
+            },
+            elementType: 'div'
+        });
+        var _;
+        (_ = (_infoButton = infoButton)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _infoButton[_arialabelledby] = `${label.id} ${infoButton.id}`;
+        if (open) {
+            var _infoButton_info;
+            var _root, _ariaowns;
+            var _1;
+            (_1 = (_root = root)[_ariaowns = 'aria-owns']) !== null && _1 !== void 0 ? _1 : _root[_ariaowns] = (_infoButton_info = infoButton.info) === null || _infoButton_info === void 0 ? void 0 : _infoButton_info.id;
+        }
+    }
+    return {
+        size,
+        components: {
+            root: 'span',
+            label: Label,
+            infoButton: InfoButton
+        },
+        root,
+        label,
+        infoButton
+    };
+};

package/lib/components/InfoLabel/useInfoLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useInfoLabel.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { Label } from '@fluentui/react-label';\nimport { mergeCallbacks, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { InfoButton } from '../InfoButton/InfoButton';\nimport type { InfoLabelProps, InfoLabelState } from './InfoLabel.types';\n\n/**\n * Create the state required to render InfoLabel.\n *\n * The returned state can be modified with hooks such as useInfoLabelStyles_unstable,\n * before being passed to renderInfoLabel_unstable.\n *\n * @param props - props from this instance of InfoLabel\n * @param ref - reference to label element of InfoLabel\n */\nexport const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref<HTMLLabelElement>): InfoLabelState => {\n  const {\n    root: rootShorthand,\n    label: labelShorthand,\n    infoButton: infoButtonShorthand,\n    info,\n    size,\n    className,\n    style,\n    ...labelProps\n  } = props;\n  const baseId = useId('infolabel-');\n  const [open, setOpen] = React.useState(false);\n\n  const root = slot.always(rootShorthand, {\n    defaultProps: {\n      className,\n      style,\n    },\n    elementType: 'span',\n  });\n\n  const label = slot.always(labelShorthand, {\n    defaultProps: {\n      id: baseId + '__label',\n      ref,\n      size,\n      ...labelProps,\n    },\n    elementType: Label,\n  });\n\n  const infoButton = slot.optional(infoButtonShorthand, {\n    renderByDefault: !!info,\n    defaultProps: {\n      id: baseId + '__infoButton',\n      size,\n      info,\n    },\n    elementType: InfoButton,\n  });\n\n  const infoButtonPopover = slot.always(infoButton?.popover, {\n    elementType: 'div',\n  });\n  infoButtonPopover.onOpenChange = useEventCallback(\n    mergeCallbacks(infoButtonPopover.onOpenChange, (e, data) => {\n      setOpen(data.open);\n    }),\n  );\n\n  if (infoButton) {\n    infoButton.popover = infoButtonPopover;\n    infoButton.info = slot.optional(infoButton?.info, {\n      defaultProps: {\n        id: baseId + '__info',\n      },\n      elementType: 'div',\n    });\n\n    infoButton['aria-labelledby'] ??= `${label.id} ${infoButton.id}`;\n\n    if (open) {\n      root['aria-owns'] ??= infoButton.info?.id;\n    }\n  }\n\n  return {\n    size,\n    components: {\n      root: 'span',\n      label: Label,\n      infoButton: InfoButton,\n    },\n    root,\n    label,\n    infoButton,\n  };\n};\n"],"names":["React","Label","mergeCallbacks","useEventCallback","useId","slot","InfoButton","useInfoLabel_unstable","props","ref","root","rootShorthand","label","labelShorthand","infoButton","infoButtonShorthand","info","size","className","style","labelProps","baseId","open","setOpen","useState","always","defaultProps","elementType","id","optional","renderByDefault","infoButtonPopover","popover","onOpenChange","e","data","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,cAAc,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,UAAU,QAAQ,2BAA2B;AAGtD;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EACJC,MAAMC,aAAa,EACnBC,OAAOC,cAAc,EACrBC,YAAYC,mBAAmB,EAC/BC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,KAAK,EACL,GAAGC,YACJ,GAAGZ;IACJ,MAAMa,SAASjB,MAAM;IACrB,MAAM,CAACkB,MAAMC,QAAQ,GAAGvB,MAAMwB,QAAQ,CAAC;IAEvC,MAAMd,OAAOL,KAAKoB,MAAM,CAACd,eAAe;QACtCe,cAAc;YACZR;YACAC;QACF;QACAQ,aAAa;IACf;IAEA,MAAMf,QAAQP,KAAKoB,MAAM,CAACZ,gBAAgB;QACxCa,cAAc;YACZE,IAAIP,SAAS;YACbZ;YACAQ;YACA,GAAGG,UAAU;QACf;QACAO,aAAa1B;IACf;IAEA,MAAMa,aAAaT,KAAKwB,QAAQ,CAACd,qBAAqB;QACpDe,iBAAiB,CAAC,CAACd;QACnBU,cAAc;YACZE,IAAIP,SAAS;YACbJ;YACAD;QACF;QACAW,aAAarB;IACf;IAEA,MAAMyB,oBAAoB1B,KAAKoB,MAAM,CAACX,uBAAAA,iCAAAA,WAAYkB,OAAO,EAAE;QACzDL,aAAa;IACf;IACAI,kBAAkBE,YAAY,GAAG9B,iBAC/BD,eAAe6B,kBAAkBE,YAAY,EAAE,CAACC,GAAGC;QACjDZ,QAAQY,KAAKb,IAAI;IACnB;IAGF,IAAIR,YAAY;YASdA,aAAW;QARXA,WAAWkB,OAAO,GAAGD;QACrBjB,WAAWE,IAAI,GAAGX,KAAKwB,QAAQ,CAACf,uBAAAA,iCAAAA,WAAYE,IAAI,EAAE;YAChDU,cAAc;gBACZE,IAAIP,SAAS;YACf;YACAM,aAAa;QACf;;QAEAb,MAAAA,cAAAA,WAAU,CAAC,kBAAA,kBAAkB,iCAA7BA,WAAU,CAAC,gBAAkB,GAAK,CAAC,EAAEF,MAAMgB,EAAE,CAAC,CAAC,EAAEd,WAAWc,EAAE,CAAC,CAAC;QAEhE,IAAIN,MAAM;gBACcR;gBAAtBJ,OAAK;;YAALA,OAAAA,QAAAA,KAAI,CAAC,YAAA,YAAY,mCAAjBA,KAAI,CAAC,UAAY,IAAKI,mBAAAA,WAAWE,IAAI,cAAfF,uCAAAA,iBAAiBc,EAAE;QAC3C;IACF;IAEA,OAAO;QACLX;QACAmB,YAAY;YACV1B,MAAM;YACNE,OAAOX;YACPa,YAAYR;QACd;QACAI;QACAE;QACAE;IACF;AACF,EAAE"}

package/lib/components/InfoLabel/useInfoLabelStyles.styles.js

@@ -0,0 +1,43 @@
+import { tokens } from '@fluentui/react-theme';
+import { __styles, mergeClasses } from '@griffel/react';
+export const infoLabelClassNames = {
+  root: 'fui-InfoLabel',
+  label: 'fui-InfoLabel__label',
+  infoButton: 'fui-InfoLabel__infoButton'
+};
+const useLabelStyles = /*#__PURE__*/__styles({
+  base: {
+    ha4doy: "f12kltsn",
+    Bceei9c: "fpo1scq",
+    sj55zd: "f1ym3bx4"
+  }
+}, {
+  d: [".f12kltsn{vertical-align:top;}", ".fpo1scq{cursor:inherit;}", ".f1ym3bx4{color:inherit;}"]
+});
+const useInfoButtonStyles = /*#__PURE__*/__styles({
+  base: {
+    ha4doy: "f12kltsn",
+    B6of3ja: "f1bmzb36",
+    jrapky: "f1nyzk09"
+  },
+  large: {
+    B6of3ja: "fkrn0sh",
+    jrapky: "fmxx68s"
+  }
+}, {
+  d: [".f12kltsn{vertical-align:top;}", ".f1bmzb36{margin-top:calc(0px - var(--spacingVerticalXXS));}", ".f1nyzk09{margin-bottom:calc(0px - var(--spacingVerticalXXS));}", ".fkrn0sh{margin-top:-1px;}", ".fmxx68s{margin-bottom:-1px;}"]
+});
+/**
+ * Apply styling to the InfoLabel slots based on the state
+ */
+export const useInfoLabelStyles_unstable = state => {
+  state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);
+  const labelStyles = useLabelStyles();
+  state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);
+  const infoButtonStyles = useInfoButtonStyles();
+  if (state.infoButton) {
+    state.infoButton.className = mergeClasses(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useInfoLabelStyles.styles.js.map

package/lib/components/InfoLabel/useInfoLabelStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tokens","__styles","mergeClasses","infoLabelClassNames","root","label","infoButton","useLabelStyles","base","ha4doy","Bceei9c","sj55zd","d","useInfoButtonStyles","B6of3ja","jrapky","large","useInfoLabelStyles_unstable","state","className","labelStyles","infoButtonStyles","size"],"sources":["useInfoLabelStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const infoLabelClassNames = {\n    root: 'fui-InfoLabel',\n    label: 'fui-InfoLabel__label',\n    infoButton: 'fui-InfoLabel__infoButton'\n};\nconst useLabelStyles = makeStyles({\n    base: {\n        verticalAlign: 'top',\n        cursor: 'inherit',\n        color: 'inherit'\n    }\n});\nconst useInfoButtonStyles = makeStyles({\n    base: {\n        verticalAlign: 'top',\n        // Negative margin to align with the text\n        marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,\n        marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`\n    },\n    large: {\n        // Negative margin to align with the text\n        marginTop: '-1px',\n        marginBottom: '-1px'\n    }\n});\n/**\n * Apply styling to the InfoLabel slots based on the state\n */ export const useInfoLabelStyles_unstable = (state)=>{\n    state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n    const labelStyles = useLabelStyles();\n    state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n    const infoButtonStyles = useInfoButtonStyles();\n    if (state.infoButton) {\n        state.infoButton.className = mergeClasses(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE,eAAe;EACrBC,KAAK,EAAE,sBAAsB;EAC7BC,UAAU,EAAE;AAChB,CAAC;AACD,MAAMC,cAAc,gBAAGN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMtB,CAAC;AACF,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAK,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAF,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAY3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,2BAA2B,GAAIC,KAAK,IAAG;EACpDA,KAAK,CAACd,IAAI,CAACe,SAAS,GAAGjB,YAAY,CAACC,mBAAmB,CAACC,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACe,SAAS,CAAC;EACnF,MAAMC,WAAW,GAAGb,cAAc,CAAC,CAAC;EACpCW,KAAK,CAACb,KAAK,CAACc,SAAS,GAAGjB,YAAY,CAACC,mBAAmB,CAACE,KAAK,EAAEe,WAAW,CAACZ,IAAI,EAAEU,KAAK,CAACb,KAAK,CAACc,SAAS,CAAC;EACxG,MAAME,gBAAgB,GAAGR,mBAAmB,CAAC,CAAC;EAC9C,IAAIK,KAAK,CAACZ,UAAU,EAAE;IAClBY,KAAK,CAACZ,UAAU,CAACa,SAAS,GAAGjB,YAAY,CAACC,mBAAmB,CAACG,UAAU,EAAEe,gBAAgB,CAACb,IAAI,EAAEU,KAAK,CAACI,IAAI,KAAK,OAAO,IAAID,gBAAgB,CAACL,KAAK,EAAEE,KAAK,CAACZ,UAAU,CAACa,SAAS,CAAC;EAClL;EACA,OAAOD,KAAK;AAChB,CAAC"}

package/lib/index.js

@@ -1,2 +1,2 @@
 export { InfoButton, infoButtonClassNames, renderInfoButton_unstable, useInfoButtonStyles_unstable, useInfoButton_unstable } from './InfoButton';
-//# sourceMappingURL=index.js.map
+export { InfoLabel, infoLabelClassNames, renderInfoLabel_unstable, useInfoLabelStyles_unstable, useInfoLabel_unstable } from './InfoLabel';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,cAAc","names":["InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/index.ts"],"sourcesContent":["export {\n  InfoButton,\n  infoButtonClassNames,\n  renderInfoButton_unstable,\n  useInfoButtonStyles_unstable,\n  useInfoButton_unstable,\n} from './InfoButton';\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton';\n"]}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  InfoButton,\n  infoButtonClassNames,\n  renderInfoButton_unstable,\n  useInfoButtonStyles_unstable,\n  useInfoButton_unstable,\n} from './InfoButton';\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton';\nexport {\n  InfoLabel,\n  infoLabelClassNames,\n  renderInfoLabel_unstable,\n  useInfoLabelStyles_unstable,\n  useInfoLabel_unstable,\n} from './InfoLabel';\nexport type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './InfoLabel';\n"],"names":["InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable","InfoLabel","infoLabelClassNames","renderInfoLabel_unstable","useInfoLabelStyles_unstable","useInfoLabel_unstable"],"mappings":"AAAA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAEtB,SACEC,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,2BAA2B,EAC3BC,qBAAqB,QAChB,cAAc"}

package/lib-commonjs/InfoButton.js

@@ -1,8 +1,6 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-const tslib_1 = /*#__PURE__*/require("tslib");
-tslib_1.__exportStar(require("./components/InfoButton/index"), exports);
-//# sourceMappingURL=InfoButton.js.map
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/InfoButton/index"), exports);

package/lib-commonjs/InfoButton.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/InfoButton.ts"],"sourcesContent":["export * from './components/InfoButton/index';\n"]}
+{"version":3,"sources":["InfoButton.js"],"sourcesContent":["export * from './components/InfoButton/index';\n"],"names":[],"mappings":";;;;;uBAAc"}

package/lib-commonjs/InfoLabel.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/InfoLabel/index"), exports);

package/lib-commonjs/InfoLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InfoLabel.js"],"sourcesContent":["export * from './components/InfoLabel/index';\n"],"names":[],"mappings":";;;;;uBAAc"}

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

@@ -1,11 +1,25 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.DefaultInfoButtonIcon20 = exports.DefaultInfoButtonIcon16 = exports.DefaultInfoButtonIcon12 = void 0;
-const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
-exports.DefaultInfoButtonIcon12 = /*#__PURE__*/react_icons_1.bundleIcon(react_icons_1.Info12Filled, react_icons_1.Info12Regular);
-exports.DefaultInfoButtonIcon16 = /*#__PURE__*/react_icons_1.bundleIcon(react_icons_1.Info16Filled, react_icons_1.Info16Regular);
-exports.DefaultInfoButtonIcon20 = /*#__PURE__*/react_icons_1.bundleIcon(react_icons_1.Info20Filled, react_icons_1.Info20Regular);
-//# sourceMappingURL=DefaultInfoButtonIcons.js.map
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DefaultInfoButtonIcon12: function() {
+        return DefaultInfoButtonIcon12;
+    },
+    DefaultInfoButtonIcon16: function() {
+        return DefaultInfoButtonIcon16;
+    },
+    DefaultInfoButtonIcon20: function() {
+        return DefaultInfoButtonIcon20;
+    }
+});
+const _reacticons = require("@fluentui/react-icons");
+const DefaultInfoButtonIcon12 = (0, _reacticons.bundleIcon)(_reacticons.Info12Filled, _reacticons.Info12Regular);
+const DefaultInfoButtonIcon16 = (0, _reacticons.bundleIcon)(_reacticons.Info16Filled, _reacticons.Info16Regular);
+const DefaultInfoButtonIcon20 = (0, _reacticons.bundleIcon)(_reacticons.Info20Filled, _reacticons.Info20Regular);

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AAUaA,+BAAuB,gBAAGC,wBAAU,CAACA,0BAAY,EAAEA,2BAAa,CAAC;AACjED,+BAAuB,gBAAGC,wBAAU,CAACA,0BAAY,EAAEA,2BAAa,CAAC;AACjED,+BAAuB,gBAAGC,wBAAU,CAACA,0BAAY,EAAEA,2BAAa,CAAC","names":["exports","react_icons_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/DefaultInfoButtonIcons.tsx"],"sourcesContent":["import {\n  Info12Regular,\n  Info12Filled,\n  Info16Regular,\n  Info16Filled,\n  Info20Regular,\n  Info20Filled,\n  bundleIcon,\n} from '@fluentui/react-icons';\n\nexport const DefaultInfoButtonIcon12 = bundleIcon(Info12Filled, Info12Regular);\nexport const DefaultInfoButtonIcon16 = bundleIcon(Info16Filled, Info16Regular);\nexport const DefaultInfoButtonIcon20 = bundleIcon(Info20Filled, Info20Regular);\n"]}
+{"version":3,"sources":["DefaultInfoButtonIcons.js"],"sourcesContent":["import { Info12Regular, Info12Filled, Info16Regular, Info16Filled, Info20Regular, Info20Filled, bundleIcon } from '@fluentui/react-icons';\nexport const DefaultInfoButtonIcon12 = bundleIcon(Info12Filled, Info12Regular);\nexport const DefaultInfoButtonIcon16 = bundleIcon(Info16Filled, Info16Regular);\nexport const DefaultInfoButtonIcon20 = bundleIcon(Info20Filled, Info20Regular);\n"],"names":["DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","bundleIcon","Info12Filled","Info12Regular","Info16Filled","Info16Regular","Info20Filled","Info20Regular"],"mappings":";;;;;;;;;;;IACaA,uBAAuB;eAAvBA;;IACAC,uBAAuB;eAAvBA;;IACAC,uBAAuB;eAAvBA;;;4BAHqG;AAC3G,MAAMF,0BAA0BG,IAAAA,sBAAU,EAACC,wBAAY,EAAEC,yBAAa;AACtE,MAAMJ,0BAA0BE,IAAAA,sBAAU,EAACG,wBAAY,EAAEC,yBAAa;AACtE,MAAML,0BAA0BC,IAAAA,sBAAU,EAACK,wBAAY,EAAEC,yBAAa"}

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

@@ -1,20 +1,21 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.InfoButton = void 0;
-const React = /*#__PURE__*/require("react");
-const renderInfoButton_1 = /*#__PURE__*/require("./renderInfoButton");
-const useInfoButton_1 = /*#__PURE__*/require("./useInfoButton");
-const useInfoButtonStyles_1 = /*#__PURE__*/require("./useInfoButtonStyles");
-/**
- * InfoButtons provide a way to display additional information about a form field or an area in the UI.
- */
-exports.InfoButton = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useInfoButton_1.useInfoButton_unstable(props, ref);
-  useInfoButtonStyles_1.useInfoButtonStyles_unstable(state);
-  return renderInfoButton_1.renderInfoButton_unstable(state);
+Object.defineProperty(exports, "InfoButton", {
+    enumerable: true,
+    get: function() {
+        return InfoButton;
+    }
 });
-exports.InfoButton.displayName = 'InfoButton';
-//# sourceMappingURL=InfoButton.js.map
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _renderInfoButton = require("./renderInfoButton");
+const _useInfoButton = require("./useInfoButton");
+const _useInfoButtonStylesstyles = require("./useInfoButtonStyles.styles");
+const InfoButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useInfoButton.useInfoButton_unstable)(props, ref);
+    (0, _useInfoButtonStylesstyles.useInfoButtonStyles_unstable)(state);
+    return (0, _renderInfoButton.renderInfoButton_unstable)(state);
+});
+InfoButton.displayName = 'InfoButton';

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AAEA;AACA;AACA;AAGA;;;AAGaA,kBAAU,gBAAyCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGC,sCAAsB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEhDG,kDAA4B,CAACF,KAAK,CAAC;EACnC,OAAOG,4CAAyB,CAACH,KAAK,CAAC;AACzC,CAAC,CAAC;AAEFL,kBAAU,CAACS,WAAW,GAAG,YAAY","names":["exports","React","forwardRef","props","ref","state","useInfoButton_1","useInfoButtonStyles_1","renderInfoButton_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderInfoButton_unstable } from './renderInfoButton';\nimport { useInfoButton_unstable } from './useInfoButton';\nimport { useInfoButtonStyles_unstable } from './useInfoButtonStyles';\nimport type { InfoButtonProps } from './InfoButton.types';\n\n/**\n * InfoButtons provide a way to display additional information about a form field or an area in the UI.\n */\nexport const InfoButton: ForwardRefComponent<InfoButtonProps> = React.forwardRef((props, ref) => {\n  const state = useInfoButton_unstable(props, ref);\n\n  useInfoButtonStyles_unstable(state);\n  return renderInfoButton_unstable(state);\n});\n\nInfoButton.displayName = 'InfoButton';\n"]}
+{"version":3,"sources":["InfoButton.js"],"sourcesContent":["import * as React from 'react';\nimport { renderInfoButton_unstable } from './renderInfoButton';\nimport { useInfoButton_unstable } from './useInfoButton';\nimport { useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';\n/**\n * InfoButtons provide a way to display additional information about a form field or an area in the UI.\n */ export const InfoButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useInfoButton_unstable(props, ref);\n    useInfoButtonStyles_unstable(state);\n    return renderInfoButton_unstable(state);\n});\nInfoButton.displayName = 'InfoButton';\n"],"names":["InfoButton","React","forwardRef","props","ref","state","useInfoButton_unstable","useInfoButtonStyles_unstable","renderInfoButton_unstable","displayName"],"mappings":";;;;+BAMiBA;;;eAAAA;;;;iEANM;kCACmB;+BACH;2CACM;AAGlC,MAAMA,aAAa,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjE,MAAMC,QAAQC,IAAAA,qCAAsB,EAACH,OAAOC;IAC5CG,IAAAA,uDAA4B,EAACF;IAC7B,OAAOG,IAAAA,2CAAyB,EAACH;AACrC;AACAL,WAAWS,WAAW,GAAG"}

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

@@ -1,6 +1,4 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-//# sourceMappingURL=InfoButton.types.js.map

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

@@ -1 +1 @@
-{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
+{"version":3,"sources":[],"names":[],"mappings":""}

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

@@ -1,12 +1,10 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-const tslib_1 = /*#__PURE__*/require("tslib");
-tslib_1.__exportStar(require("./InfoButton"), exports);
-tslib_1.__exportStar(require("./InfoButton.types"), exports);
-tslib_1.__exportStar(require("./renderInfoButton"), exports);
-tslib_1.__exportStar(require("./useInfoButton"), exports);
-tslib_1.__exportStar(require("./useInfoButtonStyles"), exports);
-//# sourceMappingURL=index.js.map
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./InfoButton"), exports);
+_export_star._(require("./InfoButton.types"), exports);
+_export_star._(require("./renderInfoButton"), exports);
+_export_star._(require("./useInfoButton"), exports);
+_export_star._(require("./useInfoButtonStyles.styles"), exports);

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/index.ts"],"sourcesContent":["export * from './InfoButton';\nexport * from './InfoButton.types';\nexport * from './renderInfoButton';\nexport * from './useInfoButton';\nexport * from './useInfoButtonStyles';\n"]}
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './InfoButton';\nexport * from './InfoButton.types';\nexport * from './renderInfoButton';\nexport * from './useInfoButton';\nexport * from './useInfoButtonStyles.styles';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

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

@@ -1,27 +1,24 @@
 "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":["  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 */ 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":";;;;+BAKiBA;;;eAAAA;;;4BAL4B;gCACjB;8BACG;AAGpB,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,84 @@
 "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.getNativeElementProps)('button', {
+            children: infoButtonIconMap[size],
+            type: 'button',
+            'aria-label': 'information',
+            ...props,
+            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":["import * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport { getNativeElementProps, 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 */ 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(getNativeElementProps('button', {\n            children: infoButtonIconMap[size],\n            type: 'button',\n            'aria-label': 'information',\n            ...props,\n            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","getNativeElementProps","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":";;;;+BAsBiBA;;;eAAAA;;;;iEAtBM;wCACmE;gCACuC;8BACzF;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;AASW,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,qCAAqB,EAAC,UAAU;YAC9CC,UAAUxB,iBAAiB,CAACY,KAAK;YACjCa,MAAM;YACN,cAAc;YACd,GAAGf,KAAK;YACRC;QACJ,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"}