next-helios-fe 1.8.35 → 1.8.37

package/package.json

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

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

@@ -60,9 +60,8 @@ export const Tab: TabComponent = ({
         <div className="flex overflow-auto [&::-webkit-scrollbar]:hidden">
           {tabs?.slice(0, childrenList?.length).map((tab, index) => {
             return (
-              <div className="relative flex items-center">
+              <div key={index} className="relative flex items-center">
                 <button
-                  key={index}
                   type="button"
                   className={`flex items-center gap-2 pt-2 pb-1.5 border-b-2 select-none whitespace-nowrap duration-300 ${
                     activeTab === index

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

@@ -65,11 +65,12 @@ export const Range: React.FC<RangeProps> = ({
           style={{ accentColor: theme }}
           {...rest}
         />
-        {(inputRef.current?.value || rest.value) && (
-          <span className="w-7 text-right">
-            {inputRef.current?.value || rest.value}
-          </span>
-        )}
+        {!options?.hideInputDetail &&
+          (inputRef.current?.value || rest.value) && (
+            <span className="w-7 text-right">
+              {inputRef.current?.value || rest.value}
+            </span>
+          )}
       </div>
     </label>
   );

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

@@ -19,6 +19,7 @@ export interface MultipleSelectProps
   options?: {
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
+    disableDropdown?: boolean;
   };
   required?: boolean;
   disabled?: boolean;
@@ -178,11 +179,13 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
                 })}
               </div>
             )}
-            <div className="ms-auto text-xl text-disabled pointer-events-none">
-              <Icon
-                icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
-              />
-            </div>
+            {!options?.disableDropdown && (
+              <div className="ms-auto text-xl text-disabled pointer-events-none">
+                <Icon
+                  icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
+                />
+              </div>
+            )}
           </div>
           <input
             ref={inputRef}
@@ -232,62 +235,64 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
           </div>
         </div>
       </label>
-      <div className="w-0 overflow-hidden">
-        <Dropdown
-          placement="bottom-start"
-          dismissOnClick={false}
-          trigger={
-            <button
-              type="button"
-              ref={dropdownRef}
-              className="w-0 my-0.5"
+      {!options?.disableDropdown && (
+        <div className="w-0 overflow-hidden">
+          <Dropdown
+            placement="bottom-start"
+            dismissOnClick={false}
+            trigger={
+              <button
+                type="button"
+                ref={dropdownRef}
+                className="w-0 my-0.5"
+                style={{
+                  height: dropdownHeight,
+                }}
+              >
+                1
+              </button>
+            }
+          >
+            <div
               style={{
-                height: dropdownHeight,
+                width: dropdownWidth - 11,
               }}
             >
-              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 ps-4 pe-14 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]);
-                    if (onChange) {
-                      onChange({
-                        target: { value: [...tempValue, item.value] },
-                      } as any);
-                    }
-                    if (onSelect) {
-                      onSelect({
-                        target: { value: item.value },
-                      });
+              {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 ps-4 pe-14 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
                     }
-                  }}
-                >
-                  {item.label}
-                </button>
-              ))
-            )}
-          </div>
-        </Dropdown>
-      </div>
+                    onClick={() => {
+                      setTempValue([...tempValue, item.value]);
+                      if (onChange) {
+                        onChange({
+                          target: { value: [...tempValue, item.value] },
+                        } as any);
+                      }
+                      if (onSelect) {
+                        onSelect({
+                          target: { value: item.value },
+                        });
+                      }
+                    }}
+                  >
+                    {item.label}
+                  </button>
+                ))
+              )}
+            </div>
+          </Dropdown>
+        </div>
+      )}
     </div>
   );
 };