next-helios-fe 1.6.13 → 1.6.15

package/package.json

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

package/src/components/form/input/date.tsx

@@ -13,9 +13,11 @@ export interface DateProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 
 export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
-  const [tempValue, setTempValue] = useState<any>([dayjs(), dayjs()]);
+  const [tempValue, setTempValue] = useState<any>([
+    dayjs().startOf("day"),
+    dayjs().endOf("day"),
+  ]);
   const [selectedRange, setSelectedRange] = useState<string | any[]>("Today");
-  const [manualDate, setManualDate] = useState<any>("");
   const dropdownRef = useRef<HTMLButtonElement>(null);
   const width = options?.width === "fit" ? "w-fit" : "w-full";
   const height =
@@ -25,16 +27,6 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
       ? "py-2"
       : "py-1.5";
 
-  useEffect(() => {
-    if (rest.value) {
-      setTempValue(rest.value as any);
-      return;
-    } else if (rest.defaultValue) {
-      setTempValue(rest.defaultValue as any);
-      return;
-    }
-  }, [rest.value, rest.defaultValue]);
-
   useEffect(() => {
     rest.onChange &&
       rest.onChange({
@@ -62,9 +54,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
             type="text"
             className={`accent-primary w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
             value={
-              selectedRange === "Manual Input"
-                ? manualDate
-                : selectedRange === "Custom"
+              selectedRange === "Custom"
                 ? `${
                     dayjs(tempValue[0]).format("MMM YYYY") ===
                     dayjs(tempValue[1]).format("MMM YYYY")
@@ -73,15 +63,6 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
                   } - ${dayjs(tempValue[1]).format("DD MMM YYYY")}`
                 : selectedRange
             }
-            onChange={(e) => {
-              setManualDate(e.target.value);
-            }}
-            onKeyDown={(e) => {
-              if (e.key === "Backspace" && selectedRange !== "Manual Input") {
-                setSelectedRange("Manual Input");
-              }
-            }}
-            {...rest}
           />
           <button
             type="button"
@@ -112,21 +93,12 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
         >
           <div className="flex gap-2 w-80 md:w-full overflow-auto md:overflow-clip">
             <div className="w-full">
-              {/* <button
-                className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
-                disabled={tempValue === "Manual Input"}
-                onClick={() => {
-                  setTempValue("Manual Input");
-                }}
-              >
-                Manual Input
-              </button> */}
               <button
                 className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
                 disabled={selectedRange === "Today"}
                 onClick={() => {
                   setSelectedRange("Today");
-                  setTempValue([dayjs(), dayjs()]);
+                  setTempValue([dayjs().startOf("day"), dayjs().endOf("day")]);
                 }}
               >
                 Today
@@ -137,8 +109,8 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
                 onClick={() => {
                   setSelectedRange("Yesterday");
                   setTempValue([
-                    dayjs().subtract(1, "days"),
-                    dayjs().subtract(1, "days"),
+                    dayjs().subtract(1, "days").startOf("day"),
+                    dayjs().subtract(1, "days").endOf("day"),
                   ]);
                 }}
               >
@@ -149,7 +121,10 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
                 disabled={selectedRange === "Last 7 days"}
                 onClick={() => {
                   setSelectedRange("Last 7 days");
-                  setTempValue([dayjs().subtract(7, "days"), dayjs()]);
+                  setTempValue([
+                    dayjs().subtract(7, "days").startOf("day"),
+                    dayjs().endOf("day"),
+                  ]);
                 }}
               >
                 Last 7 days
@@ -159,7 +134,10 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
                 disabled={selectedRange === "Last 30 days"}
                 onClick={() => {
                   setSelectedRange("Last 30 days");
-                  setTempValue([dayjs().subtract(1, "months"), dayjs()]);
+                  setTempValue([
+                    dayjs().subtract(1, "months").startOf("day"),
+                    dayjs().endOf("day"),
+                  ]);
                 }}
               >
                 Last 30 days
@@ -169,7 +147,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
                 disabled={selectedRange === "Custom"}
                 onClick={() => {
                   setSelectedRange("Custom");
-                  setTempValue([dayjs(), dayjs()]);
+                  setTempValue([dayjs().startOf("day"), dayjs().endOf("day")]);
                 }}
               >
                 Custom
@@ -180,7 +158,7 @@ export const Date: React.FC<DateProps> = ({ options, label, ...rest }) => {
               value={tempValue}
               onChange={(value) => {
                 setSelectedRange("Custom");
-                setTempValue(value);
+                setTempValue([dayjs(value[0]), dayjs(value[1])]);
               }}
             />
           </div>

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

@@ -1,13 +1,10 @@
 "use client";
 import React, { useState, useEffect, useRef } from "react";
+import { Dropdown } from "../../../components";
 import { Icon } from "@iconify/react";
-import { createPortal } from "react-dom";
 
 export interface MultipleSelectProps
-  extends Omit<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    "onChange" | "value"
-  > {
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "value"> {
   options?: {
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
@@ -20,6 +17,7 @@ export interface MultipleSelectProps
   }[];
   placeholder?: string;
   required?: boolean;
+  disabled?: boolean;
   value?: string[];
   onClick?: () => void;
   onChange?: (e: {
@@ -35,6 +33,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
   menus,
   placeholder,
   required,
+  disabled,
   value,
   onClick,
   onChange,
@@ -42,13 +41,10 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
 }) => {
   const [tempValue, setTempValue] = useState<string[]>([]);
   const [openDropdown, setOpenDropdown] = useState(false);
-  const [position, setPosition] = useState<{
-    top: number;
-    left: number;
-  } | null>(null);
   const [dropdownWidth, setDropdownWidth] = useState<number>(0);
-  const triggerRef = useRef<HTMLDivElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [dropdownHeight, setDropdownHeight] = useState<number>(0);
+  const inputRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLButtonElement>(null);
   const width = options?.width === "fit" ? "w-fit" : "w-full";
   const height =
     options?.height === "short"
@@ -58,51 +54,13 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
       : "py-1";
 
   useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(e.target as Node) &&
-        !triggerRef.current?.contains(e.target as Node)
-      ) {
+    document.addEventListener("mousedown", (e) => {
+      if (e.target instanceof HTMLElement) {
         setOpenDropdown(false);
       }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
+    });
   }, []);
 
-  useEffect(() => {
-    if (triggerRef.current) {
-      const rect = triggerRef.current.getBoundingClientRect();
-      const dropdownHeight = dropdownRef.current?.offsetHeight || 0;
-      const windowHeight = window.innerHeight;
-
-      setPosition({
-        top: rect.bottom + window.scrollY + 10,
-        left: rect.left + window.scrollX,
-      });
-
-      setDropdownWidth(rect.width);
-
-      if (rect.bottom + dropdownHeight > windowHeight) {
-        setPosition((prev) =>
-          prev
-            ? { ...prev, top: rect.top + window.scrollY - dropdownHeight - 10 }
-            : null
-        );
-      }
-    }
-
-    if (openDropdown) {
-      document.getElementById("body")!.style.overflow = "hidden";
-    } else {
-      document.getElementById("body")!.style.overflow = "auto";
-    }
-  }, [openDropdown]);
-
   useEffect(() => {
     if (value) {
       setTempValue(value);
@@ -118,94 +76,154 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
   }, [tempValue]);
 
   return (
-    <label className={`grid gap-2 ${width}`}>
-      {label && (
-        <span
-          className={`text-sm select-none ${
-            required && "after:content-['*'] after:ml-1 after:text-danger"
-          }`}
-        >
-          {label}
-        </span>
-      )}
-      <div className="relative" ref={triggerRef}>
-        <button
-          type="button"
-          className={`group/button flex justify-between items-center gap-2 w-full min-h-10 px-4 border-default border rounded-md bg-secondary-bg cursor-pointer caret-transparent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 disabled:cursor-default ${height}`}
-          disabled={rest.disabled}
-          onClick={() => {
-            onClick && onClick();
-            setOpenDropdown(true);
-          }}
-          {...rest}
-        >
-          {!tempValue || tempValue?.length === 0 ? (
-            <span className="text-slate-300 duration-300 translate-x-0 group-focus/button:translate-x-1">
-              {placeholder}
-            </span>
-          ) : (
-            <div className="flex flex-wrap gap-2 h-min">
-              {tempValue?.map((item) => {
-                return (
-                  <div
-                    key={item}
-                    className="flex items-center gap-2 px-2 py-0.5 rounded-md bg-primary text-white cursor-default"
-                  >
-                    <span>{menus.find((i) => i.value === item)?.label}</span>
+    <div className="flex flex-row-reverse items-end">
+      <label className={`grid gap-2 ${width}`}>
+        {label && (
+          <span
+            className={`text-sm select-none ${
+              required && "after:content-['*'] after:ml-1 after:text-danger"
+            }`}
+          >
+            {label}
+          </span>
+        )}
+        <div className="relative flex items-center">
+          <div
+            ref={inputRef}
+            className={`group/button flex justify-between items-center gap-2 w-full min-h-10 px-4 border rounded-md caret-transparent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark ${height} ${
+              disabled
+                ? "bg-secondary-light cursor-default pointer-events-none"
+                : "bg-secondary-bg cursor-pointer"
+            } ${
+              openDropdown
+                ? "outline-none ring-1 ring-primary shadow shadow-primary border-primary-dark"
+                : "border-default"
+            }`}
+            onClick={(e) => {
+              e.preventDefault();
+              onClick && onClick();
+              setOpenDropdown(true);
+              dropdownRef.current?.click();
+              setDropdownWidth(
+                inputRef?.current?.getBoundingClientRect()?.width || 0
+              );
+              setDropdownHeight(
+                inputRef?.current?.getBoundingClientRect()?.height || 0
+              );
+            }}
+            {...rest}
+          >
+            {!tempValue || tempValue?.length === 0 ? (
+              <span
+                className={`text-slate-300 select-none duration-300 ${
+                  openDropdown ? "translate-x-1" : "translate-x-0"
+                }`}
+              >
+                {placeholder}
+              </span>
+            ) : (
+              <div className="flex flex-wrap gap-2 h-min pointer-events-none invisible">
+                {tempValue?.map((item) => {
+                  return (
                     <div
-                      className="cursor-pointer"
-                      onClick={() => {
-                        setTempValue(tempValue.filter((i) => i !== item));
-                      }}
+                      key={item}
+                      className="flex items-center gap-2 px-2 py-0.5 rounded-md bg-primary text-white cursor-default pointer-events-auto"
                     >
-                      <Icon icon="pajamas:close" />
+                      <span>{menus.find((i) => i.value === item)?.label}</span>
+                      <div
+                        className="cursor-pointer"
+                        onClick={() => {
+                          setTempValue(tempValue.filter((i) => i !== item));
+                        }}
+                      >
+                        <Icon icon="pajamas:close" />
+                      </div>
                     </div>
-                  </div>
-                );
-              })}
+                  );
+                })}
+              </div>
+            )}
+            <div className="ms-auto text-xl text-slate-400 pointer-events-none">
+              <Icon
+                icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
+              />
             </div>
-          )}
-          <div className="text-xl text-slate-400 pointer-events-none">
-            <Icon icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`} />
           </div>
-        </button>
-        {openDropdown &&
-          position &&
-          createPortal(
-            <div
+          <div
+            className="absolute flex flex-wrap gap-2 h-min px-4 pointer-events-none"
+            style={{ width: dropdownWidth - 52 }}
+          >
+            {tempValue?.map((item) => {
+              return (
+                <div
+                  key={item}
+                  className={`flex items-center gap-2 px-2 py-0.5 rounded-md text-white select-none cursor-default pointer-events-auto ${
+                    disabled ? "bg-secondary" : "bg-primary"
+                  }`}
+                >
+                  <span>{menus.find((i) => i.value === item)?.label}</span>
+                  <div
+                    className="cursor-pointer active:opacity-70 active:duration-300 active:ease-out disabled:active:opacity-100"
+                    onClick={() => {
+                      if (!disabled) {
+                        setTempValue(tempValue.filter((i) => i !== item));
+                      }
+                    }}
+                  >
+                    <Icon icon="pajamas:close" />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </label>
+      <div className="w-0 overflow-hidden">
+        <Dropdown
+          placement="bottom-start"
+          dismissOnClick={false}
+          trigger={
+            <button
+              type="button"
               ref={dropdownRef}
-              className="absolute max-h-40 p-1 z-50 pointer-events-auto bg-secondary-bg shadow border rounded-md overflow-auto"
+              className="w-0 my-0.5"
               style={{
-                top: position.top,
-                left: position.left,
-                width: dropdownWidth,
+                height: dropdownHeight,
               }}
             >
-              {menus.length === 0 ? (
-                <div className="flex justify-center">
-                  <span className="px-4 py-1">No data found</span>
-                </div>
-              ) : (
-                menus.map((item, index) => (
-                  <button
-                    key={index}
-                    type="button"
-                    className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left text-default hover:bg-secondary-light disabled:bg-primary-transparent"
-                    disabled={
-                      tempValue?.find((i) => i === item.value) ? true : false
-                    }
-                    onMouseDown={() => {
-                      setTempValue([...tempValue, item.value]);
-                    }}
-                  >
-                    {item.label}
-                  </button>
-                ))
-              )}
-            </div>,
-            document.body
-          )}
+              1
+            </button>
+          }
+        >
+          <div
+            style={{
+              width: dropdownWidth - 11,
+            }}
+          >
+            {menus.length === 0 ? (
+              <div className="flex justify-center">
+                <span className="px-4 py-1">No data found</span>
+              </div>
+            ) : (
+              menus.map((item, index) => (
+                <button
+                  key={index}
+                  type="button"
+                  className="min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left text-default hover:bg-secondary-light disabled:bg-primary-transparent"
+                  disabled={
+                    tempValue?.find((i) => i === item.value) ? true : false
+                  }
+                  onClick={() => {
+                    setTempValue([...tempValue, item.value]);
+                  }}
+                >
+                  {item.label}
+                </button>
+              ))
+            )}
+          </div>
+        </Dropdown>
       </div>
-    </label>
+    </div>
   );
 };