emoji-picker-react 4.20.2 → 4.20.4

package/README.md

@@ -57,7 +57,7 @@ See [PROPS.md](PROPS.md) for the complete props reference.
 
 ## Styling
 
-No stylesheet import needed. All styles are scoped via [Flairup](https://github.com/ealush/flairup) — generated class names are hashed, so the picker's CSS won't leak into or clash with your app's styles.
+No stylesheet import needed. All styles are scoped via [ShipStyles](https://github.com/ealush/shipstyles) — generated class names are hashed, so the picker's CSS won't leak into or clash with your app's styles.
 
 Restyle the picker by overriding [CSS variables](CSS_VARIABLES.md) on `.EmojiPickerReact`:
 

package/dist/Stylesheet/stylesheet.d.ts

@@ -1,5 +1,5 @@
-import { Styles } from 'flairup';
 import * as React from 'react';
+import { Styles } from 'shipstyles';
 export declare const stylesheet: {
     create: <K extends string>(styles: Partial<{ [k in K]: Partial<{
         '.'?: string | string[] | undefined;

package/dist/emoji-picker-react.cjs.development.js

@@ -6,7 +6,7 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
-var flairup = require('flairup');
+var shipstyles = require('shipstyles');
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -96,7 +96,7 @@ function asSelectors() {
   }).join('');
 }
 
-var stylesheet = /*#__PURE__*/flairup.createSheet('epr', null);
+var stylesheet = /*#__PURE__*/shipstyles.createSheet('epr', null);
 var hidden = {
   display: 'none',
   opacity: '0',
@@ -28327,7 +28327,7 @@ function PickerRootElement(_ref2) {
     height = _ref3.height,
     styleProps = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
   return React.createElement("aside", {
-    className: flairup.cx(styles.main, styles.baseVariables, theme === exports.Theme.DARK && styles.darkTheme, theme === exports.Theme.AUTO && styles.autoThemeDark, (_cx = {}, _cx[ClassNames.searchActive] = searchModeActive, _cx), reactionsMode && styles.reactionsMenu, className),
+    className: shipstyles.cx(styles.main, styles.baseVariables, theme === exports.Theme.DARK && styles.darkTheme, theme === exports.Theme.AUTO && styles.autoThemeDark, (_cx = {}, _cx[ClassNames.searchActive] = searchModeActive, _cx), reactionsMode && styles.reactionsMenu, className),
     ref: PickerMainRef,
     style: _extends({}, styleProps, !reactionsMode && {
       height: height,
@@ -28889,7 +28889,7 @@ function Button(props) {
   return React.createElement("button", Object.assign({
     type: "button"
   }, props, {
-    className: flairup.cx(styles$1.button, props.className)
+    className: shipstyles.cx(styles$1.button, props.className)
   }), props.children);
 }
 var styles$1 = /*#__PURE__*/stylesheet.create({
@@ -28922,7 +28922,7 @@ function ClickableEmojiButton(_ref) {
     noBackground = _ref$noBackground === void 0 ? false : _ref$noBackground,
     style = _ref.style;
   return React.createElement(Button, {
-    className: flairup.cx(styles$2.emoji, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx), !!(hasVariations && showVariations) && styles$2.hasVariations, noBackground && styles$2.noBackground, className),
+    className: shipstyles.cx(styles$2.emoji, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx), !!(hasVariations && showVariations) && styles$2.hasVariations, noBackground && styles$2.noBackground, className),
     "data-unified": unified,
     "aria-label": getAriaLabel(emojiNames),
     "data-full-name": emojiNames,
@@ -29010,7 +29010,7 @@ function EmojiImg(_ref) {
   return React.createElement("img", {
     src: imgUrl,
     alt: emojiName,
-    className: flairup.cx(styles$3.emojiImag, emojiStyles.external, emojiStyles.common, className),
+    className: shipstyles.cx(styles$3.emojiImag, emojiStyles.external, emojiStyles.common, className),
     loading: lazyLoad ? 'lazy' : 'eager',
     onError: onError,
     style: style
@@ -29032,7 +29032,7 @@ function NativeEmoji(_ref) {
     style = _ref.style,
     className = _ref.className;
   return React.createElement("span", {
-    className: flairup.cx(
+    className: shipstyles.cx(
     // Order matters: cx() lets the later class win same-property
     // conflicts, so the zeroing reset must come first and the real
     // font-size last — otherwise the emoji renders at 0px.
@@ -29153,7 +29153,7 @@ function BtnPlus() {
     "aria-label": "Show all Emojis",
     title: "Show all Emojis",
     tabIndex: 0,
-    className: flairup.cx(styles$5.plusSign),
+    className: shipstyles.cx(styles$5.plusSign),
     onClick: function onClick() {
       return setReactionsMode(false);
     }
@@ -29220,7 +29220,7 @@ function Reactions() {
     return null;
   }
   return React.createElement("ul", {
-    className: flairup.cx(styles$6.list, !reactionsOpen && commonStyles.hidden),
+    className: shipstyles.cx(styles$6.list, !reactionsOpen && commonStyles.hidden),
     ref: ReactionsRef,
     "aria-label": "Reactions"
   }, reactions.map(function (reaction) {
@@ -29235,7 +29235,7 @@ function Reactions() {
       emojiStyle: emojiStyle,
       unified: reaction,
       showVariations: false,
-      className: flairup.cx(styles$6.emojiButton),
+      className: shipstyles.cx(styles$6.emojiButton),
       noBackground: true,
       getEmojiUrl: getEmojiUrl
     }));
@@ -29478,13 +29478,13 @@ function EmojiCategory(_ref) {
   var category = categoryFromCategoryConfig(categoryConfig);
   var categoryName = categoryNameFromCategoryConfig(categoryConfig);
   return React.createElement("li", {
-    className: flairup.cx(styles$7.category, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch),
+    className: shipstyles.cx(styles$7.category, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch),
     "data-name": category,
     "aria-label": categoryName
   }, React.createElement("h2", {
-    className: flairup.cx(styles$7.label)
+    className: shipstyles.cx(styles$7.label)
   }, categoryName), React.createElement("div", {
-    className: flairup.cx(styles$7.categoryContent),
+    className: shipstyles.cx(styles$7.categoryContent),
     style: {
       height: height
     }
@@ -29590,7 +29590,7 @@ function EmojiList(_ref) {
   var labelHeight = getLabelHeight(EmojiListRef.current);
   var topOffset = 0;
   return React.createElement("ul", {
-    className: flairup.cx(styles$8.emojiList),
+    className: shipstyles.cx(styles$8.emojiList),
     ref: EmojiListRef
   }, React.createElement(MeasureEmoji, null), categories.map(function (categoryConfig) {
     var category = categoryFromCategoryConfig(categoryConfig);
@@ -29688,7 +29688,7 @@ function EmojiVariationPicker() {
   }
   return React.createElement("div", {
     ref: VariationPickerRef,
-    className: flairup.cx(styles$9.variationPicker, getMenuDirection() === Direction.Down && styles$9.pointingUp, visible && styles$9.visible),
+    className: shipstyles.cx(styles$9.variationPicker, getMenuDirection() === Direction.Down && styles$9.pointingUp, visible && styles$9.visible),
     style: {
       top: top
     }
@@ -29702,7 +29702,7 @@ function EmojiVariationPicker() {
       getEmojiUrl: getEmojiUrl
     });
   }) : null, React.createElement("div", {
-    className: flairup.cx(styles$9.pointer),
+    className: shipstyles.cx(styles$9.pointer),
     style: pointerStyle
   }));
 }
@@ -29821,7 +29821,7 @@ function Body() {
   useMouseDownHandlers(BodyRef, MOUSE_EVENT_SOURCE.PICKER);
   useOnMouseMove();
   return React.createElement("div", {
-    className: flairup.cx(styles$a.body, commonInteractionStyles.hiddenOnReactions),
+    className: shipstyles.cx(styles$a.body, commonInteractionStyles.hiddenOnReactions),
     ref: BodyRef
   }, React.createElement(EmojiVariationPicker, null), React.createElement(EmojiList, {
     scrollTop: scrollTop
@@ -29948,7 +29948,7 @@ function Flex(_ref) {
     direction = _ref$direction === void 0 ? FlexDirection.ROW : _ref$direction;
   return React.createElement("div", {
     style: _extends({}, style),
-    className: flairup.cx(styles$b.flex, className, styles$b[direction])
+    className: shipstyles.cx(styles$b.flex, className, styles$b[direction])
   }, children);
 }
 var styles$b = /*#__PURE__*/stylesheet.create((_stylesheet$create = {
@@ -29969,7 +29969,7 @@ function Space(_ref) {
     style: _extends({
       flex: 1
     }, style),
-    className: flairup.cx(className)
+    className: shipstyles.cx(className)
   });
 }
 
@@ -30007,7 +30007,7 @@ function BtnSkinToneVariation(_ref) {
   return React.createElement(Button, {
     style: style,
     onClick: onClick,
-    className: flairup.cx("epr-tone-" + skinToneVariation, styles$c.tone, !isOpen && styles$c.closedTone, isActive && styles$c.active),
+    className: shipstyles.cx("epr-tone-" + skinToneVariation, styles$c.tone, !isOpen && styles$c.closedTone, isActive && styles$c.active),
     "aria-pressed": isActive,
     "aria-label": "Skin tone " + skinTonesNamed[skinToneVariation]
   });
@@ -30099,7 +30099,7 @@ function SkinTonePicker(_ref) {
   var expandedSize = isOpen ? fullWidth : ITEM_SIZE + 'px';
   var vertical = direction === SkinTonePickerDirection.VERTICAL;
   return React.createElement(Relative, {
-    className: flairup.cx(styles$d.skinTones, vertical && styles$d.vertical, isOpen && styles$d.open, vertical && isOpen && styles$d.verticalShadow),
+    className: shipstyles.cx(styles$d.skinTones, vertical && styles$d.vertical, isOpen && styles$d.open, vertical && isOpen && styles$d.verticalShadow),
     style: vertical ? {
       flexBasis: expandedSize,
       height: expandedSize
@@ -30107,7 +30107,7 @@ function SkinTonePicker(_ref) {
       flexBasis: expandedSize
     }
   }, React.createElement("div", {
-    className: flairup.cx(styles$d.select),
+    className: shipstyles.cx(styles$d.select),
     ref: SkinTonePickerRef
   }, skinToneVariations.map(function (skinToneVariation, i) {
     var active = skinToneVariation === activeSkinTone;
@@ -30116,7 +30116,7 @@ function SkinTonePicker(_ref) {
       skinToneVariation: skinToneVariation,
       isOpen: isOpen,
       style: {
-        transform: flairup.cx(vertical ? "translateY(-" + i * (isOpen ? ITEM_SIZE : 0) + "px)" : "translateX(-" + i * (isOpen ? ITEM_SIZE : 0) + "px)", isOpen && active && 'scale(1.3)')
+        transform: shipstyles.cx(vertical ? "translateY(-" + i * (isOpen ? ITEM_SIZE : 0) + "px)" : "translateX(-" + i * (isOpen ? ITEM_SIZE : 0) + "px)", isOpen && active && 'scale(1.3)')
       },
       isActive: active,
       onClick: function onClick() {
@@ -30184,7 +30184,7 @@ function Preview() {
     return null;
   }
   return React.createElement(Flex, {
-    className: flairup.cx(styles$e.preview, commonInteractionStyles.hiddenOnReactions, reactionsOpen && styles$e.hideOnReactions)
+    className: shipstyles.cx(styles$e.preview, commonInteractionStyles.hiddenOnReactions, reactionsOpen && styles$e.hideOnReactions)
   }, React.createElement(PreviewBody, null), React.createElement(Space, null), isSkinToneInPreview ? React.createElement(SkinTonePickerMenu, null) : null);
 }
 function PreviewBody() {
@@ -30215,16 +30215,16 @@ function PreviewBody() {
       emojiStyle: emojiStyle,
       size: 45,
       getEmojiUrl: getEmojiUrl,
-      className: flairup.cx(styles$e.emoji)
+      className: shipstyles.cx(styles$e.emoji)
     }) : defaultEmoji ? React.createElement(ViewOnlyEmoji, {
       unified: emojiUnified(defaultEmoji),
       emoji: defaultEmoji,
       emojiStyle: emojiStyle,
       size: 45,
       getEmojiUrl: getEmojiUrl,
-      className: flairup.cx(styles$e.emoji)
+      className: shipstyles.cx(styles$e.emoji)
     }) : null), React.createElement("div", {
-      className: flairup.cx(styles$e.label)
+      className: shipstyles.cx(styles$e.label)
     }, show ? emojiName(emoji) : defaultText));
   }
 }
@@ -30354,7 +30354,7 @@ function CategoryButton(_ref) {
   var hasCustomIcon = icon != null;
   return React.createElement(Button, {
     tabIndex: allowNavigation ? 0 : -1,
-    className: flairup.cx(styles$f.catBtn, commonInteractionStyles.categoryBtn, hasCustomIcon ? styles$f.customIcon : "epr-icn-" + category, (_cx = {}, _cx[ClassNames.active] = isActiveCategory, _cx)),
+    className: shipstyles.cx(styles$f.catBtn, commonInteractionStyles.categoryBtn, hasCustomIcon ? styles$f.customIcon : "epr-icn-" + category, (_cx = {}, _cx[ClassNames.active] = isActiveCategory, _cx)),
     onClick: onClick,
     "aria-label": categoryNameFromCategoryConfig(categoryConfig),
     "aria-selected": isActiveCategory,
@@ -30458,7 +30458,7 @@ function CategoryNavigation() {
   var CategoryNavigationRef = useCategoryNavigationRef();
   var hideCustomCategory = useShouldHideCustomEmojis();
   return React.createElement("div", {
-    className: flairup.cx(styles$g.nav),
+    className: shipstyles.cx(styles$g.nav),
     role: "tablist",
     "aria-label": "Category navigation",
     id: "epr-category-nav-id",
@@ -30516,12 +30516,12 @@ function BtnClearSearch() {
   var clearSearch = useClearSearch();
   var searchClearButtonLabel = useSearchClearButtonLabelConfig();
   return React.createElement(Button, {
-    className: flairup.cx(styles$h.btnClearSearch, commonInteractionStyles.visibleOnSearchOnly),
+    className: shipstyles.cx(styles$h.btnClearSearch, commonInteractionStyles.visibleOnSearchOnly),
     onClick: clearSearch,
     "aria-label": searchClearButtonLabel,
     title: searchClearButtonLabel
   }, React.createElement("div", {
-    className: flairup.cx(styles$h.icnClearnSearch)
+    className: shipstyles.cx(styles$h.icnClearnSearch)
   }));
 }
 var HoverDark = {
@@ -30575,7 +30575,7 @@ var SVGMagnifier = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZG
 
 function IcnSearch() {
   return React.createElement("div", {
-    className: flairup.cx(styles$i.icnSearch)
+    className: shipstyles.cx(styles$i.icnSearch)
   });
 }
 var styles$i = /*#__PURE__*/stylesheet.create(/*#__PURE__*/_extends({
@@ -30604,7 +30604,7 @@ function SearchContainer() {
     return null;
   }
   return React.createElement(Flex, {
-    className: flairup.cx(styles$j.overlay)
+    className: shipstyles.cx(styles$j.overlay)
   }, React.createElement(Search, null), isSkinToneInSearch ? React.createElement(SkinTonePicker, null) : null);
 }
 function Search() {
@@ -30619,13 +30619,13 @@ function Search() {
   var input = SearchInputRef == null ? void 0 : SearchInputRef.current;
   var value = input == null ? void 0 : input.value;
   return React.createElement(Relative, {
-    className: flairup.cx(styles$j.searchContainer)
+    className: shipstyles.cx(styles$j.searchContainer)
   }, React.createElement("input", {
     // eslint-disable-next-line jsx-a11y/no-autofocus
     autoFocus: autoFocus,
     "aria-label": 'Type to search for an emoji',
     onFocus: closeAllOpenToggles,
-    className: flairup.cx(styles$j.search),
+    className: shipstyles.cx(styles$j.search),
     type: "text",
     "aria-controls": "epr-search-id",
     placeholder: placeholder,
@@ -30636,7 +30636,7 @@ function Search() {
     ref: SearchInputRef
   }), searchTerm ? React.createElement("div", {
     role: "status",
-    className: flairup.cx('epr-status-search-results', styles$j.visuallyHidden),
+    className: shipstyles.cx('epr-status-search-results', styles$j.visuallyHidden),
     "aria-live": "polite",
     id: "epr-search-id",
     "aria-atomic": "true"
@@ -30725,7 +30725,7 @@ var styles$j = /*#__PURE__*/stylesheet.create(/*#__PURE__*/_extends({
 
 function Header() {
   return React.createElement(Relative, {
-    className: flairup.cx('epr-header', commonInteractionStyles.hiddenOnReactions)
+    className: shipstyles.cx('epr-header', commonInteractionStyles.hiddenOnReactions)
   }, React.createElement(SearchContainer, null), React.createElement(CategoryNavigation, null));
 }