@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.
196 lines (190 loc) • 7.33 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 classNames = require('../../utils/class-names.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: classNames.classNames("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: classNames.classNames("lb-emoji-picker-row", className),
...props,
children
});
}
function EmojiPickerListCategoryHeader({
category,
className,
...props
}) {
return /* @__PURE__ */ jsxRuntime.jsx("div", {
className: classNames.classNames("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]
);
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: classNames.classNames(
"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,
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