next-helios-fe 1.8.105 → 1.8.107

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

@@ -62,21 +62,20 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
   onRemove,
   ...rest
 }) => {
-  const [tempValue, setTempValue] = useState<string[]>([]);
-  const [openDropdown, setOpenDropdown] = useState(false);
-  const [dropdownWidth, setDropdownWidth] = useState<number>(0);
-  const [dropdownHeight, setDropdownHeight] = useState<number>(0);
-  const fakeInputRef = useRef<HTMLDivElement>(null);
   const itemContainerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const dropdownRef = useRef<HTMLButtonElement>(null);
+  const [tempValue, setTempValue] = useState<string[]>([]);
+  const [openDropdown, setOpenDropdown] = useState(false);
+  const [inputHeight, setInputHeight] = useState<number>(0);
+  const [dropdownWidth, setDropdownWidth] = useState<number>(0);
   const width = options?.width === "fit" ? "w-fit" : "w-full";
   const height =
     options?.height === "short"
-      ? "py-0.5"
+      ? "py-[3.5px]"
       : options?.height === "high"
-      ? "py-1.5"
-      : "py-1";
+      ? "py-[7.5px]"
+      : "py-[5px]";
 
   useEffect(() => {
     document.addEventListener("mousedown", (e) => {
@@ -84,6 +83,16 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
         setOpenDropdown(false);
       }
     });
+
+    const observer = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        setInputHeight(entry.contentRect.height);
+      }
+    });
+
+    observer.observe(itemContainerRef.current!);
+
+    return () => observer.disconnect();
   }, []);
 
   useEffect(() => {
@@ -107,211 +116,221 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
   }, [tempValue]);
 
   return (
-    <div 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">
-          <input
-            ref={inputRef}
-            type="text"
-            className="absolute bottom-0 -z-10 w-full border-0 rounded-md focus:ring-0"
-            disabled={disabled ?? false}
-          />
-          <div
-            ref={fakeInputRef}
-            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(
-                fakeInputRef?.current?.getBoundingClientRect()?.width || 0
-              );
-              setDropdownHeight(
-                fakeInputRef?.current?.getBoundingClientRect()?.height || 0
-              );
-            }}
-            {...rest}
-          >
-            {!tempValue || tempValue?.length === 0 ? (
-              <span
-                className={`text-silent select-none duration-300 ${
-                  openDropdown ? "translate-x-1" : "translate-x-0"
-                }`}
-              >
-                {placeholder}
-              </span>
-            ) : (
-              <div
-                ref={itemContainerRef}
-                className="flex flex-wrap gap-2 w-full h-min pointer-events-none invisible"
-              >
-                {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 pointer-events-auto"
-                    >
-                      <span>{menus.find((i) => i.value === item)?.label}</span>
-                      <div className="cursor-pointer">
-                        <Icon icon="pajamas:close" />
-                      </div>
-                    </div>
+    <div className="relative">
+      <div 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:text-disabled disabled:cursor-default"
+                style={{
+                  height:
+                    tempValue.length !== 0
+                      ? inputHeight +
+                        (options?.height === "short"
+                          ? 7
+                          : options?.height === "high"
+                          ? 15
+                          : 10)
+                      : options?.height === "short"
+                      ? 35
+                      : options?.height === "high"
+                      ? 43
+                      : 39,
+                }}
+                placeholder={placeholder}
+                required={required}
+                disabled={disabled}
+                value={tempValue.join(", ")}
+                onChange={(e) => {}}
+                onClick={(e) => {
+                  e.preventDefault();
+                  setOpenDropdown(true);
+                  dropdownRef.current?.click();
+                  setDropdownWidth(
+                    inputRef?.current?.getBoundingClientRect()?.width || 0
                   );
-                })}
-              </div>
-            )}
-            {!options?.disableDropdown && (
-              <div className="ms-auto text-xl text-disabled pointer-events-none">
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    inputRef.current?.click();
+                  }
+                }}
+              />
+              <div className="absolute right-4 text-xl text-disabled pointer-events-none">
                 <Icon
                   icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
                 />
               </div>
-            )}
+            </div>
           </div>
-          <div
-            className="absolute left-4 flex flex-wrap gap-2 h-min pointer-events-none"
-            style={{ width: itemContainerRef.current?.clientWidth }}
-          >
-            {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"
-                  }`}
+        </label>
+        {!options?.disableDropdown && (
+          <div className="w-0 overflow-hidden">
+            <Dropdown
+              placement="bottom-start"
+              dismissOnClick={false}
+              trigger={
+                <button
+                  type="button"
+                  ref={dropdownRef}
+                  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}
+                  disabled={disabled ?? false}
                 >
-                  <span>{menus.find((i) => i.value === item)?.label}</span>
-                  <button
-                    disabled={
-                      disabled ||
-                      menus.find((i) => i.value === item)?.disableUnselect
+                  1
+                </button>
+              }
+            >
+              {menus.length === 0 ? (
+                <Dropdown.Item
+                  onKeyDown={(e) => {
+                    if (e.key === "Escape") {
+                      e.preventDefault();
+                      inputRef.current?.focus();
+                      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 }}
                   >
-                    <Icon icon="pajamas:close" />
-                  </button>
-                </div>
-              );
-            })}
+                    <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);
+                        }
+                      }}
+                    >
+                      <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>
-      </label>
-      {!options?.disableDropdown && (
-        <div className="w-0 overflow-hidden">
-          <Dropdown
-            placement="bottom-start"
-            dismissOnClick={false}
-            trigger={
+        )}
+      </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>
               <button
                 type="button"
-                ref={dropdownRef}
-                className="w-0 my-0.5"
-                style={{
-                  height: dropdownHeight,
-                }}
+                disabled={
+                  disabled ||
+                  menus.find((i) => i.value === item)?.disableUnselect
+                }
                 tabIndex={-1}
-                disabled={disabled ?? 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,
+                      },
+                    });
+                  }
+                }}
               >
-                1
+                <Icon icon="pajamas:close" />
               </button>
-            }
-          >
-            {menus.length === 0 ? (
-              <Dropdown.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 },
-                        });
-                      }
-                    }}
-                  >
-                    <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>
     </div>
   );
 };

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

@@ -114,6 +114,7 @@ export const Rating: React.FC<RatingProps> = ({
         <input
           type="text"
           className={`absolute top-0 w-full border-0 bg-transparent text-transparent caret-transparent pointer-events-none focus:ring-0 ${height}`}
+          tabIndex={-1}
           required={rest.required}
           readOnly
           value={tempValue}

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

@@ -103,11 +103,7 @@ export const Select: React.FC<SelectProps> = ({
           <input
             ref={inputRef}
             type="text"
-            className={`w-full ps-4 pe-14 border rounded-md bg-secondary-bg cursor-pointer caret-transparent 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:text-disabled disabled:cursor-default ${height} ${
-              openDropdown
-                ? "placeholder:translate-x-1 outline-none ring-1 ring-primary shadow shadow-primary border-primary-dark"
-                : "border-default placeholder:translate-x-0"
-            }`}
+            className={`w-full ps-4 pe-14 border border-default rounded-md bg-secondary-bg cursor-pointer caret-transparent 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:text-disabled disabled:cursor-default ${height}`}
             placeholder={placeholder}
             required={rest.required}
             disabled={rest.disabled}
@@ -125,6 +121,12 @@ export const Select: React.FC<SelectProps> = ({
                 inputRef?.current?.getBoundingClientRect()?.width || 0
               );
             }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                inputRef.current?.click();
+              }
+            }}
           />
           <div className="absolute right-4 text-xl text-disabled pointer-events-none">
             <Icon icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`} />
@@ -154,7 +156,15 @@ export const Select: React.FC<SelectProps> = ({
           }
         >
           {menus.length === 0 ? (
-            <Dropdown.Item>
+            <Dropdown.Item
+              onKeyDown={(e) => {
+                if (e.key === "Escape") {
+                  e.preventDefault();
+                  inputRef.current?.focus();
+                  setOpenDropdown(false);
+                }
+              }}
+            >
               <div
                 className="flex justify-center"
                 style={{ width: dropdownWidth - 43 }}
@@ -177,6 +187,15 @@ export const Select: React.FC<SelectProps> = ({
                         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);
+                    }
                   }}
                 >
                   <div

package/src/components/table/index.tsx

@@ -383,7 +383,7 @@ export const Table: TableComponentProps = ({
                 <input
                   type="search"
                   className="w-full border-x-0 border-b border-t-0 border-default bg-secondary-bg px-6 pb-0.5 pt-0 text-sm font-normal placeholder:translate-x-0 placeholder:text-silent placeholder:duration-300 focus:border-primary-dark focus:outline-none focus:ring-0 focus:placeholder:translate-x-1 disabled:bg-secondary-light disabled:text-disabled [&::-webkit-search-cancel-button]:appearance-none"
-                  placeholder="search.."
+                  placeholder="Search..."
                   value={
                     filter?.find((filterItem) => filterItem.key === item.key)
                       ?.value || ""
@@ -638,7 +638,7 @@ export const Table: TableComponentProps = ({
             {options?.toolbar?.search?.show !== false && (
               <Form.Search
                 options={{ width: "fit" }}
-                placeholder="search.."
+                placeholder="Search..."
                 value={search}
                 onChange={(e) => {
                   setSearch(e.target.value);