next-helios-fe 1.10.26 → 1.10.28

package/package.json

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

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

@@ -43,46 +43,55 @@ export const Date: React.FC<DateProps> = ({
       : "py-1.5";
 
   useEffect(() => {
-    if (value && value.length === 2) {
-      setTempValue([
-        dayjs(value[0]).startOf("day"),
-        dayjs(value[1]).startOf("day"),
-      ] as any);
-    } else if (defaultValue && defaultValue.length === 2) {
-      setTempValue([
-        dayjs(defaultValue[0]).startOf("day"),
-        dayjs(defaultValue[1]).startOf("day"),
-      ] as any);
+    if (value) {
+      setTempValue(
+        value.length === 2
+          ? [dayjs(value[0]).startOf("day"), dayjs(value[1]).startOf("day")]
+          : ([] as any)
+      );
+    } else if (defaultValue) {
+      setTempValue(
+        defaultValue.length === 2
+          ? [
+              dayjs(defaultValue[0]).startOf("day"),
+              dayjs(defaultValue[1]).startOf("day"),
+            ]
+          : ([] as any)
+      );
     }
   }, [value, defaultValue]);
 
   const dateRangeLabel = (data: any) => {
-    if (
-      dayjs(data[0]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD") &&
-      dayjs(data[1]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD")
-    ) {
-      return "Today";
-    } else if (
-      dayjs(data[0]).format("YYYY-MM-DD") ===
-        dayjs().subtract(1, "days").format("YYYY-MM-DD") &&
-      dayjs(data[1]).format("YYYY-MM-DD") ===
-        dayjs().subtract(1, "days").format("YYYY-MM-DD")
-    ) {
-      return "Yesterday";
-    } else if (
-      dayjs(data[0]).format("YYYY-MM-DD") ===
-        dayjs().subtract(7, "days").format("YYYY-MM-DD") &&
-      dayjs(data[1]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD")
-    ) {
-      return "Last 7 Days";
-    } else if (
-      dayjs(data[0]).format("YYYY-MM-DD") ===
-        dayjs().subtract(1, "months").format("YYYY-MM-DD") &&
-      dayjs(data[1]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD")
-    ) {
-      return "Last 30 Days";
+    if (data.length === 0) {
+      return "";
     } else {
-      return "Custom";
+      if (
+        dayjs(data[0]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD") &&
+        dayjs(data[1]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD")
+      ) {
+        return "Today";
+      } else if (
+        dayjs(data[0]).format("YYYY-MM-DD") ===
+          dayjs().subtract(1, "days").format("YYYY-MM-DD") &&
+        dayjs(data[1]).format("YYYY-MM-DD") ===
+          dayjs().subtract(1, "days").format("YYYY-MM-DD")
+      ) {
+        return "Yesterday";
+      } else if (
+        dayjs(data[0]).format("YYYY-MM-DD") ===
+          dayjs().subtract(7, "days").format("YYYY-MM-DD") &&
+        dayjs(data[1]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD")
+      ) {
+        return "Last 7 Days";
+      } else if (
+        dayjs(data[0]).format("YYYY-MM-DD") ===
+          dayjs().subtract(1, "months").format("YYYY-MM-DD") &&
+        dayjs(data[1]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD")
+      ) {
+        return "Last 30 Days";
+      } else {
+        return "Custom";
+      }
     }
   };
 
@@ -111,44 +120,71 @@ export const Date: React.FC<DateProps> = ({
             )}
           </div>
         )}
-        <div className="relative flex items-center">
-          {!options?.buttonOnly && (
-            <input
-              type="text"
-              className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg cursor-default placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
+        <div className="group flex items-center gap-2">
+          <div className="flex-1 relative flex items-center">
+            {!options?.buttonOnly && (
+              <input
+                type="text"
+                className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg cursor-default placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
+                disabled={rest.disabled}
+                readOnly
+                value={
+                  dateRangeLabel(tempValue) === "Custom" ||
+                  !options?.enableSelectRange
+                    ? `${
+                        !options?.enableSelectRange
+                          ? ""
+                          : `${
+                              dayjs(tempValue[0]).format("MMM YYYY") ===
+                              dayjs(tempValue[1]).format("MMM YYYY")
+                                ? dayjs(tempValue[0]).format("DD")
+                                : dayjs(tempValue[0]).format("DD MMM YYYY")
+                            } - `
+                      }${dayjs(tempValue[1]).format("DD MMM YYYY")}`
+                    : dateRangeLabel(tempValue)
+                }
+                onClick={(e) => {
+                  dropdownRef.current?.click();
+                }}
+              />
+            )}
+            <button
+              type="button"
+              className={`rounded-full text-xl hover:bg-secondary-light ${
+                options?.buttonOnly
+                  ? "p-2"
+                  : "absolute right-4 p-1 text-disabled"
+              }`}
+              tabIndex={-1}
               disabled={rest.disabled}
-              readOnly
-              value={
-                dateRangeLabel(tempValue) === "Custom" ||
-                !options?.enableSelectRange
-                  ? `${
-                      !options?.enableSelectRange
-                        ? ""
-                        : `${
-                            dayjs(tempValue[0]).format("MMM YYYY") ===
-                            dayjs(tempValue[1]).format("MMM YYYY")
-                              ? dayjs(tempValue[0]).format("DD")
-                              : dayjs(tempValue[0]).format("DD MMM YYYY")
-                          } - `
-                    }${dayjs(tempValue[1]).format("DD MMM YYYY")}`
-                  : dateRangeLabel(tempValue)
-              }
-            />
+              onClick={(e) => {
+                e.preventDefault();
+                dropdownRef.current?.click();
+              }}
+            >
+              <Icon icon="akar-icons:calendar" />
+            </button>
+          </div>
+          {!rest.required && tempValue.length !== 0 && (
+            <button
+              type="button"
+              className="p-1 rounded-full text-xl hover:bg-secondary-light hidden group-hover:block"
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                setTempValue([]);
+                if (rest.onChange) {
+                  rest.onChange({
+                    target: {
+                      value: [],
+                    } as any,
+                  } as React.ChangeEvent<HTMLInputElement>);
+                }
+              }}
+            >
+              <Icon icon="pajamas:close" />
+            </button>
           )}
-          <button
-            type="button"
-            className={`rounded-full text-xl hover:bg-secondary-light ${
-              options?.buttonOnly ? "p-2" : "absolute right-4 p-1 text-disabled"
-            }`}
-            tabIndex={-1}
-            disabled={rest.disabled}
-            onClick={(e) => {
-              e.preventDefault();
-              dropdownRef.current?.click();
-            }}
-          >
-            <Icon icon="akar-icons:calendar" />
-          </button>
         </div>
       </label>
       <div className="w-0 overflow-hidden">

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

@@ -171,7 +171,7 @@ export const ModalSelect: React.FC<ModalSelectProps> = ({
             label={label}
             placeholder={placeholder}
             description={description}
-            options={options}
+            options={{ ...options, disableDropdown: true }}
             disabled={disabled}
             required={required}
             value={tempValue || ""}

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

@@ -20,6 +20,7 @@ export interface SelectProps
   options?: {
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
+    disableDropdown?: boolean;
   };
   readOnly?: boolean;
 }
@@ -169,92 +170,94 @@ export const Select: React.FC<SelectProps> = ({
           ))}
         </select>
       </label>
-      <div className="w-0 overflow-hidden">
-        <Dropdown
-          placement="bottom-start"
-          trigger={
-            <button
-              type="button"
-              ref={dropdownTriggerRef}
-              className={`w-0 my-0.5 ${height}`}
-              tabIndex={-1}
-              disabled={rest.disabled ?? readOnly ?? false}
-            >
-              1
-            </button>
-          }
-        >
-          {menus.length === 0 ? (
-            <Dropdown.Item
-              onKeyDown={(e) => {
-                if (e.key === "Escape") {
-                  e.preventDefault();
-                  inputRef.current?.focus();
-                  setOpenDropdown(false);
-                } else if (e.key === "Tab") {
-                  setOpenDropdown(false);
-                }
-              }}
-            >
-              <div
-                className="flex justify-center"
-                style={{ width: dropdownWidth - 43 }}
+      {!options?.disableDropdown && (
+        <div className="w-0 overflow-hidden">
+          <Dropdown
+            placement="bottom-start"
+            trigger={
+              <button
+                type="button"
+                ref={dropdownTriggerRef}
+                className={`w-0 my-0.5 ${height}`}
+                tabIndex={-1}
+                disabled={rest.disabled ?? readOnly ?? false}
               >
-                <span>No data found</span>
-              </div>
-            </Dropdown.Item>
-          ) : (
-            menus.map((item, index) => {
-              return (
-                <Dropdown.Item
-                  key={index}
-                  active={tempValue === item.value ? true : false}
-                  as={item.variant || "button"}
-                  disabled={item.disabled ?? false}
-                  onClick={() => {
-                    setTempValue(item.value);
-                    if (rest.onChange) {
-                      rest.onChange({
-                        target: { value: item.value } as HTMLSelectElement,
-                      } as any);
-                    }
-                    setOpenDropdown(false);
+                1
+              </button>
+            }
+          >
+            {menus.length === 0 ? (
+              <Dropdown.Item
+                onKeyDown={(e) => {
+                  if (e.key === "Escape") {
+                    e.preventDefault();
                     inputRef.current?.focus();
-                  }}
-                  onKeyDown={(e) => {
-                    if (e.key === "Escape") {
-                      e.preventDefault();
-                      inputRef.current?.focus();
-                      setOpenDropdown(false);
-                    } else if (e.key === "Tab") {
-                      setOpenDropdown(false);
-                    }
-                  }}
+                    setOpenDropdown(false);
+                  } else if (e.key === "Tab") {
+                    setOpenDropdown(false);
+                  }
+                }}
+              >
+                <div
+                  className="flex justify-center"
+                  style={{ width: dropdownWidth - 43 }}
                 >
-                  <div
-                    className="flex justify-between items-center gap-4"
-                    style={{ width: dropdownWidth - 43 }}
+                  <span>No data found</span>
+                </div>
+              </Dropdown.Item>
+            ) : (
+              menus.map((item, index) => {
+                return (
+                  <Dropdown.Item
+                    key={index}
+                    active={tempValue === item.value ? true : false}
+                    as={item.variant || "button"}
+                    disabled={item.disabled ?? false}
+                    onClick={() => {
+                      setTempValue(item.value);
+                      if (rest.onChange) {
+                        rest.onChange({
+                          target: { value: item.value } as HTMLSelectElement,
+                        } as any);
+                      }
+                      setOpenDropdown(false);
+                      inputRef.current?.focus();
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === "Escape") {
+                        e.preventDefault();
+                        inputRef.current?.focus();
+                        setOpenDropdown(false);
+                      } else if (e.key === "Tab") {
+                        setOpenDropdown(false);
+                      }
+                    }}
                   >
-                    <div className="flex flex-col">
-                      <span>{item.label}</span>
-                      {item.subLabel && (
-                        <span
-                          className={`text-xs ${
-                            tempValue === item.value ? "" : "text-disabled"
-                          }`}
-                        >
-                          {item.subLabel}
-                        </span>
-                      )}
+                    <div
+                      className="flex justify-between items-center gap-4"
+                      style={{ width: dropdownWidth - 43 }}
+                    >
+                      <div className="flex flex-col">
+                        <span>{item.label}</span>
+                        {item.subLabel && (
+                          <span
+                            className={`text-xs ${
+                              tempValue === item.value ? "" : "text-disabled"
+                            }`}
+                          >
+                            {item.subLabel}
+                          </span>
+                        )}
+                      </div>
+                      {labelComponent ? labelComponent(item) : ""}
                     </div>
-                    {labelComponent ? labelComponent(item) : ""}
-                  </div>
-                </Dropdown.Item>
-              );
-            })
-          )}
-        </Dropdown>
-      </div>
+                  </Dropdown.Item>
+                );
+              })
+            )}
+          </Dropdown>
+        </div>
+      )}
     </div>
   );
 };