@pnp/spfx-controls-react 3.16.0-beta.6691242 → 3.16.0-beta.6739476

package/lib/common/telemetry/version.js

@@ -1,2 +1,2 @@
-export var version = "3.16.0-beta.6691242";
+export var version = "3.16.0-beta.6739476";
 //# sourceMappingURL=version.js.map

package/lib/controls/HoverReactionsBar/HoverReactionsBar.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { IHoverReactionsBarProps } from './IHoverReactionsBarProps';
+export declare const HoverReactionsBar: React.FunctionComponent<IHoverReactionsBarProps>;
+//# sourceMappingURL=HoverReactionsBar.d.ts.map

package/lib/controls/HoverReactionsBar/HoverReactionsBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverReactionsBar.d.ts","sourceRoot":"","sources":["../../../src/controls/HoverReactionsBar/HoverReactionsBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CAgB9E,CAAC"}

package/lib/controls/HoverReactionsBar/HoverReactionsBar.js

@@ -0,0 +1,27 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import { useTheme } from '@fluentui/react';
+import { FluentProvider, } from '@fluentui/react-components';
+import { createV9Theme } from '@fluentui/react-migration-v8-v9';
+import { HoverReactionsBarControl, } from './components/hoverReactionbarControl/HoverReactionBarControl';
+export var HoverReactionsBar = function (props) {
+    var themeV8 = props.themeV8;
+    var theme = themeV8 !== null && themeV8 !== void 0 ? themeV8 : useTheme();
+    var setTheme = React.useCallback(function () {
+        return createV9Theme(theme);
+    }, [theme]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FluentProvider, { theme: setTheme() },
+            React.createElement(HoverReactionsBarControl, __assign({}, props)))));
+};
+//# sourceMappingURL=HoverReactionsBar.js.map

package/lib/controls/HoverReactionsBar/HoverReactionsBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverReactionsBar.js","sourceRoot":"","sources":["../../../src/controls/HoverReactionsBar/HoverReactionsBar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EACL,cAAc,GAEf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAEhE,OAAO,EACL,wBAAwB,GACzB,MAAM,8DAA8D,CAAC;AAGtE,MAAM,CAAC,IAAM,iBAAiB,GAAqD,UACjF,KAAuD;IAE/C,IAAA,OAAO,GAAK,KAAK,QAAV,CAAW;IAC1B,IAAM,KAAK,GAAI,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,QAAQ,EAAE,CAAC;IACrC,IAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC;QACjC,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL;QACE,oBAAC,cAAc,IAAC,KAAK,EAAE,QAAQ,EAAE;YAC/B,oBAAC,wBAAwB,eAAK,KAAK,EAAI,CACxB,CAChB,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/lib/controls/HoverReactionsBar/IHoverReactionsBarProps.d.ts

@@ -0,0 +1,11 @@
+import { Theme } from 'office-ui-fabric-react';
+import { IEmojiInfo } from './models/IFluentEmoji';
+export interface IHoverReactionsBarProps {
+    onSelect: (emoji: string | undefined, emojiInfo?: IEmojiInfo) => void;
+    isOpen: boolean;
+    onDismiss: () => void;
+    top4Reactions?: string[];
+    target: HTMLDivElement;
+    themeV8?: Theme;
+}
+//# sourceMappingURL=IHoverReactionsBarProps.d.ts.map

package/lib/controls/HoverReactionsBar/IHoverReactionsBarProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IHoverReactionsBarProps.d.ts","sourceRoot":"","sources":["../../../src/controls/HoverReactionsBar/IHoverReactionsBarProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACtE,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAE;CAClB"}

package/lib/controls/HoverReactionsBar/IHoverReactionsBarProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IHoverReactionsBarProps.js.map

package/lib/controls/HoverReactionsBar/IHoverReactionsBarProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IHoverReactionsBarProps.js","sourceRoot":"","sources":["../../../src/controls/HoverReactionsBar/IHoverReactionsBarProps.ts"],"names":[],"mappings":""}

package/lib/controls/HoverReactionsBar/components/hoverReactionbarControl/HoverReactionBarControl.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { IHoverReactionsBarProps } from '../../IHoverReactionsBarProps';
+export declare const HoverReactionsBarControl: React.FunctionComponent<IHoverReactionsBarProps>;
+//# sourceMappingURL=HoverReactionBarControl.d.ts.map

package/lib/controls/HoverReactionsBar/components/hoverReactionbarControl/HoverReactionBarControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverReactionBarControl.d.ts","sourceRoot":"","sources":["../../../../../src/controls/HoverReactionsBar/components/hoverReactionbarControl/HoverReactionBarControl.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AAMxE,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CAqFrF,CAAC"}

package/lib/controls/HoverReactionsBar/components/hoverReactionbarControl/HoverReactionBarControl.js

@@ -0,0 +1,58 @@
+/* eslint-disable no-unused-expressions */
+/* eslint-disable @rushstack/no-new-null */
+import * as React from 'react';
+import { Card } from '@fluentui/react-components';
+import { Icon } from '@iconify/react';
+import { useFluentEmojis } from '../../hooks/useFluentEmojis';
+import { useOnClickOutside } from '../../hooks/useOnClickOutside';
+import { ReactionPicker } from '../reactionPicker/ReactionPicker';
+import { RenderEmoji } from '../reactionPicker/RenderEmoji';
+import { useHoverReactionsStyles } from './useHoverReactionsStyles';
+export var HoverReactionsBarControl = function (props) {
+    var onSelect = props.onSelect, isOpen = props.isOpen, onDismiss = props.onDismiss, top4Reactions = props.top4Reactions, target = props.target;
+    var _a = React.useState(false), showEmojiPicker = _a[0], setShowEmojiPicker = _a[1];
+    var getFluentEmojiByName = useFluentEmojis().getFluentEmojiByName;
+    var styles = useHoverReactionsStyles();
+    var _b = React.useState([]), renderEmoji = _b[0], setRenderEmoji = _b[1];
+    var defaultTop4Reactions = ["Thumbs up", "Red heart", "grinning face with big eyes", "Face with open mouth"];
+    var toolbarRef = React.useRef(null);
+    var onClose = React.useCallback(function () {
+        onDismiss();
+    }, [onDismiss]);
+    useOnClickOutside(true, toolbarRef, onClose);
+    var loadEmoji = React.useCallback(function () {
+        var topReaction = top4Reactions && (top4Reactions === null || top4Reactions === void 0 ? void 0 : top4Reactions.length) > 0 ? top4Reactions : defaultTop4Reactions;
+        var renderEmoji = [];
+        for (var _i = 0, topReaction_1 = topReaction; _i < topReaction_1.length; _i++) {
+            var emojii = topReaction_1[_i];
+            var emojiInfo = getFluentEmojiByName(emojii);
+            if (emojiInfo) {
+                renderEmoji.push(React.createElement(RenderEmoji, { key: emojii, className: styles.emojiImage, emoji: emojiInfo, onSelect: function (emoji, emojiInfo) {
+                        onSelect(emoji, emojiInfo);
+                    } }));
+            }
+        }
+        renderEmoji.push(React.createElement(Icon, { key: "add", className: styles.emojiImage, icon: "fluent:emoji-add-16-regular", width: 30, height: 30, onClick: function (ev) {
+                ev.preventDefault();
+                ev.stopPropagation();
+                setShowEmojiPicker(true);
+            } }));
+        setRenderEmoji(renderEmoji);
+    }, [getFluentEmojiByName, onSelect, onDismiss, top4Reactions, defaultTop4Reactions]);
+    React.useEffect(function () {
+        setRenderEmoji([]);
+        loadEmoji();
+    }, [isOpen]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Card, { className: styles.card, style: {
+                display: isOpen ? "block" : "none",
+                top: (target === null || target === void 0 ? void 0 : target.offsetTop) - 55,
+                left: target === null || target === void 0 ? void 0 : target.offsetLeft,
+            }, ref: toolbarRef },
+            React.createElement("div", { className: styles.cardContent },
+                React.createElement("div", { className: styles.emojiList }, renderEmoji)),
+            showEmojiPicker && (React.createElement(ReactionPicker, { returnType: "image", isOpen: showEmojiPicker, onDismiss: function () {
+                    setShowEmojiPicker(false);
+                }, onSelect: onSelect, target: toolbarRef === null || toolbarRef === void 0 ? void 0 : toolbarRef.current })))));
+};
+//# sourceMappingURL=HoverReactionBarControl.js.map

package/lib/controls/HoverReactionsBar/components/hoverReactionbarControl/HoverReactionBarControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverReactionBarControl.js","sourceRoot":"","sources":["../../../../../src/controls/HoverReactionsBar/components/hoverReactionbarControl/HoverReactionBarControl.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,2CAA2C;AAC3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAEtC,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAGlE,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,MAAM,CAAC,IAAM,wBAAwB,GAAqD,UACxF,KAAuD;IAE/C,IAAA,QAAQ,GAA8C,KAAK,SAAnD,EAAE,MAAM,GAAsC,KAAK,OAA3C,EAAE,SAAS,GAA2B,KAAK,UAAhC,EAAE,aAAa,GAAY,KAAK,cAAjB,EAAE,MAAM,GAAI,KAAK,OAAT,CAAU;IAC9D,IAAA,KAAwC,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,EAArE,eAAe,QAAA,EAAE,kBAAkB,QAAkC,CAAC;IACrE,IAAA,oBAAoB,GAAK,eAAe,EAAE,qBAAtB,CAAuB;IACnD,IAAM,MAAM,GAAG,uBAAuB,EAAE,CAAC;IACnC,IAAA,KAAgC,KAAK,CAAC,QAAQ,CAAgB,EAAE,CAAC,EAAhE,WAAW,QAAA,EAAE,cAAc,QAAqC,CAAC;IACxE,IAAM,oBAAoB,GAAG,CAAC,WAAW,EAAE,WAAW,EAAE,6BAA6B,EAAE,sBAAsB,CAAC,CAAC;IAC/G,IAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEtD,IAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC;QAChC,SAAS,EAAE,CAAC;IACd,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,iBAAiB,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC;IAE7C,IAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC;QAClC,IAAM,WAAW,GAAG,aAAa,IAAI,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,IAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,oBAAoB,CAAC;QACtG,IAAM,WAAW,GAAkB,EAAE,CAAC;QACtC,KAAqB,UAAW,EAAX,2BAAW,EAAX,yBAAW,EAAX,IAAW,EAAE;YAA7B,IAAM,MAAM,oBAAA;YACf,IAAM,SAAS,GAAG,oBAAoB,CAAC,MAAM,CAAe,CAAC;YAC7D,IAAI,SAAS,EAAE;gBACb,WAAW,CAAC,IAAI,CACd,oBAAC,WAAW,IACV,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,UAAC,KAAK,EAAE,SAAS;wBACzB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;oBAC7B,CAAC,GACD,CACH,CAAC;aACH;SACF;QACD,WAAW,CAAC,IAAI,CACd,oBAAC,IAAI,IACH,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,IAAI,EAAC,6BAA6B,EAClC,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAE,UAAC,EAAE;gBACV,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,EAAE,CAAC,eAAe,EAAE,CAAC;gBACrB,kBAAkB,CAAC,IAAI,CAAC,CAAC;YAC3B,CAAC,GACD,CACH,CAAC;QACF,cAAc,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,oBAAoB,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAErF,KAAK,CAAC,SAAS,CAAC;QACd,cAAc,CAAC,EAAE,CAAC,CAAC;QACnB,SAAS,EAAE,CAAC;IACd,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACL;QACE,oBAAC,IAAI,IACH,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;gBAClC,GAAG,EAAE,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,SAAS,IAAG,EAAE;gBAC3B,IAAI,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU;aACzB,EACD,GAAG,EAAE,UAAU;YAEf,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW;gBAChC,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS,IAAG,WAAW,CAAO,CACjD;YACL,eAAe,IAAI,CAClB,oBAAC,cAAc,IACb,UAAU,EAAC,OAAO,EAClB,MAAM,EAAE,eAAe,EACvB,SAAS,EAAE;oBACT,kBAAkB,CAAC,KAAK,CAAC,CAAC;gBAC5B,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAyB,GAC7C,CACH,CACI,CACN,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/lib/controls/HoverReactionsBar/components/hoverReactionbarControl/useHoverReactionsStyles.d.ts

@@ -0,0 +1,2 @@
+export declare const useHoverReactionsStyles: () => Record<"card" | "emoji" | "searchBox" | "emojiList" | "cardContent" | "emojiRoot" | "emojiImage", string>;
+//# sourceMappingURL=useHoverReactionsStyles.d.ts.map

package/lib/controls/HoverReactionsBar/components/hoverReactionbarControl/useHoverReactionsStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHoverReactionsStyles.d.ts","sourceRoot":"","sources":["../../../../../src/controls/HoverReactionsBar/components/hoverReactionbarControl/useHoverReactionsStyles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,uBAAuB,iHAiDlC,CAAC"}

package/lib/controls/HoverReactionsBar/components/hoverReactionbarControl/useHoverReactionsStyles.js

@@ -0,0 +1,38 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { makeStyles, shorthands, } from '@fluentui/react-components';
+export var useHoverReactionsStyles = makeStyles({
+    emojiList: __assign(__assign({ display: "flex", flexDirection: "row", justifyContent: "flex-start", alignItems: "center", height: "30px" }, shorthands.gap("10px")), { width: "100%" }),
+    card: __assign(__assign(__assign({ position: "absolute" }, shorthands.borderRadius("4px")), { width: "160px" }), shorthands.padding("5px")),
+    cardContent: __assign(__assign(__assign({ display: "flex", width: "100%" }, shorthands.flex("1")), { flexDirection: "column", justifyContent: "center", alignItems: "center" }), shorthands.gap("10px")),
+    searchBox: {
+        width: "100%",
+    },
+    emojiRoot: {
+        /*   ...shorthands.margin("10px"), */
+        cursor: "pointer",
+    },
+    emoji: {
+        fontSize: "30px",
+    },
+    emojiImage: {
+        with: "20px",
+        height: "20px",
+        cursor: "pointer",
+        '&:hover': {
+            transform: "scale(1.2)",
+            with: "25px",
+            height: "25px",
+        },
+    }
+});
+//# sourceMappingURL=useHoverReactionsStyles.js.map

package/lib/controls/HoverReactionsBar/components/hoverReactionbarControl/useHoverReactionsStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHoverReactionsStyles.js","sourceRoot":"","sources":["../../../../../src/controls/HoverReactionsBar/components/hoverReactionbarControl/useHoverReactionsStyles.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EACL,UAAU,EACV,UAAU,GACX,MAAM,4BAA4B,CAAC;AAEpC,MAAM,CAAC,IAAM,uBAAuB,GAAG,UAAU,CAAC;IAChD,SAAS,sBACR,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,KAAK,EACnB,cAAc,EAAE,YAAY,EAC5B,UAAU,EAAE,QAAQ,EACrB,MAAM,EAAE,MAAM,IACX,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,KACxB,KAAK,EAAE,MAAM,GACd;IACD,IAAI,+BACF,QAAQ,EAAC,UAAU,IAChB,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,KACjC,KAAK,EAAE,OAAO,KAEX,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAC7B;IACD,WAAW,+BACT,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,IACV,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,KACvB,aAAa,EAAE,QAAQ,EACvB,cAAc,EAAE,QAAQ,EACxB,UAAU,EAAE,QAAQ,KAEjB,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,CAC1B;IACD,SAAS,EAAE;QACT,KAAK,EAAE,MAAM;KACd;IACD,SAAS,EAAE;QAEX,qCAAqC;QACnC,MAAM,EAAE,SAAS;KAClB;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,MAAM;KAEjB;IACD,UAAU,EAAE;QACV,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE;YACT,SAAS,EAAE,YAAY;YACxB,IAAI,EAAE,MAAM;YACX,MAAM,EAAE,MAAM;SACf;KACF;CACF,CAAC,CAAC"}

package/lib/controls/HoverReactionsBar/components/reactionPicker/ReactionGroups.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface IReactionGroupsProps {
+    selectedGroup: string;
+    groups: string[];
+    onSelectedGroup: (group: string) => void;
+}
+export declare const ReactionGroups: React.FunctionComponent<IReactionGroupsProps>;
+//# sourceMappingURL=ReactionGroups.d.ts.map

package/lib/controls/HoverReactionsBar/components/reactionPicker/ReactionGroups.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionGroups.d.ts","sourceRoot":"","sources":["../../../../../src/controls/HoverReactionsBar/components/reactionPicker/ReactionGroups.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAOD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAqCxE,CAAC"}

package/lib/controls/HoverReactionsBar/components/reactionPicker/ReactionGroups.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Button, Divider, mergeClasses, } from '@fluentui/react-components';
+import fluentEmojiGroups from '../../data/fluentEmojisGroups.json';
+import { useReactionPickerStyles } from './useReactionPickerStyle';
+export var ReactionGroups = function (props) {
+    var onSelectedGroup = props.onSelectedGroup, selectedGroup = props.selectedGroup;
+    var styles = useReactionPickerStyles();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Divider, null),
+        React.createElement("div", { className: styles.emojiGroupContainer }, fluentEmojiGroups.map(function (group, index) {
+            var groupName = group.groupName, emoji = group.emoji;
+            return (React.createElement(Button, { className: styles.groupButton, key: index, onClick: function (ev) {
+                    ev.preventDefault();
+                    onSelectedGroup(groupName);
+                }, appearance: "subtle", icon: React.createElement("div", { className: mergeClasses(styles.emojiImageGroup, selectedGroup === groupName ? styles.emojiSelected : ""), title: groupName, style: {
+                        WebkitMaskImage: "url(".concat(emoji, ")"),
+                        maskImage: "url(".concat(emoji, ")"),
+                    } }) }));
+        }))));
+};
+//# sourceMappingURL=ReactionGroups.js.map

package/lib/controls/HoverReactionsBar/components/reactionPicker/ReactionGroups.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionGroups.js","sourceRoot":"","sources":["../../../../../src/controls/HoverReactionsBar/components/reactionPicker/ReactionGroups.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,MAAM,EACN,OAAO,EACP,YAAY,GACb,MAAM,4BAA4B,CAAC;AAEpC,OAAO,iBAAiB,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAanE,MAAM,CAAC,IAAM,cAAc,GAAkD,UAC3E,KAAoD;IAE1C,IAAA,eAAe,GAAoB,KAAK,gBAAzB,EAAE,aAAa,GAAK,KAAK,cAAV,CAAW;IACnD,IAAM,MAAM,GAAG,uBAAuB,EAAE,CAAC;IACzC,OAAO,CACL;QACE,oBAAC,OAAO,OAAG;QACX,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,IACvC,iBAAiB,CAAC,GAAG,CAAC,UAAC,KAAY,EAAE,KAAK;YACjC,IAAA,SAAS,GAAY,KAAK,UAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;YACnC,OAAO,CACL,oBAAC,MAAM,IACL,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,UAAC,EAAE;oBACV,EAAE,CAAC,cAAc,EAAE,CAAC;oBACpB,eAAe,CAAC,SAAS,CAAC,CAAC;gBAC7B,CAAC,EACD,UAAU,EAAC,QAAQ,EACnB,IAAI,EACF,6BACE,SAAS,EAAE,YAAY,CAAC,MAAM,CAAC,eAAe,EAAE,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,EACxG,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE;wBACL,eAAe,EAAE,cAAO,KAAK,MAAG;wBAChC,SAAS,EAAE,cAAO,KAAK,MAAG;qBAE3B,GACD,GAEJ,CACH,CAAC;QACJ,CAAC,CAAC,CACE,CACL,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/lib/controls/HoverReactionsBar/components/reactionPicker/ReactionPicker.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { IEmojiInfo } from '../../models/IFluentEmoji';
+export interface IReactionProps {
+    onSelect: (emoji: string | undefined, emojiInfo?: IEmojiInfo) => void;
+    isOpen: boolean;
+    onDismiss: () => void;
+    returnType?: "emoji" | "image";
+    target?: HTMLDivElement;
+}
+export declare const ReactionPicker: React.FunctionComponent<IReactionProps>;
+//# sourceMappingURL=ReactionPicker.d.ts.map

package/lib/controls/HoverReactionsBar/components/reactionPicker/ReactionPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionPicker.d.ts","sourceRoot":"","sources":["../../../../../src/controls/HoverReactionsBar/components/reactionPicker/ReactionPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAQvD,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACtE,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC/B,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AAID,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAsKlE,CAAC"}

package/lib/controls/HoverReactionsBar/components/reactionPicker/ReactionPicker.js

@@ -0,0 +1,149 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-unused-expressions */
+import * as React from 'react';
+import strings from 'ControlStrings';
+import { Card, Input, tokens, } from '@fluentui/react-components';
+import { Icon } from '@iconify/react';
+import emojiList from '../../data/fluentEmojis.json';
+import { useFluentEmojis } from '../../hooks/useFluentEmojis';
+import { useOnClickOutside } from '../../hooks/useOnClickOutside';
+import { ReactionGroups } from './ReactionGroups';
+import { RenderEmoji } from './RenderEmoji';
+import { useReactionPickerStyles } from './useReactionPickerStyle';
+var PICKER_WIDTH = 350;
+var PICKER_HEIGHT = 420;
+var DEFAULT_GROUP = "Smileys & Emotion";
+export var ReactionPicker = function (props) {
+    var onSelect = props.onSelect, isOpen = props.isOpen, onDismiss = props.onDismiss, returnType = props.returnType, target = props.target;
+    var pickerRef = React.useRef(null);
+    var styles = useReactionPickerStyles();
+    var _a = React.useState([]), renderEmoji = _a[0], setRenderEmoji = _a[1];
+    var _b = React.useState(""), searchValue = _b[0], setSearchValue = _b[1];
+    var _c = React.useState(), groups = _c[0], setGroups = _c[1];
+    var _d = React.useState(DEFAULT_GROUP), selectedGroup = _d[0], setSelectedGroup = _d[1];
+    var groupsRef = React.useRef();
+    var _e = React.useState(), pickerStyles = _e[0], setStyles = _e[1];
+    var isSearchingRef = React.useRef(false);
+    var _f = useFluentEmojis(), getFluentEmojisByGroup = _f.getFluentEmojisByGroup, getFluentEmojis = _f.getFluentEmojis;
+    var onClose = React.useCallback(function () {
+        onDismiss();
+    }, [onDismiss]);
+    useOnClickOutside(true, pickerRef, onClose);
+    var loadEmoji = React.useCallback(function (selectedGroup) {
+        isSearchingRef.current = false;
+        setSearchValue("");
+        if (!(groupsRef === null || groupsRef === void 0 ? void 0 : groupsRef.current)) {
+            return;
+        }
+        var emojiList = selectedGroup ? groupsRef.current[selectedGroup] : groups[DEFAULT_GROUP];
+        setRenderEmoji([]);
+        var _loop_1 = function (index) {
+            var emojiInfo = emojiList[index];
+            if (emojiInfo) {
+                setRenderEmoji(function (emojis) {
+                    return __spreadArray(__spreadArray([], emojis, true), [
+                        React.createElement(RenderEmoji, { key: index, emoji: emojiInfo, onSelect: function (emoji) {
+                                document.body.style.pointerEvents = "";
+                                onSelect(emoji, emojiInfo);
+                                onDismiss();
+                            } }),
+                    ], false);
+                });
+            }
+        };
+        for (var index = 0; index < emojiList.length; index++) {
+            _loop_1(index);
+        }
+    }, [emojiList, onSelect, onDismiss, groups, returnType]);
+    React.useEffect(function () {
+        var countainerBounds = target === null || target === void 0 ? void 0 : target.getBoundingClientRect();
+        var pickerTopPosition = 0;
+        var pickerLeftPosition = 0;
+        if ((countainerBounds === null || countainerBounds === void 0 ? void 0 : countainerBounds.top) + PICKER_HEIGHT > window.innerHeight) {
+            pickerTopPosition = countainerBounds.top - PICKER_HEIGHT - 10;
+            if (pickerTopPosition < 0) {
+                pickerTopPosition = 0;
+            }
+        }
+        else {
+            pickerTopPosition = (countainerBounds === null || countainerBounds === void 0 ? void 0 : countainerBounds.bottom) + 10;
+            if (pickerTopPosition < 0) {
+                pickerTopPosition = 0;
+            }
+        }
+        if ((countainerBounds === null || countainerBounds === void 0 ? void 0 : countainerBounds.left) + PICKER_WIDTH > window.innerWidth) {
+            pickerLeftPosition = (countainerBounds === null || countainerBounds === void 0 ? void 0 : countainerBounds.left) - PICKER_WIDTH;
+        }
+        else {
+            pickerLeftPosition = countainerBounds === null || countainerBounds === void 0 ? void 0 : countainerBounds.left;
+        }
+        setStyles({
+            top: "".concat(pickerTopPosition, "px"),
+            left: "".concat(pickerLeftPosition, "px"),
+            zIndex: "1000000",
+            display: isOpen ? "block" : "none",
+        });
+    }, [target, isOpen, pickerRef]);
+    React.useEffect(function () {
+        var listByGroup = getFluentEmojisByGroup();
+        groupsRef.current = listByGroup;
+        setGroups(listByGroup);
+    }, []);
+    React.useEffect(function () {
+        setRenderEmoji([]);
+        setSearchValue("");
+        loadEmoji(DEFAULT_GROUP);
+    }, [isOpen]);
+    var searchEmoji = React.useCallback(function (searchText) {
+        isSearchingRef.current = true;
+        var mewlist = getFluentEmojis().filter(function (emojiInfo) {
+            var _a;
+            if (emojiInfo) {
+                return (_a = emojiInfo.keywords) === null || _a === void 0 ? void 0 : _a.some(function (keyword) { return keyword.includes(searchText); });
+            }
+            return false;
+        });
+        setRenderEmoji([]);
+        var _loop_2 = function (index) {
+            var emojiInfo = mewlist[index];
+            if (emojiInfo) {
+                setRenderEmoji(function (emojis) {
+                    return __spreadArray(__spreadArray([], emojis, true), [
+                        React.createElement(RenderEmoji, { key: index, emoji: emojiInfo, onSelect: function (emoji) {
+                                onSelect(emoji, emojiInfo);
+                                onDismiss();
+                            } }),
+                    ], false);
+                });
+            }
+        };
+        for (var index = 0; index < mewlist.length; index++) {
+            _loop_2(index);
+        }
+    }, [onSelect, onDismiss, groups, returnType]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Card, { className: styles.card, style: pickerStyles, ref: pickerRef },
+            React.createElement("div", { className: styles.cardContent },
+                React.createElement(Input, { value: searchValue, placeholder: strings.HoverReactionBarSearchEmojiPlaceholder, onChange: function (ev, data) {
+                        var _a;
+                        setSearchValue((data === null || data === void 0 ? void 0 : data.value) || "");
+                        !((_a = ev.currentTarget) === null || _a === void 0 ? void 0 : _a.value) ? loadEmoji(selectedGroup) : searchEmoji(ev.currentTarget.value);
+                    }, type: "search", className: styles.searchBox, contentBefore: React.createElement(Icon, { icon: "fluent:search-20-regular", color: tokens.colorBrandForeground1 }), onKeyDown: function (ev) {
+                        ev.key === "Enter" ? searchEmoji(ev.currentTarget.value) : null;
+                    } }),
+                React.createElement("div", { className: styles.emojiList }, renderEmoji),
+                isSearchingRef.current ? null : (React.createElement(ReactionGroups, { selectedGroup: selectedGroup, groups: groups, onSelectedGroup: function (groupName) {
+                        setSelectedGroup(groupName);
+                        loadEmoji(groupName);
+                    } }))))));
+};
+//# sourceMappingURL=ReactionPicker.js.map

package/lib/controls/HoverReactionsBar/components/reactionPicker/ReactionPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionPicker.js","sourceRoot":"","sources":["../../../../../src/controls/HoverReactionsBar/components/reactionPicker/ReactionPicker.tsx"],"names":[],"mappings":"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"}

package/lib/controls/HoverReactionsBar/components/reactionPicker/RenderEmoji.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { IEmojiInfo } from '../../models/IFluentEmoji';
+export interface IRenderEmojiProps {
+    emoji: IEmojiInfo;
+    onSelect?: (emoji: string | undefined, emojiInfo?: IEmojiInfo) => void;
+    className?: string;
+}
+export declare const RenderEmoji: React.FunctionComponent<IRenderEmojiProps>;
+//# sourceMappingURL=RenderEmoji.d.ts.map

package/lib/controls/HoverReactionsBar/components/reactionPicker/RenderEmoji.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderEmoji.d.ts","sourceRoot":"","sources":["../../../../../src/controls/HoverReactionsBar/components/reactionPicker/RenderEmoji.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,UAAU,EAEX,MAAM,2BAA2B,CAAC;AAGnC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAuClE,CAAC"}

package/lib/controls/HoverReactionsBar/components/reactionPicker/RenderEmoji.js

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as React from 'react';
+import { useReactionPickerStyles } from './useReactionPickerStyle';
+export var RenderEmoji = function (props) {
+    var emoji = props.emoji, onSelect = props.onSelect, className = props.className;
+    var styles = useReactionPickerStyles();
+    var imageUrl = React.useMemo(function () {
+        try {
+            var _a = emoji || {}, styles_1 = _a.styles, skintones = _a.skintones;
+            var Default = (skintones || {}).Default;
+            var image = styles_1 ? styles_1.Color : undefined;
+            if (!image) {
+                image = Default ? Default.Color : "";
+            }
+            return image;
+        }
+        catch (error) {
+            console.log(error);
+        }
+    }, [emoji, styles]);
+    if (!emoji) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("img", { src: imageUrl, alt: emoji.cldr, className: className !== null && className !== void 0 ? className : styles.emojiImage, onClick: function () {
+                if (onSelect) {
+                    onSelect(emoji.glyph, emoji);
+                }
+            } })));
+};
+//# sourceMappingURL=RenderEmoji.js.map

package/lib/controls/HoverReactionsBar/components/reactionPicker/RenderEmoji.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderEmoji.js","sourceRoot":"","sources":["../../../../../src/controls/HoverReactionsBar/components/reactionPicker/RenderEmoji.tsx"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAQnE,MAAM,CAAC,IAAM,WAAW,GAA+C,UACrE,KAAiD;IAEzC,IAAA,KAAK,GAA0B,KAAK,MAA/B,EAAE,QAAQ,GAAgB,KAAK,SAArB,EAAE,SAAS,GAAK,KAAK,UAAV,CAAW;IAC7C,IAAM,MAAM,GAAG,uBAAuB,EAAE,CAAC;IAEzC,IAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC;QAC7B,IAAI;YACI,IAAA,KAAwB,KAAK,IAAK,EAAiB,EAAjD,QAAM,YAAA,EAAE,SAAS,eAAgC,CAAC;YAClD,IAAA,OAAO,GAAK,CAAA,SAAS,IAAK,EAAgB,CAAA,QAAnC,CAAoC;YACnD,IAAI,KAAK,GAAG,QAAM,CAAC,CAAC,CAAC,QAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;YAC9C,IAAI,CAAC,KAAK,EAAE;gBACV,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;aACtC;YAED,OAAO,KAAK,CAAC;SACd;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;SACpB;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;IAEpB,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL;QACE,6BACE,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,SAAS,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,MAAM,CAAC,UAAU,EACzC,OAAO,EAAE;gBACP,IAAI,QAAQ,EAAE;oBACZ,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;iBAC9B;YACH,CAAC,GACD,CACD,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/lib/controls/HoverReactionsBar/components/reactionPicker/useReactionPickerStyle.d.ts

@@ -0,0 +1,2 @@
+export declare const useReactionPickerStyles: () => Record<"card" | "emoji" | "searchBox" | "emojiList" | "cardContent" | "emojiRoot" | "emojiImage" | "emojiGroupContainer" | "emojiImageGroup" | "emojiSelected" | "groupButton", string>;
+//# sourceMappingURL=useReactionPickerStyle.d.ts.map

package/lib/controls/HoverReactionsBar/components/reactionPicker/useReactionPickerStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReactionPickerStyle.d.ts","sourceRoot":"","sources":["../../../../../src/controls/HoverReactionsBar/components/reactionPicker/useReactionPickerStyle.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,+LAuFlC,CAAC"}

package/lib/controls/HoverReactionsBar/components/reactionPicker/useReactionPickerStyle.js

@@ -0,0 +1,79 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
+export var useReactionPickerStyles = makeStyles({
+    emojiList: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 30px), 1fr))",
+        columnGap: "15px",
+        rowGap: "0.5em",
+        overflowY: "auto",
+        overflowX: "hidden",
+        marginTop: "20px",
+        maxHeight: "280px",
+        width: "100%",
+        "scrollbar-color": tokens.colorNeutralBackground1,
+        "scrollbar-width": "thin",
+        "::-webkit-scrollbar-thumb": __assign(__assign({ backgroundColor: tokens === null || tokens === void 0 ? void 0 : tokens.colorNeutralBackground3 }, shorthands.borderRadius("10px")), shorthands.borderWidth("1px")),
+        "::-webkit-scrollbar": {
+            width: "7px",
+        },
+    },
+    card: __assign(__assign(__assign({ backgroundColor: tokens.colorNeutralBackground2 }, shorthands.borderRadius("8px")), { width: "350px", height: "420px", position: "fixed", bottom: "10px", zIndex: 9000 }), shorthands.padding("20px")),
+    cardContent: __assign({ display: "flex", width: "100%", flexDirection: "column", justifyContent: "center", alignItems: "center" }, shorthands.gap("10px")),
+    searchBox: {
+        width: "100%",
+    },
+    emojiRoot: {
+        height: "fit-content",
+        /*   ...shorthands.margin("10px"), */
+        cursor: "pointer",
+    },
+    emoji: {
+        fontSize: "30px",
+    },
+    emojiImage: {
+        width: "30px",
+        height: "30px",
+        cursor: "pointer",
+    },
+    emojiGroupContainer: {
+        position: "absolute",
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 30px), 1fr))",
+        width: "90%",
+        bottom: "10px",
+        paddingLeft: "10px",
+        paddingRight: "10px",
+    },
+    emojiImageGroup: {
+        width: "20px",
+        height: "20px",
+        display: "inline-block",
+        WebkitMaskSize: "20px",
+        WebkitMaskPositionY: "0%",
+        backgroundColor: tokens.colorNeutralForeground3,
+        "&:hover": {
+            backgroundColor: tokens.colorBrandBackground,
+            WebkitMaskPositionY: "100%",
+        },
+    },
+    emojiSelected: {
+        backgroundColor: tokens.colorBrandBackground,
+        WebkitMaskPositionY: "100%",
+    },
+    groupButton: {
+        paddingLeft: "10px",
+        paddingRight: "10px",
+    },
+});
+//# sourceMappingURL=useReactionPickerStyle.js.map

package/lib/controls/HoverReactionsBar/components/reactionPicker/useReactionPickerStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReactionPickerStyle.js","sourceRoot":"","sources":["../../../../../src/controls/HoverReactionsBar/components/reactionPicker/useReactionPickerStyle.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE5E,MAAM,CAAC,IAAM,uBAAuB,GAAG,UAAU,CAAC;IAChD,SAAS,EAAE;QACT,OAAO,EAAE,MAAM;QACf,mBAAmB,EAAE,iDAAiD;QACtE,SAAS,EAAE,MAAM;QACjB,MAAM,EAAE,OAAO;QACf,SAAS,EAAE,MAAM;QACjB,SAAS,EAAE,QAAQ;QACnB,SAAS,EAAE,MAAM;QACjB,SAAS,EAAE,OAAO;QAClB,KAAK,EAAE,MAAM;QACb,iBAAiB,EAAE,MAAM,CAAC,uBAAuB;QACjD,iBAAiB,EAAE,MAAM;QACzB,2BAA2B,sBACzB,eAAe,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,uBAAuB,IAC7C,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,GAC/B,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CACjC;QACD,qBAAqB,EAAE;YACrB,KAAK,EAAE,KAAK;SACb;KACF;IACD,IAAI,+BACF,eAAe,EAAE,MAAM,CAAC,uBAAuB,IAC5C,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,KACjC,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,OAAO,EACf,QAAQ,EAAE,OAAO,EACjB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,IAAI,KACT,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,CAC9B;IACD,WAAW,aACT,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,EAEb,aAAa,EAAE,QAAQ,EACvB,cAAc,EAAE,QAAQ,EACxB,UAAU,EAAE,QAAQ,IAEjB,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,CAC1B;IACD,SAAS,EAAE;QACT,KAAK,EAAE,MAAM;KACd;IACD,SAAS,EAAE;QACT,MAAM,EAAE,aAAa;QACrB,qCAAqC;QACrC,MAAM,EAAE,SAAS;KAClB;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,MAAM;KACjB;IACD,UAAU,EAAE;QACV,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,SAAS;KAClB;IACD,mBAAmB,EAAE;QACnB,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,MAAM;QACf,mBAAmB,EAAE,gDAAgD;QACrE,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,MAAM;QACd,WAAW,EAAE,MAAM;QACnB,YAAY,EAAE,MAAM;KACrB;IACD,eAAe,EAAE;QACf,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,cAAc;QACvB,cAAc,EAAE,MAAM;QACtB,mBAAmB,EAAE,IAAI;QACzB,eAAe,EAAE,MAAM,CAAC,uBAAuB;QAC/C,SAAS,EAAE;YACT,eAAe,EAAE,MAAM,CAAC,oBAAoB;YAC5C,mBAAmB,EAAE,MAAM;SAC5B;KACF;IACD,aAAa,EAAE;QACb,eAAe,EAAE,MAAM,CAAC,oBAAoB;QAC5C,mBAAmB,EAAE,MAAM;KAC5B;IACD,WAAW,EAAE;QACX,WAAW,EAAE,MAAM;QACnB,YAAY,EAAE,MAAM;KACrB;CACF,CAAC,CAAC"}