next-helios-fe 1.9.9 → 1.9.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.9.9",
+  "version": "1.9.10",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/dropdown/index.tsx

@@ -7,6 +7,9 @@ import { Item, type ItemProps } from "./item";
 interface DropdownProps extends Omit<Dp, "label" | "trigger"> {
   trigger?: React.ReactNode;
   actionTrigger?: "click" | "hover";
+  options?: {
+    disableMaxHeight?: boolean;
+  };
 }
 
 interface DropdownComponent extends React.FC<DropdownProps> {
@@ -17,6 +20,7 @@ interface DropdownComponent extends React.FC<DropdownProps> {
 export const Dropdown: DropdownComponent = ({
   trigger,
   actionTrigger,
+  options,
   ...rest
 }) => {
   const childrenList = React.Children.toArray(rest.children);
@@ -30,7 +34,9 @@ export const Dropdown: DropdownComponent = ({
   return (
     <Dd
       label=""
-      className="w-min max-h-96 px-1 z-20 rounded-md border-default bg-secondary-bg overflow-x-hidden overflow-y-auto"
+      className={`w-min px-1 z-20 rounded-md border-default bg-secondary-bg overflow-x-hidden overflow-y-auto ${
+        options?.disableMaxHeight ? "h-fit" : "max-h-96"
+      }`}
       dismissOnClick={rest.dismissOnClick ?? true}
       theme={{
         floating: {

package/src/components/form/other/emoji.tsx

@@ -1,5 +1,6 @@
 "use client";
-import React, { useState, useEffect } from "react";
+import React from "react";
+import { Dropdown } from "../../../components";
 import { Icon } from "@iconify/react";
 import EmojiPicker, { Theme } from "emoji-picker-react";
 import "../../../styles";
@@ -23,51 +24,44 @@ export const Emoji: React.FC<EmojiProps> = ({
   disabled,
   onChoose,
 }) => {
-  const [open, setOpen] = useState(false);
-
-  useEffect(() => {
-    if (open) {
-      document.addEventListener("mousedown", (e) => {
-        if (e.target instanceof HTMLElement && !e.target.closest("#emoji")) {
-          setOpen(false);
-        }
-      });
-    }
-  }, [open]);
-
   return (
-    <div id="emoji" className="relative flex items-center w-min">
-      <button
-        type="button"
-        className={
-          options?.buttonVariant === "button"
-            ? "hover:text-primary disabled:text-disabled"
-            : "p-2 rounded-full hover:bg-secondary-light disabled:bg-secondary-light disabled:text-disabled"
-        }
-        tabIndex={-1}
-        disabled={disabled ?? false}
-        onClick={() => setOpen(!open)}
-      >
-        <Icon
-          icon="mdi:emoticon-happy-outline"
-          className={
-            options?.buttonVariant === "button" ? "text-2xl" : "text-xl"
-          }
-        />
-      </button>
-      <div className="absolute bottom-0 left-0 mb-10 -ml-6 z-20">
-        <EmojiPicker
-          open={open}
-          theme={theme === "light" ? Theme.LIGHT : Theme.DARK}
-          className="!border-default !bg-secondary-bg"
-          searchPlaceHolder="Search..."
-          autoFocusSearch={false}
-          onEmojiClick={(emojiObject) => {
-            onChoose && onChoose({ target: { value: emojiObject.emoji } });
-            setOpen(false);
-          }}
-        />
-      </div>
-    </div>
+    <Dropdown
+      placement="top-start"
+      trigger={
+        <div className="flex items-center justify-center">
+          <button
+            type="button"
+            className={
+              options?.buttonVariant === "button"
+                ? "hover:text-primary disabled:text-disabled"
+                : "p-2 rounded-full hover:bg-secondary-light disabled:bg-secondary-light disabled:text-disabled"
+            }
+            tabIndex={-1}
+            disabled={disabled ?? false}
+          >
+            <Icon
+              icon="mdi:emoticon-happy-outline"
+              className={
+                options?.buttonVariant === "button" ? "text-2xl" : "text-xl"
+              }
+            />
+          </button>
+        </div>
+      }
+      options={{ disableMaxHeight: true }}
+      dismissOnClick={false}
+    >
+      <EmojiPicker
+        open={true}
+        theme={theme === "light" ? Theme.LIGHT : Theme.DARK}
+        className="!border-0 !bg-secondary-bg"
+        height={384}
+        searchDisabled
+        previewConfig={{ showPreview: false }}
+        onEmojiClick={(emojiObject) => {
+          onChoose && onChoose({ target: { value: emojiObject.emoji } });
+        }}
+      />
+    </Dropdown>
   );
 };