@liveblocks/react-ui
Version:
A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.
159 lines (153 loc) • 6.63 kB
JavaScript
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var PopoverPrimitive = require('@radix-ui/react-popover');
var frimousse = require('frimousse');
var react = require('react');
var config = require('../../config.cjs');
var constants = require('../../constants.cjs');
var Search = require('../../icons/Search.cjs');
var Spinner = require('../../icons/Spinner.cjs');
var overrides = require('../../overrides.cjs');
var cn = require('../../utils/cn.cjs');
var Emoji = require('./Emoji.cjs');
var Tooltip = require('./Tooltip.cjs');
function _interopNamespaceDefault(e) {
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n.default = e;
return Object.freeze(n);
}
var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(PopoverPrimitive);
function EmojiPickerListEmoji({
emoji,
className,
...props
}) {
return /* @__PURE__ */ jsxRuntime.jsx("button", { className: cn.cn("lb-emoji-picker-emoji", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Emoji.Emoji, { emoji: emoji.emoji }) });
}
function EmojiPickerListRow({
children,
className,
...props
}) {
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn("lb-emoji-picker-row", className), ...props, children });
}
function EmojiPickerListCategoryHeader({
category,
className,
...props
}) {
return /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
className: cn.cn("lb-emoji-picker-category-header", className),
...props,
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lb-emoji-picker-category-header-title", children: category.label })
}
);
}
const EmojiPicker = react.forwardRef(
({ onEmojiSelect, onOpenChange, children, className, ...props }, forwardedRef) => {
const [isOpen, setOpen] = react.useState(false);
const { portalContainer, emojibaseUrl } = config.useLiveblocksUiConfig();
const $ = overrides.useOverrides();
const handleOpenChange = react.useCallback(
(isOpen2) => {
setOpen(isOpen2);
onOpenChange?.(isOpen2);
},
[onOpenChange]
);
const handleEmojiSelect = react.useCallback(
({ emoji }) => {
setOpen(false);
onEmojiSelect?.(emoji);
},
[onEmojiSelect]
);
const stopPropagation = react.useCallback((event) => {
event.stopPropagation();
}, []);
return /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive__namespace.Root, { open: isOpen, onOpenChange: handleOpenChange, children: [
children,
/* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
PopoverPrimitive__namespace.Content,
{
side: "top",
align: "center",
sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
className: cn.cn(
"lb-root lb-portal lb-elevation lb-emoji-picker",
className
),
...props,
ref: forwardedRef,
asChild: true,
children: /* @__PURE__ */ jsxRuntime.jsxs(
frimousse.EmojiPicker.Root,
{
onEmojiSelect: handleEmojiSelect,
locale: $.locale,
columns: 10,
emojiVersion: 15.1,
emojibaseUrl,
onClick: stopPropagation,
children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-emoji-picker-header", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lb-emoji-picker-search-container", children: [
/* @__PURE__ */ jsxRuntime.jsx(
frimousse.EmojiPicker.Search,
{
className: "lb-emoji-picker-search",
placeholder: $.EMOJI_PICKER_SEARCH_PLACEHOLDER,
autoFocus: true
}
),
/* @__PURE__ */ jsxRuntime.jsx(Search.SearchIcon, {})
] }) }),
/* @__PURE__ */ jsxRuntime.jsxs(frimousse.EmojiPicker.Viewport, { className: "lb-emoji-picker-content", children: [
/* @__PURE__ */ jsxRuntime.jsx(frimousse.EmojiPicker.Loading, { className: "lb-loading lb-emoji-picker-loading", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner.SpinnerIcon, {}) }),
/* @__PURE__ */ jsxRuntime.jsx(frimousse.EmojiPicker.Empty, { className: "lb-empty lb-emoji-picker-empty", children: $.EMOJI_PICKER_EMPTY }),
/* @__PURE__ */ jsxRuntime.jsx(
frimousse.EmojiPicker.List,
{
className: "lb-emoji-picker-list",
components: {
CategoryHeader: EmojiPickerListCategoryHeader,
Row: EmojiPickerListRow,
Emoji: EmojiPickerListEmoji
}
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lb-emoji-picker-footer", children: [
/* @__PURE__ */ jsxRuntime.jsx(frimousse.EmojiPicker.ActiveEmoji, { children: ({ emoji }) => emoji ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-emoji-picker-active-emoji", children: emoji.emoji }),
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "lb-emoji-picker-active-emoji-label", children: emoji.label })
] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lb-emoji-picker-active-emoji-label lb-emoji-picker-active-emoji-label-placeholder", children: "Select an emoji\u2026" }) }),
/* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: $.EMOJI_PICKER_CHANGE_SKIN_TONE, children: /* @__PURE__ */ jsxRuntime.jsx(frimousse.EmojiPicker.SkinToneSelector, { className: "lb-button lb-emoji-picker-skin-tone-selector" }) })
] })
]
}
)
}
) })
] });
}
);
Object.defineProperty(exports, 'EmojiPickerTrigger', {
enumerable: true,
get: function () { return PopoverPrimitive.PopoverTrigger; }
});
exports.EmojiPicker = EmojiPicker;
//# sourceMappingURL=EmojiPicker.cjs.map