@snowball-tech/fractal
Version:
Fractal's (Snowball's design system) React component library based on RadixUI and PandaCSS
215 lines (189 loc) • 10.6 kB
JavaScript
'use client';
import{a as x,c as S,e as T,g as I,h as L,j as q,l as N,n as O,p as _,r as P}from"./chunk-EURLLCVV.js";import{a as A}from"./chunk-6S7RPWAM.js";import{b as E}from"./chunk-CMFNILWJ.js";import{b as j}from"./chunk-XYM7TA65.js";import ie from"@emoji-mart/data";import ae from"@emoji-mart/react";import{useCallback as $,useEffect as f,useRef as D,useState as ne}from"react";import F from"lodash/fp/isEmpty";import ce from"lodash/fp/noop";import se from"lodash/fp/omit";import{jsx as R,jsxs as pe}from"react/jsx-runtime";var U=({autoFocus:W=!0,categories:C=S,custom:M=[],customIcon:H={},exclude:V=[],frequentsRowNumber:G=4,locale:J=T,navPosition:m=I,onClickOutside:K,onSelect:X,perLine:Y=12,previewPosition:v=L,search:g,searchPosition:B=q,set:Q=O,skinTone:Z=_,skinTonePosition:ee=N,theme:re,version:te=P,...n})=>{let u=A(re),s=D(null),[r,oe]=ne(null),k=$(()=>{if(!s.current)return;let d=s.current.querySelector("em-emoji-picker");if(!d)return;let{shadowRoot:a}=d;if(!a)return;let o=a.querySelector("#root");o&&(oe(o),setTimeout(()=>{s.current?.classList?.remove("invisible")},100))},[s]),p=D(null);f(()=>(p.current=setInterval(k,50),()=>{p.current!==null&&clearInterval(p.current)}),[k]),f(()=>{r&&p.current!==null&&clearInterval(p.current)},[r]);let l=()=>setTimeout(h,1),h=$(()=>{if(!r)return ce;if(r.setAttribute("part",`root root-${u}`),!F(n.style)){let t=Object.entries(n.style).map(([e,i])=>`${e}:${i}`).join(";");r.setAttribute("style",`${r.getAttribute("style")}; ${t}`)}let d=j(`${E}-${x}`,r.getAttribute("class"),n.className);r.setAttribute("class",d);let a=r.querySelector("#nav"),o=null;a&&(a.setAttribute("part",`nav nav-${m}`),o=a.querySelector("div.flex"),o&&(o.setAttribute("part","nav-inner"),o.querySelectorAll("button").forEach(e=>{e.setAttribute("part",`nav-button${e.getAttribute("aria-selected")?" nav-button-active":""}`),e.removeEventListener("click",l),e.addEventListener("click",l)})));let b=r.querySelector(".search");if(b){b.setAttribute("part","search-wrapper");let t=b.querySelector('input[type="search"]');t&&(t.setAttribute("part","search-input"),F(g)||(t.value=g,t.dispatchEvent(new Event("input",{bubbles:!0}))));let e=b.querySelector(".icon");if(e){e.setAttribute("part","search-icon");let i=e.querySelector("svg");i&&i.setAttribute("part","search-icon-svg")}}let c=r.querySelector(".scroll");c&&(c.setAttribute("part","scroll-area"),c.addEventListener("scroll",l),c.querySelectorAll(".category").forEach(e=>{let i=e.getAttribute("data-id");e.setAttribute("part",`category category-${i}`);let w=e.querySelector("div:first-child");w&&w.setAttribute("part",`category-title category-${i}-title`);let z=e.querySelector("div:last-child");z&&z.setAttribute("part",`category-emojis category-${i}-emojis`)}));let y=r.querySelector("#preview");if(y){y.setAttribute("part",`preview preview-${v}`);let t=y.querySelector(".preview-placeholder");t&&t.setAttribute("part","preview-placeholder")}return()=>{a&&o&&o.querySelectorAll("button").forEach(e=>{e.setAttribute("part",`nav-button${e.getAttribute("aria-selected")?" nav-button-active":""}`),e.addEventListener("click",l)}),c&&c.removeEventListener("scroll",l)}},[m,v,n.className,n.style,r,g,u]);return f(()=>h(),[h]),pe("div",{ref:s,className:"invisible min-w-[400px]",children:[R("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);
}
`}),R(ae,{autoFocus:W,categories:C,categoryIcons:H,custom:M,data:ie,dynamicWidth:!1,emojiVersion:te,exceptEmojis:V,locale:J,maxFrequentRows:G,navPosition:m,perLine:Y,previewPosition:v,searchPosition:B,set:Q,skin:Z,skinTonePosition:ee,theme:u||"auto",onClickOutside:K,onEmojiSelect:X,...se(["className","style"],n)})]})};U.displayName="EmojiPicker";var we=U;export{U as a,we as b};
//# sourceMappingURL=chunk-XULUU2RB.js.map