next-helios-fe 1.9.13 → 1.9.15

package/package.json

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

package/src/components/content-container/tab/index.tsx

@@ -62,10 +62,10 @@ export const Tab: TabComponent = ({
                 <div key={index} className="relative flex items-center">
                   <button
                     type="button"
-                    className={`flex select-none items-center gap-2 whitespace-nowrap border-b-2 pb-1.5 pt-2 duration-300 disabled:text-disabled ${
+                    className={`flex select-none items-center gap-2 whitespace-nowrap border-b-2 pb-1.5 pt-2 duration-300 ${
                       tempActiveTab === index
                         ? "border-primary text-primary"
-                        : "border-transparent hover:border-primary-transparent hover:text-primary"
+                        : "border-transparent hover:border-primary-transparent hover:text-primary disabled:text-disabled"
                     } ${
                       onCloseTab && childrenList.length !== 1
                         ? "pe-10 ps-6"
@@ -127,10 +127,10 @@ export const Tab: TabComponent = ({
                 <button
                   key={index}
                   type="button"
-                  className={`flex select-none items-center gap-2 whitespace-nowrap border-b-2 border-r-0 px-6 pb-1.5 pt-2 text-left duration-300 lg:border-b-0 lg:border-r-2 disabled:text-disabled ${
+                  className={`flex select-none items-center gap-2 whitespace-nowrap border-b-2 border-r-0 px-6 pb-1.5 pt-2 text-left duration-300 lg:border-b-0 lg:border-r-2 ${
                     tempActiveTab === index
                       ? "border-primary text-primary"
-                      : "border-transparent hover:border-primary-transparent hover:text-primary"
+                      : "border-transparent hover:border-primary-transparent hover:text-primary disabled:text-disabled"
                   }`}
                   disabled={tab.disabled}
                   onClick={() => {

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

@@ -75,8 +75,8 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
     options?.height === "short"
       ? "py-[3.5px]"
       : options?.height === "high"
-      ? "py-[7.5px]"
-      : "py-[5px]";
+        ? "py-[7.5px]"
+        : "py-[5px]";
 
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
@@ -116,7 +116,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
     if (required) {
       if (tempValue.length === 0) {
         inputRef.current?.setCustomValidity(
-          "Please select some items in the list."
+          "Please select some items in the list.",
         );
       } else {
         inputRef.current?.setCustomValidity("");
@@ -125,225 +125,223 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
   }, [tempValue]);
 
   return (
-    <div className="relative">
-      <div ref={componentRef} className="flex flex-row-reverse items-end">
-        <label className={`flex flex-col gap-2 ${width}`}>
-          {(label || description) && (
-            <div className="flex justify-between items-center gap-2">
-              {label && (
-                <span
-                  className={`text-sm select-none ${
-                    required &&
-                    "after:content-['*'] after:ml-1 after:text-danger"
-                  }`}
-                >
-                  {label}
-                </span>
-              )}
-              {description && (
-                <Tooltip content={description}>
-                  <Icon
-                    icon="octicon:info-16"
-                    className="text-sm text-primary-dark"
-                  />
-                </Tooltip>
-              )}
-            </div>
-          )}
-          <div className="relative flex items-center">
-            <div className="relative flex items-center w-full cursor-pointer">
-              <input
-                ref={inputRef}
-                type="text"
-                className="w-full ps-4 pe-14 border border-default rounded-md bg-secondary-bg text-transparent cursor-pointer caret-transparent duration-150 placeholder:duration-300 placeholder:text-silent focus:placeholder:translate-x-1 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:cursor-default"
-                style={{
-                  height:
-                    tempValue.length !== 0
-                      ? inputHeight +
-                        (options?.height === "short"
-                          ? 7
-                          : options?.height === "high"
+    <div ref={componentRef} className="flex flex-row-reverse items-end">
+      <label className={`relative flex flex-col gap-2 ${width}`}>
+        {(label || description) && (
+          <div className="flex items-center justify-between gap-2">
+            {label && (
+              <span
+                className={`select-none text-sm ${
+                  required && "after:ml-1 after:text-danger after:content-['*']"
+                }`}
+              >
+                {label}
+              </span>
+            )}
+            {description && (
+              <Tooltip content={description}>
+                <Icon
+                  icon="octicon:info-16"
+                  className="text-sm text-primary-dark"
+                />
+              </Tooltip>
+            )}
+          </div>
+        )}
+        <div className="relative flex items-center">
+          <div className="relative flex w-full cursor-pointer items-center">
+            <input
+              ref={inputRef}
+              type="text"
+              className="w-full cursor-pointer rounded-md border border-default bg-secondary-bg pe-14 ps-4 text-transparent caret-transparent duration-150 placeholder:text-silent placeholder:duration-300 focus:border-primary-dark focus:shadow focus:shadow-primary focus:outline-none focus:ring-1 focus:ring-primary focus:placeholder:translate-x-1 disabled:cursor-default disabled:bg-secondary-light"
+              style={{
+                height:
+                  tempValue.length !== 0
+                    ? inputHeight +
+                      (options?.height === "short"
+                        ? 7
+                        : options?.height === "high"
                           ? 15
                           : 10)
-                      : options?.height === "short"
+                    : options?.height === "short"
                       ? 35
                       : options?.height === "high"
-                      ? 43
-                      : 39,
-                }}
-                placeholder={placeholder}
-                required={required}
-                disabled={disabled}
-                value={tempValue.join(", ")}
-                onChange={(e) => {}}
-                onClick={(e) => {
+                        ? 43
+                        : 39,
+              }}
+              placeholder={placeholder}
+              required={required}
+              disabled={disabled}
+              value={tempValue.join(", ")}
+              onChange={(e) => {}}
+              onClick={(e) => {
+                e.preventDefault();
+                setOpenDropdown(true);
+                dropdownTriggerRef.current?.click();
+                setDropdownWidth(
+                  inputRef?.current?.getBoundingClientRect()?.width || 0,
+                );
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
                   e.preventDefault();
-                  setOpenDropdown(true);
-                  dropdownTriggerRef.current?.click();
-                  setDropdownWidth(
-                    inputRef?.current?.getBoundingClientRect()?.width || 0
-                  );
-                }}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") {
-                    e.preventDefault();
-                    inputRef.current?.click();
-                  }
-                }}
+                  inputRef.current?.click();
+                }
+              }}
+            />
+            <div className="pointer-events-none absolute right-4 text-xl text-disabled">
+              <Icon
+                icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
               />
-              <div className="absolute right-4 text-xl text-disabled pointer-events-none">
-                <Icon
-                  icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
-                />
-              </div>
             </div>
           </div>
-        </label>
-        {!options?.disableDropdown && (
-          <div className="w-0 overflow-hidden">
-            <Dropdown
-              placement="bottom-start"
-              dismissOnClick={false}
-              trigger={
+        </div>
+        <div
+          ref={itemContainerRef}
+          className={`pointer-events-none absolute bottom-0 flex h-min w-full flex-wrap gap-2 pe-12 ps-4 ${height}`}
+        >
+          {tempValue?.map((item) => {
+            return (
+              <div
+                key={item}
+                className={`pointer-events-auto flex cursor-default select-none items-center gap-2 rounded-md px-2 py-0.5 text-white ${
+                  disabled ||
+                  menus.find((i) => i.value === item)?.disableUnselect
+                    ? "bg-secondary"
+                    : "bg-primary"
+                }`}
+              >
+                <span>{menus.find((i) => i.value === item)?.label}</span>
                 <button
                   type="button"
-                  ref={dropdownTriggerRef}
-                  className="w-0"
-                  style={{
-                    height:
-                      tempValue.length !== 0
-                        ? inputHeight +
-                          (options?.height === "short"
-                            ? 7
-                            : options?.height === "high"
-                            ? 15
-                            : 10)
-                        : options?.height === "short"
-                        ? 35
-                        : options?.height === "high"
-                        ? 43
-                        : 39,
-                  }}
+                  disabled={
+                    disabled ||
+                    menus.find((i) => i.value === item)?.disableUnselect
+                  }
                   tabIndex={-1}
-                  disabled={disabled ?? 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);
+                  onClick={() => {
+                    setTempValue(tempValue.filter((i) => i !== item));
+                    if (onChange) {
+                      onChange({
+                        target: {
+                          value: tempValue.filter((i) => i !== item),
+                        },
+                      } as any);
+                    }
+                    if (onRemove) {
+                      onRemove({
+                        target: {
+                          value: item,
+                        },
+                      });
                     }
                   }}
                 >
-                  <div
-                    className="flex justify-center"
-                    style={{ width: dropdownWidth - 43 }}
-                  >
-                    <span>No data found</span>
-                  </div>
-                </Dropdown.Item>
-              ) : (
-                menus.map((item, index) => {
-                  return (
-                    <Dropdown.Item
-                      key={index}
-                      active={
-                        tempValue?.find((i) => i === item.value) ? true : false
-                      }
-                      as={item.variant || "button"}
-                      disabled={item.disabled ?? false}
-                      onClick={() => {
-                        setTempValue([...tempValue, item.value]);
-                        if (onChange) {
-                          onChange({
-                            target: { value: [...tempValue, item.value] },
-                          } as any);
-                        }
-                        if (onSelect) {
-                          onSelect({
-                            target: { value: item.value },
-                          });
-                        }
-                      }}
-                      onKeyDown={(e) => {
-                        if (e.key === "Escape") {
-                          e.preventDefault();
-                          inputRef.current?.focus();
-                          setOpenDropdown(false);
-                        } else if (e.key === "Tab") {
-                          setOpenDropdown(false);
-                        }
-                      }}
-                    >
-                      <div
-                        className="flex justify-between items-center gap-4"
-                        style={{ width: dropdownWidth - 43 }}
-                      >
-                        <span>{item.label}</span>
-                        {labelComponent ? labelComponent(item) : ""}
-                      </div>
-                    </Dropdown.Item>
-                  );
-                })
-              )}
-            </Dropdown>
-          </div>
-        )}
-      </div>
-      <div
-        ref={itemContainerRef}
-        className={`absolute bottom-0 ps-4 pe-12 flex flex-wrap gap-2 w-full h-min pointer-events-none ${height}`}
-      >
-        {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 || menus.find((i) => i.value === item)?.disableUnselect
-                  ? "bg-secondary"
-                  : "bg-primary"
-              }`}
-            >
-              <span>{menus.find((i) => i.value === item)?.label}</span>
+                  <Icon icon="pajamas:close" />
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      </label>
+      {!options?.disableDropdown && (
+        <div className="w-0 overflow-hidden">
+          <Dropdown
+            placement="bottom-start"
+            dismissOnClick={false}
+            trigger={
               <button
                 type="button"
-                disabled={
-                  disabled ||
-                  menus.find((i) => i.value === item)?.disableUnselect
-                }
+                ref={dropdownTriggerRef}
+                className="w-0"
+                style={{
+                  height:
+                    tempValue.length !== 0
+                      ? inputHeight +
+                        (options?.height === "short"
+                          ? 7
+                          : options?.height === "high"
+                            ? 15
+                            : 10)
+                      : options?.height === "short"
+                        ? 35
+                        : options?.height === "high"
+                          ? 43
+                          : 39,
+                }}
                 tabIndex={-1}
-                onClick={() => {
-                  setTempValue(tempValue.filter((i) => i !== item));
-                  if (onChange) {
-                    onChange({
-                      target: {
-                        value: tempValue.filter((i) => i !== item),
-                      },
-                    } as any);
-                  }
-                  if (onRemove) {
-                    onRemove({
-                      target: {
-                        value: item,
-                      },
-                    });
+                disabled={disabled ?? 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);
                   }
                 }}
               >
-                <Icon icon="pajamas:close" />
-              </button>
-            </div>
-          );
-        })}
-      </div>
+                <div
+                  className="flex justify-center"
+                  style={{ width: dropdownWidth - 43 }}
+                >
+                  <span>No data found</span>
+                </div>
+              </Dropdown.Item>
+            ) : (
+              menus.map((item, index) => {
+                return (
+                  <Dropdown.Item
+                    key={index}
+                    active={
+                      tempValue?.find((i) => i === item.value) ? true : false
+                    }
+                    as={item.variant || "button"}
+                    disabled={item.disabled ?? false}
+                    onClick={() => {
+                      setTempValue([...tempValue, item.value]);
+                      if (onChange) {
+                        onChange({
+                          target: { value: [...tempValue, item.value] },
+                        } as any);
+                      }
+                      if (onSelect) {
+                        onSelect({
+                          target: { value: item.value },
+                        });
+                      }
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === "Escape") {
+                        e.preventDefault();
+                        inputRef.current?.focus();
+                        setOpenDropdown(false);
+                      } else if (e.key === "Tab") {
+                        setOpenDropdown(false);
+                      }
+                    }}
+                  >
+                    <div
+                      className="flex items-center justify-between gap-4"
+                      style={{ width: dropdownWidth - 43 }}
+                    >
+                      <span>{item.label}</span>
+                      {labelComponent ? labelComponent(item) : ""}
+                    </div>
+                  </Dropdown.Item>
+                );
+              })
+            )}
+          </Dropdown>
+        </div>
+      )}
     </div>
   );
 };