@layers-app/shared 0.4.5 → 0.4.7

package/dist/components/EmojiPicker/EmojiPicker.js

@@ -1,39 +1,46 @@
-import { jsxs as j, jsx as o } from "react/jsx-runtime";
-import { useState as d, useMemo as A, useEffect as T } from "react";
-import { useTranslation as E } from "react-i18next";
-import { Popover as k, Center as G, Tabs as t, Flex as C, Button as J } from "@mantine/core";
-import { IconEntity as K } from "../ProjectIcon/ProjectIcon.js";
-import { EmojiPanel as U } from "./EmojiPanel.js";
-import { IconsPanel as V } from "./IconsPanel.js";
-import f from "./EmojiPicker.module.css.js";
-const oe = ({
-  project: N,
-  value: i,
-  querySearch: l,
-  children: R,
+import { jsxs as b, jsx as i } from "react/jsx-runtime";
+import { useState as d, useMemo as U, useEffect as N } from "react";
+import { useTranslation as V } from "react-i18next";
+import { Popover as j, Center as X, Tabs as o, Flex as P, Button as Y } from "@mantine/core";
+import { getEnvConfig as Z } from "../../config/envConfig.js";
+import { usePlatform as q } from "../../hooks/usePlatform.js";
+import { FilePickerGiphy as S } from "../FilePicker/FilePickerGiphy.js";
+import { IconEntity as W } from "../ProjectIcon/ProjectIcon.js";
+import { EmojiPanel as _ } from "./EmojiPanel.js";
+import { IconsPanel as ee } from "./IconsPanel.js";
+import l from "./EmojiPicker.module.css.js";
+const de = ({
+  project: R,
+  value: s,
+  querySearch: c,
+  children: w,
   onChange: p,
   position: D = "bottom-start",
-  popoverProps: P,
+  popoverProps: k,
   showIcons: u,
   showColors: I,
-  defaultActiveTab: w = null,
-  showEmojis: s = !0,
-  withinPortal: L = !1,
-  locales: h,
-  openWhen: g = "click",
-  triggerRegex: b = /(^|\s):([^\s:]{1,})$/,
-  typingSeq: n,
-  showRemoveButton: M = !0,
-  keepOpenOnRandom: z = !1,
-  closeOnSelect: y = !0
+  showGifs: E,
+  onSelectGif: F,
+  defaultActiveTab: L = null,
+  showEmojis: n = !0,
+  withinPortal: M = !1,
+  locales: g,
+  openWhen: h = "click",
+  triggerRegex: y = /(^|\s):([^\s:]{1,})$/,
+  typingSeq: m,
+  showRemoveButton: z = !0,
+  keepOpenOnRandom: A = !1,
+  showRandomButton: B = !0,
+  closeOnSelect: v = !0
 }) => {
-  const { t: e } = E("ui"), [c, r] = d(!1), [B, x] = d(w), [F, H] = d(i || null), [v, O] = d(null), a = A(() => ({
+  const { t: e } = V("ui"), G = q(), x = !!E && G.has("giphy") && Z().media?.giphyEnabled !== !1, [f, r] = d(!1), [H, T] = d(L), [O, Q] = d(s || null), [C, $] = d(null), t = U(() => ({
     emojis: e("emojis"),
     remove: e("remove"),
     search: e("search"),
     random: e("random"),
     searchResults: e("emojiPicker.searchResults"),
     icons: e("emojiPicker.icons"),
+    gifs: e("emojiPicker.gifs"),
     searchNoResults: e("emojiPicker.searchNoResults"),
     chooseColor: e("emojiPicker.chooseColor"),
     emojiCategory: {
@@ -47,32 +54,32 @@ const oe = ({
       symbols: e("emojiPicker.categories.symbols"),
       flags: e("emojiPicker.categories.flags"),
       additional: e("emojiPicker.categories.additional"),
-      ...h?.emojiCategory
+      ...g?.emojiCategory
     },
-    ...h
-  }), [e, h]);
-  T(() => {
-    const m = u && K.parse(i)?.icon ? "icons" : s ? "emojis" : null;
-    !c && m && x(m);
-  }, [c, s, u, i]), T(() => {
-    if (g !== "realtime" || typeof n != "number" || v === n) return;
-    O(n);
-    const m = l ?? "", $ = !!s && b.test(m);
-    r($);
+    ...g
+  }), [e, g]);
+  N(() => {
+    const a = u && W.parse(s)?.icon ? "icons" : n ? "emojis" : null;
+    !f && a && T(a);
+  }, [f, n, u, s]), N(() => {
+    if (h !== "realtime" || typeof m != "number" || C === m) return;
+    $(m);
+    const a = c ?? "", K = !!n && y.test(a);
+    r(K);
   }, [
-    g,
-    n,
-    v,
-    l,
-    b,
-    s
+    h,
+    m,
+    C,
+    c,
+    y,
+    n
   ]);
-  const Q = typeof l == "string";
-  return /* @__PURE__ */ j(
-    k,
+  const J = typeof c == "string";
+  return /* @__PURE__ */ b(
+    j,
     {
-      withinPortal: L,
-      opened: c,
+      withinPortal: M,
+      opened: f,
       onChange: r,
       position: D,
       radius: "var(--mantine-spacing-sm)",
@@ -97,20 +104,20 @@ const oe = ({
           ]
         }
       },
-      ...P || {},
+      ...k || {},
       children: [
-        /* @__PURE__ */ o(k.Target, { children: /* @__PURE__ */ o(
-          G,
+        /* @__PURE__ */ i(j.Target, { children: /* @__PURE__ */ i(
+          X,
           {
-            onClick: g === "click" && !P?.disabled ? () => r(!c) : void 0,
-            children: R ?? F
+            onClick: h === "click" && !k?.disabled ? () => r(!f) : void 0,
+            children: w ?? O
           }
         ) }),
-        /* @__PURE__ */ o(k.Dropdown, { w: "380px", children: /* @__PURE__ */ j(
-          t,
+        /* @__PURE__ */ i(j.Dropdown, { w: "380px", children: /* @__PURE__ */ b(
+          o,
           {
-            value: B,
-            onChange: x,
+            value: H,
+            onChange: T,
             keepMounted: !1,
             h: "100%",
             styles: {
@@ -127,8 +134,8 @@ const oe = ({
               }
             },
             children: [
-              !Q && /* @__PURE__ */ j(
-                t.List,
+              !J && /* @__PURE__ */ b(
+                o.List,
                 {
                   style: {
                     gap: "4px"
@@ -136,28 +143,38 @@ const oe = ({
                   h: 54,
                   px: 8,
                   children: [
-                    s && /* @__PURE__ */ o(
-                      t.Tab,
+                    n && /* @__PURE__ */ i(
+                      o.Tab,
                       {
-                        className: f.originalTab,
+                        className: l.originalTab,
                         h: "100%",
                         p: 0,
                         value: "emojis",
-                        children: /* @__PURE__ */ o(C, { className: f.customTab, px: "sm", h: 36, children: a.emojis })
+                        children: /* @__PURE__ */ i(P, { className: l.customTab, px: "sm", h: 36, children: t.emojis })
                       }
                     ),
-                    u && /* @__PURE__ */ o(
-                      t.Tab,
+                    u && /* @__PURE__ */ i(
+                      o.Tab,
                       {
-                        className: f.originalTab,
+                        className: l.originalTab,
                         h: "100%",
                         p: 0,
                         value: "icons",
-                        children: /* @__PURE__ */ o(C, { className: f.customTab, px: "sm", h: 36, children: a.icons })
+                        children: /* @__PURE__ */ i(P, { className: l.customTab, px: "sm", h: 36, children: t.icons })
                       }
                     ),
-                    !!String(i) && M && /* @__PURE__ */ o(
-                      J,
+                    x && /* @__PURE__ */ i(
+                      o.Tab,
+                      {
+                        className: l.originalTab,
+                        h: "100%",
+                        p: 0,
+                        value: "gifs",
+                        children: /* @__PURE__ */ i(P, { className: l.customTab, px: "sm", h: 36, children: t.gifs })
+                      }
+                    ),
+                    !!String(s) && z && /* @__PURE__ */ i(
+                      Y,
                       {
                         variant: "subtle",
                         fz: "sm",
@@ -168,41 +185,59 @@ const oe = ({
                         color: "var(--mantine-color-gray-light-color)",
                         onClick: () => p?.(""),
                         style: { marginLeft: "auto" },
-                        children: a.remove
+                        children: t.remove
                       }
                     )
                   ]
                 }
               ),
-              /* @__PURE__ */ o(t.Panel, { mah: 470, style: { overflow: "auto" }, value: "emojis", children: /* @__PURE__ */ o(
-                U,
+              /* @__PURE__ */ i(o.Panel, { mah: 470, style: { overflow: "auto" }, value: "emojis", children: /* @__PURE__ */ i(
+                _,
                 {
                   onChange: p,
-                  value: i,
-                  querySearch: l,
-                  locales: a,
-                  setRandomIcon: H,
-                  onClose: y ? () => r(!1) : () => {
+                  value: s,
+                  querySearch: c,
+                  locales: t,
+                  setRandomIcon: Q,
+                  showRandomButton: B,
+                  onClose: v ? () => r(!1) : () => {
                   }
                 }
               ) }),
-              /* @__PURE__ */ o(
-                t.Panel,
+              /* @__PURE__ */ i(
+                o.Panel,
                 {
                   mah: 470,
                   h: "100%",
                   style: { overflow: "auto" },
                   value: "icons",
-                  children: /* @__PURE__ */ o(
-                    V,
+                  children: /* @__PURE__ */ i(
+                    ee,
                     {
-                      project: N,
+                      project: R,
                       onChange: p,
-                      value: i,
-                      locales: a,
+                      value: s,
+                      locales: t,
                       showColors: I,
-                      keepOpenOnRandom: z,
-                      onClose: y ? () => r(!1) : () => {
+                      keepOpenOnRandom: A,
+                      onClose: v ? () => r(!1) : () => {
+                      }
+                    }
+                  )
+                }
+              ),
+              x && /* @__PURE__ */ i(
+                o.Panel,
+                {
+                  mah: 470,
+                  style: { overflow: "auto" },
+                  p: "sm",
+                  value: "gifs",
+                  children: /* @__PURE__ */ i(
+                    S,
+                    {
+                      onChange: (a) => {
+                        F?.(a), r(!1);
                       }
                     }
                   )
@@ -216,5 +251,5 @@ const oe = ({
   );
 };
 export {
-  oe as EmojiPicker
+  de as EmojiPicker
 };

package/dist/components/EmojiPicker/EmojiPicker.module.css.js

@@ -1,13 +1,13 @@
-const o = "_item_s1gb0_1", s = "_randomIcon_s1gb0_51", a = "_originalTab_s1gb0_59", n = "_customTab_s1gb0_71", t = {
+const o = "_item_o1hlf_1", a = "_randomIcon_o1hlf_26", n = "_originalTab_o1hlf_30", t = "_customTab_o1hlf_36", _ = {
   item: o,
-  randomIcon: s,
-  originalTab: a,
-  customTab: n
+  randomIcon: a,
+  originalTab: n,
+  customTab: t
 };
 export {
-  n as customTab,
-  t as default,
+  t as customTab,
+  _ as default,
   o as item,
-  a as originalTab,
-  s as randomIcon
+  n as originalTab,
+  a as randomIcon
 };

package/dist/components/EmojiPicker/IconsPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/IconsPanel.tsx"],"names":[],"mappings":"AAoCA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AA0BjD,eAAO,MAAM,UAAU,sHASlB,IAAI,CACL,gBAAgB,EAChB,SAAS,GAAG,YAAY,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAC5D,GAAG;IACF,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,6CAwSF,CAAC"}
+{"version":3,"file":"IconsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/IconsPanel.tsx"],"names":[],"mappings":"AAoCA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AA0BjD,eAAO,MAAM,UAAU,sHASlB,IAAI,CACL,gBAAgB,EAChB,SAAS,GAAG,YAAY,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAC5D,GAAG;IACF,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,6CA4SF,CAAC"}

package/dist/components/EmojiPicker/IconsPanel.js

@@ -1,23 +1,23 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { memo as M, useState as x, useEffect as U, useCallback as V, useMemo as j } from "react";
+import { memo as M, useState as k, useEffect as U, useCallback as V, useMemo as j } from "react";
 import { useTranslation as G } from "react-i18next";
-import { Search01Icon as Q, ShuffleIcon as Y } from "@hugeicons/core-free-icons";
+import { Search01Icon as Q, ShuffleIcon as W } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon as L } from "@hugeicons/react";
-import { useEvent as _ } from "@layers-app/draggable-ui";
-import { useMantineTheme as J, parseThemeColor as K, darken as W, Stack as y, Text as b, Flex as z, FocusTrap as X, TextInput as Z, Tooltip as ee, ActionIcon as oe, Box as te, Paper as E, SimpleGrid as N } from "@mantine/core";
+import { useEvent as Y } from "@layers-app/draggable-ui";
+import { useMantineTheme as _, parseThemeColor as J, darken as K, Stack as y, Text as b, Flex as z, FocusTrap as X, TextInput as Z, Tooltip as ee, ActionIcon as oe, Box as te, Paper as E, SimpleGrid as N } from "@mantine/core";
 import { groupBy as re } from "lodash-es";
 import { DEFAULT_VALUES as ie } from "../../constants.js";
 import { ColorPicker as ne } from "../ColorPicker/ColorPicker.js";
 import { NoData as ce } from "../NoData/NoData.js";
-import { IconEntity as I, IconType as A } from "../ProjectIcon/ProjectIcon.js";
+import { IconEntity as w, IconType as A } from "../ProjectIcon/ProjectIcon.js";
 import { customIcons as D } from "./custom-icons/customIcons.js";
 import { getIconsList as F, getRandomIcon as ae } from "./utils.js";
 import h from "./EmojiPicker.module.css.js";
 async function le(a, c, l = 500) {
   const u = [], p = a.length;
   for (let r = 0; r < p; r += l) {
-    const w = a.slice(r, r + l).filter(c);
-    u.push(...w), await new Promise((f) => setTimeout(f, 0));
+    const I = a.slice(r, r + l).filter(c);
+    u.push(...I), await new Promise((f) => setTimeout(f, 0));
   }
   return u;
 }
@@ -31,7 +31,7 @@ const Ce = M(
     project: r,
     keepOpenOnRandom: C = !1
   }) => {
-    const w = J(), [f, R] = x(""), { t: k } = G("ui"), [P, $] = x(
+    const I = _(), [f, R] = k(""), { t: x } = G("ui"), [P, $] = k(
       []
     );
     U(() => {
@@ -45,7 +45,7 @@ const Ce = M(
         );
       })();
     }, [r]);
-    const [T, S] = x([]), H = V(
+    const [T, S] = k([]), H = V(
       async (o) => {
         const t = o.currentTarget.value;
         R(t);
@@ -57,39 +57,41 @@ const Ce = M(
         S(v.map((d) => d.n));
       },
       [r]
-    ), i = I.parse(u), g = _((o) => {
+    ), i = w.parse(u), g = Y((o) => {
       const t = o.currentTarget.getAttribute("data-icon");
       t && (l?.(
-        I.stringify({
+        w.stringify({
           icon: t.replace("i:", ""),
           color: i?.color,
           type: i?.type || A.FILLED
         })
       ), a || p());
-    }), n = K({
+    }), n = J({
       color: i?.color || ie.COLORS[0],
-      theme: w
+      theme: I
     }), O = j(() => n.isThemeColor ? {
       "--icon-color": `var(--mantine-color-${n.color}-filled)`,
       "--icon-color-hover": `var(--mantine-color-${n.color}-filled-hover)`
     } : {
       "--icon-color": n.value,
-      "--icon-color-hover": W(n.value, 0.2)
+      "--icon-color-hover": K(n.value, 0.2)
     }, [n]), q = async () => {
       const o = await ae(r);
-      S([]), l?.(I.stringify({ icon: o, color: i?.color })), !a && !C && p();
+      S([]), l?.(w.stringify({ icon: o, color: i?.color })), !a && !C && p();
     };
     return /* @__PURE__ */ m(y, { w: "100%", gap: "sm", pt: 12, pb: 8, h: "100%", children: [
       a && /* @__PURE__ */ m(y, { gap: 4, px: 8, w: "100%", children: [
-        /* @__PURE__ */ e(b, { lh: "140%", fw: 500, c: "dimmed", fz: "xs", children: c?.chooseColor || k("chooseColor") }),
+        /* @__PURE__ */ e(b, { lh: "140%", fw: 500, c: "dimmed", fz: "xs", children: c?.chooseColor || x("chooseColor") }),
         /* @__PURE__ */ e(
           ne,
           {
             swatchSize: 24,
-            gap: 4,
+            fullWidth: !0,
+            w: "100%",
+            px: 4,
             value: n.color,
             onChange: (o) => l?.(
-              I.stringify({
+              w.stringify({
                 color: o,
                 icon: i?.icon,
                 type: i?.type || A.FILLED
@@ -130,7 +132,7 @@ const Ce = M(
             radius: "var(--mantine-radius-default)"
           }
         ) }),
-        /* @__PURE__ */ e(ee, { withArrow: !0, label: c?.random || k("random"), children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e(ee, { withArrow: !0, label: c?.random || x("random"), children: /* @__PURE__ */ e(
           oe,
           {
             h: 36,
@@ -144,7 +146,7 @@ const Ce = M(
               {
                 color: "var(--mantine-color-default-color)",
                 size: 20,
-                icon: Y
+                icon: W
               }
             )
           }
@@ -158,8 +160,8 @@ const Ce = M(
           style: {
             overflowY: "auto"
           },
-          gap: 16,
-          children: f ? /* @__PURE__ */ m(y, { flex: 1, align: "stretch", children: [
+          gap: "xs",
+          children: f ? /* @__PURE__ */ m(y, { flex: 1, align: "stretch", gap: 0, children: [
             /* @__PURE__ */ e(
               E,
               {
@@ -214,12 +216,13 @@ const Ce = M(
               E,
               {
                 bg: "light-dark(var(--mantine-color-white), var(--mantine-color-dark-6))",
-                px: 4,
-                py: 6,
+                px: 6,
+                py: 2,
+                h: 23,
                 pos: "sticky",
                 top: -1,
                 style: { zIndex: 1 },
-                children: /* @__PURE__ */ e(b, { fz: "xs", fw: 500, lh: "140%", c: "dimmed", children: o.id || k("noCat") })
+                children: /* @__PURE__ */ e(b, { fz: "xs", fw: 500, lh: "140%", c: "dimmed", children: o.id || x("noCat") })
               }
             ),
             /* @__PURE__ */ e(N, { cols: 10, spacing: 0, children: o.icons.map((t) => {

package/dist/components/EntityIcon.d.ts

@@ -9,6 +9,7 @@ export interface EntityIconData {
     isFolder?: boolean;
     pathById?: string[];
     isOpen?: boolean;
+    avatarUrl?: string | null;
 }
 export declare const EntityIcon: <T extends EntityIconData>({ item, }: {
     item?: T;

package/dist/components/EntityIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EntityIcon.d.ts","sourceRoot":"","sources":["../../src/components/EntityIcon.tsx"],"names":[],"mappings":"AA4BA,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAQD,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,cAAc,EAAE,WAElD;IACD,IAAI,CAAC,EAAE,CAAC,CAAC;CACV,mDAkJA,CAAC"}
+{"version":3,"file":"EntityIcon.d.ts","sourceRoot":"","sources":["../../src/components/EntityIcon.tsx"],"names":[],"mappings":"AAgCA,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAQD,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,cAAc,EAAE,WAElD;IACD,IAAI,CAAC,EAAE,CAAC,CAAC;CACV,mDAmMA,CAAC"}