next-helios-fe 1.8.3 → 1.8.5

package/package.json

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

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

@@ -112,6 +112,8 @@ export const Date: React.FC<DateProps> = ({
           <input
             type="text"
             className={`w-full ps-4 pe-14 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}`}
+            disabled={rest.disabled}
+            readOnly
             value={
               dateRangeLabel(tempValue) === "Custom" ||
               !options?.enableSelectRange
@@ -123,7 +125,6 @@ export const Date: React.FC<DateProps> = ({
                   } - ${dayjs(tempValue[1]).format("DD MMM YYYY")}`
                 : dateRangeLabel(tempValue)
             }
-            disabled={rest.disabled}
           />
           <button
             type="button"
@@ -158,6 +159,7 @@ export const Date: React.FC<DateProps> = ({
               !options.disableFuture && (
                 <div className="w-40">
                   <button
+                    type="button"
                     className="w-40 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={dateRangeLabel(tempValue) === "Today"}
                     onClick={() => {
@@ -180,6 +182,7 @@ export const Date: React.FC<DateProps> = ({
                     Today
                   </button>
                   <button
+                    type="button"
                     className="w-40 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={dateRangeLabel(tempValue) === "Yesterday"}
                     onClick={() => {
@@ -202,6 +205,7 @@ export const Date: React.FC<DateProps> = ({
                     Yesterday
                   </button>
                   <button
+                    type="button"
                     className="w-40 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={dateRangeLabel(tempValue) === "Last 7 days"}
                     onClick={() => {
@@ -224,6 +228,7 @@ export const Date: React.FC<DateProps> = ({
                     Last 7 days
                   </button>
                   <button
+                    type="button"
                     className="w-40 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={dateRangeLabel(tempValue) === "Last 30 days"}
                     onClick={() => {
@@ -246,6 +251,7 @@ export const Date: React.FC<DateProps> = ({
                     Last 30 days
                   </button>
                   <button
+                    type="button"
                     className="w-40 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={dateRangeLabel(tempValue) === "Custom"}
                     onClick={() => {

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

@@ -2,7 +2,8 @@
 import React, { useState, useEffect } from "react";
 import { Icon } from "@iconify/react";
 
-export interface RatingProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface RatingProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
   description?: string;
   options?: {
@@ -112,8 +113,9 @@ 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}`}
-          value={tempValue}
           required={rest.required}
+          readOnly
+          value={tempValue}
         />
       </div>
     </div>

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

@@ -14,6 +14,7 @@ export interface SelectProps
   label?: string;
   placeholder?: string;
   description?: string;
+  labelComponent?: (e?: any) => React.ReactNode;
   options?: {
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
@@ -21,11 +22,12 @@ export interface SelectProps
 }
 
 export const Select: React.FC<SelectProps> = ({
-  options,
   label,
   menus,
   placeholder,
   description,
+  labelComponent,
+  options,
   ...rest
 }) => {
   const [tempValue, setTempValue] = useState("");
@@ -96,6 +98,7 @@ export const Select: React.FC<SelectProps> = ({
             placeholder={placeholder}
             required={rest.required}
             disabled={rest.disabled}
+            readOnly
             value={
               tempValue
                 ? menus.find((item) => item.value === tempValue)?.label
@@ -151,7 +154,7 @@ export const Select: React.FC<SelectProps> = ({
                     <button
                       key={index}
                       type="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"
+                      className="flex justify-between items-center 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
                       onClick={() => {
                         setTempValue(item.value);
@@ -162,7 +165,8 @@ export const Select: React.FC<SelectProps> = ({
                         }
                       }}
                     >
-                      {item.label}
+                      <span>{item.label}</span>
+                      {labelComponent ? labelComponent(item) : ""}
                     </button>
                   );
                 } else {
@@ -170,7 +174,7 @@ export const Select: React.FC<SelectProps> = ({
                     <button
                       key={index}
                       type="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:text-slate-400"
+                      className="flex justify-between items-center min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:text-slate-400"
                       disabled={item.disabled}
                       onClick={() => {
                         setTempValue(item.value);
@@ -181,7 +185,8 @@ export const Select: React.FC<SelectProps> = ({
                         }
                       }}
                     >
-                      {item.label}
+                      <span>{item.label}</span>
+                      {labelComponent ? labelComponent(item) : ""}
                     </button>
                   );
                 }