@snowball-tech/fractal/dist/src/components/EmojiPicker/EmojiPicker.js

Fractal's (Snowball's design system) React component library based on RadixUI and TailwindCSS

import{PREFIX as e}from"../../constants.js";import{cn as t}from"../../styles/helpers.js";import n from"../../hooks/useTheme.js";import{DEFAULT_CATEGORIES as r,DEFAULT_EMOJIS_SET as i,DEFAULT_PREVIEW_POSITION as a,DEFAULT_SEARCH_POSITION as o,DEFAULT_SKIN_TONE_POSITION as s,DEFAULT_VERSION as c,GROUP_NAME as l}from"./EmojiPicker.constants.js";import{useCallback as u,useEffect as d,useRef as f,useState as p}from"react";import m from"lodash/fp/isEmpty.js";import h from"lodash/fp/omit.js";import{jsx as g,jsxs as _}from"react/jsx-runtime";import v from"lodash/fp/noop.js";import y from"@emoji-mart/data";import b from"@emoji-mart/react";const x=({autoFocus:x=!0,categories:S=r,custom:C=[],customIcon:w={},exclude:T=[],frequentsRowNumber:E=4,locale:D=`en`,navPosition:O=`top`,onClickOutside:k,onSelect:A,perLine:j=12,previewPosition:M=a,search:N,searchPosition:P=o,set:F=i,skinTone:I=1,skinTonePosition:L=s,theme:R,version:z=c,...B})=>{let V=n(R),H=f(null),[U,W]=p(null),G=u(()=>{if(!H.current)return;let e=H.current.querySelector(`em-emoji-picker`);if(!e)return;let{shadowRoot:t}=e;if(!t)return;let n=t.querySelector(`#root`);n&&(W(n),setTimeout(()=>{H.current?.classList?.remove(`invisible`)},100))},[H]),K=f(null);d(()=>(K.current=setInterval(G,50),()=>{K.current!==null&&clearInterval(K.current)}),[G]),d(()=>{U&&K.current!==null&&clearInterval(K.current)},[U]);let q=()=>setTimeout(J,1),J=u(()=>{if(!U)return v;if(U.setAttribute(`part`,`root root-${V}`),!m(B.style)){let e=Object.entries(B.style).map(([e,t])=>`${e}:${t}`).join(`;`);U.setAttribute(`style`,`${U.getAttribute(`style`)}; ${e}`)}let n=t(`${e}-${l}`,U.getAttribute(`class`),B.className);U.setAttribute(`class`,n);let r=U.querySelector(`#nav`),i=null;r&&(r.setAttribute(`part`,`nav nav-${O}`),i=r.querySelector(`div.flex`),i&&(i.setAttribute(`part`,`nav-inner`),i.querySelectorAll(`button`).forEach(e=>{e.setAttribute(`part`,`nav-button${e.getAttribute(`aria-selected`)?` nav-button-active`:``}`),e.removeEventListener(`click`,q),e.addEventListener(`click`,q)})));let a=U.querySelector(`.search`);if(a){a.setAttribute(`part`,`search-wrapper`);let e=a.querySelector(`input[type="search"]`);e&&(e.setAttribute(`part`,`search-input`),m(N)||(e.value=N,e.dispatchEvent(new Event(`input`,{bubbles:!0}))));let t=a.querySelector(`.icon`);if(t){t.setAttribute(`part`,`search-icon`);let e=t.querySelector(`svg`);e&&e.setAttribute(`part`,`search-icon-svg`)}}let o=U.querySelector(`.scroll`);o&&(o.setAttribute(`part`,`scroll-area`),o.addEventListener(`scroll`,q),o.querySelectorAll(`.category`).forEach(e=>{let t=e.getAttribute(`data-id`);e.setAttribute(`part`,`category category-${t}`);let n=e.querySelector(`div:first-child`);n&&n.setAttribute(`part`,`category-title category-${t}-title`);let r=e.querySelector(`div:last-child`);r&&r.setAttribute(`part`,`category-emojis category-${t}-emojis`)}));let s=U.querySelector(`#preview`);if(s){s.setAttribute(`part`,`preview preview-${M}`);let e=s.querySelector(`.preview-placeholder`);e&&e.setAttribute(`part`,`preview-placeholder`)}return()=>{r&&i&&i.querySelectorAll(`button`).forEach(e=>{e.setAttribute(`part`,`nav-button${e.getAttribute(`aria-selected`)?` nav-button-active`:``}`),e.addEventListener(`click`,q)}),o&&o.removeEventListener(`scroll`,q)}},[O,M,B.className,B.style,U,N,V]);return d(()=>J(),[J]),_(`div`,{ref:H,className:`invisible min-w-[400px]`,children:[g(`style`,{children:`
    em-emoji-picker {
      --border-radius: var(--size-radius-s);
      --border-size: var(--size-border-1);
      --font-family: var(--typography-body-1-font-family);
      --font-size: var(--typography-body-1-font-size);
      --preview-subtitle-size: var(--typography-body-2-font-size);
      --preview-title-size: var(--typography-body-1-font-size);
      --category-icon-size: var(--size-spacing-5);
    }

    em-emoji-picker::part(root-light) {
      --rgb-accent: var(--color-brand-primary-light);
      --rgb-background: var(--color-background-body-white);
      --rgb-border: var(--color-border-default);
      --rgb-color: var(--color-text-dark);
      --rgb-input: var(--color-background-body-white);
      --rgb-button: var(--color-decorative-pink-90);
      --shadow-color: var(--color-text-dark);
      --shadow: var(--shadow-brutal-2-light);
    }

    em-emoji-picker::part(root-dark) {
      --rgb-accent: var(--color-brand-primary-dark);
      --rgb-background: var(--color-brand-body-dark);
      --rgb-border: var(--color-border-dark);
      --rgb-color: var(--color-text-light);
      --rgb-input: var(--color-background-body-dark);
      --rgb-button: var(--color-decorative-pink-90);
      --shadow-color: var(--color-brand-primary-dark);
      --shadow: var(--shadow-brutal-2-dark);
    }

    em-emoji-picker::part(root) {
      background-color: var(--rgb-background);
      border: var(--border-size) solid var(--rgb-border);
      box-shadow: var(--shadow);
      color: var(--rgb-color);
      width: fit-content !important;

      --padding: var(--size-spacing-1);
      --sidebar-width: var(--size-spacing-half);
      --em-color-border: var(--color-base-grey-70);
      --em-color-border-over: var(--color-base-grey-50);
    }

    em-emoji-picker::part(nav)::before,
    em-emoji-picker::part(preview)::before {
      display: none;
      content: '';
    }

    em-emoji-picker::part(nav),
    em-emoji-picker::part(preview) {
      padding: var(--padding);
    }

    em-emoji-picker::part(nav) {
      padding-block: var(--size-spacing-1);
    }

    em-emoji-picker::part(nav-bottom) {
      border-top: var(--border-size) solid var(--rgb-border);
    }

    em-emoji-picker::part(nav-top) {
      border-bottom: var(--border-size) solid var(--rgb-border);
    }

    em-emoji-picker::part(nav-inner) {
      flex-wrap: wrap;
      gap: var(--size-spacing-1);
    }

    em-emoji-picker::part(nav-button) {
      align-items: center;
      background-color: transparent;
      border-radius: var(--size-radius-rounded);
      display: flex;
      height: var(--category-icon-size);
      justify-content: center;
      max-height: var(--category-icon-size);
      max-width: var(--category-icon-size);
      min-height: var(--category-icon-size);
      min-width: var(--category-icon-size);
      outline-offset: 2px;
      outline: 2px solid transparent;
      padding: var(--size-spacing-1);
      position: relative;
      text-decoration-line: none;
      transition-property: 0.3s;
      transition-property: color, background-color, border-color,
        text-decoration-color, fill, stroke;
      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
      width: var(--category-icon-size);
    }

    em-emoji-picker::part(nav-button-active)::after {
      content: '';
      position: absolute;
      bottom: calc(var(--size-spacing-1) * -1);
      height: 2px;
      width: 100%;
      background-color: var(--rgb-accent);
    }

    em-emoji-picker::part(nav-button):hover {
      background-color: var(--rgb-button);
    }

    em-emoji-picker::part(search-wrapper) {
      width: 100%;
      font-family: var(--typography-body-1-font-family);
      font-size: var(--typography-body-1-font-size);
      font-weight: var(--typography-body-1-font-weight);
      letter-spacing: 0;
      line-height: var(--typography-body-1-line-height);
      max-width: 100%;
      position: relative;
    }

    em-emoji-picker::part(search-icon) {
      display: flex;
      left: var(--size-spacing-1);
      max-width: 100%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: fit-content;
    }

    em-emoji-picker::part(search-icon-svg) {
      color: var(--rgb-color);
      height: var(--size-spacing-3);
      width: var(--size-spacing-3);
    }

    em-emoji-picker::part(search-input) {
      align-items: center;
      appearance: textfield;
      background-color: var(--rgb-input);
      border-radius: var(--border-radius);
      border: var(--border-size) solid var(--rgb-border);
      display: flex;
      height: var(--size-spacing-6);
      max-height: var(--size-spacing-6);
      max-width: 100%;
      min-width: var(--size-spacing-6);
      outline-offset: 2px;
      outline: 2px solid transparent;
      padding-block: var(--size-spacing-1);
      padding-inline: var(--size-spacing-2);
      padding-left: var(--size-spacing-5);
      text-align: left;
      transition-duration: 0.3s;
      transition-property: border-color;
      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
      width: 100%;
    }

    em-emoji-picker::part(search-input):hover {
      border-color: var(--rgb-border);
      box-shadow: inset 0 0 0 1px var(--shadow-color);
    }

    em-emoji-picker::part(search-input):focus {
      border-color: var(--rgb-accent);
      box-shadow: inset 0 0 0 1px var(--rgb-accent);
    }

    em-emoji-picker::part(search-input)::placeholder {
      color: var(--color-text-placeholder);
      font-size: var(--typography-body-1-font-size) !important;
      opacity: 1;
    }

    em-emoji-picker::part(category) {
      margin-bottom: var(--size-spacing-1);
    }

    em-emoji-picker::part(category-title) {
      background-color: var(--rgb-background);
      backdrop-filter: unset;
      font-family: var(--typography-body-1-median-font-family);
      font-size: var(--typography-body-1-median-font-size);
      font-weight: var(--typography-body-1-median-font-weight);
      letter-spacing: 0;
      line-height: var(--typography-body-1-median-line-height);
    }

    em-emoji-picker::part(preview) {
      max-height: var(--size-spacing-9);
      min-height: var(--size-spacing-9);
      height: var(--size-spacing-9);
      padding-block: var(--size-spacing-2);
    }

    em-emoji-picker::part(preview-bottom) {
      border-top: var(--border-size) solid var(--rgb-border);
    }

    em-emoji-picker::part(preview-top) {
      border-bottom: var(--border-size) solid var(--rgb-border);
    }

    em-emoji-picker::part(preview-placeholder) {
      font-family: var(--typography-heading-4-font-family);
      font-size: var(--typography-heading-4-font-size);
      font-weight: var(--typography-heading-4-font-weight);
      letter-spacing: 0;
      line-height: var(--typography-heading-4-line-height);
    }
  `}),g(b,{autoFocus:x,categories:S,categoryIcons:w,custom:C,data:y,dynamicWidth:!1,emojiVersion:z,exceptEmojis:T,locale:D,maxFrequentRows:E,navPosition:O,perLine:j,previewPosition:M,searchPosition:P,set:F,skin:I,skinTonePosition:L,theme:V||`auto`,onClickOutside:k,onEmojiSelect:A,...h([`className`,`style`],B)})]})};x.displayName=`EmojiPicker`;export{x as default};
//# sourceMappingURL=EmojiPicker.js.map