next-helios-fe 1.8.82 → 1.8.83

package/package.json

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

package/src/components/chip/index.tsx

@@ -10,9 +10,15 @@ interface ChipProps {
     bordered?: boolean;
     borderRadius?: "basic" | "full";
   };
+  onRemove?: () => void;
 }
 
-export const Chip: React.FC<ChipProps> = ({ label, icon, options }) => {
+export const Chip: React.FC<ChipProps> = ({
+  label,
+  icon,
+  options,
+  onRemove,
+}) => {
   const variant =
     options?.bordered !== true
       ? options?.variant === "secondary"
@@ -35,13 +41,37 @@ export const Chip: React.FC<ChipProps> = ({ label, icon, options }) => {
       : "border border-primary text-primary";
   const borderRadius =
     options?.borderRadius === "full" ? "rounded-full" : "rounded-md";
+  const removeButton =
+    options?.variant === "secondary"
+      ? "text-secondary hover:text-secondary-dark"
+      : options?.variant === "success"
+      ? "text-success hover:text-success-dark"
+      : options?.variant === "warning"
+      ? "text-warning hover:text-warning-dark"
+      : options?.variant === "danger"
+      ? "text-danger hover:text-danger-dark"
+      : "text-primary hover:text-primary-dark";
 
   return (
     <div
-      className={`flex items-center gap-1.5 w-fit px-3 py-1 font-medium select-none ${variant} ${borderRadius}`}
+      className={`flex items-center gap-3 w-fit px-3 py-1 font-medium select-none ${variant} ${borderRadius}`}
     >
-      {icon && <Icon icon={icon} className="text-lg" />}
-      <span className="text-sm">{label}</span>
+      <div className="flex items-center gap-1.5">
+        {icon && <Icon icon={icon} className="text-lg" />}
+        <span className="text-sm">{label}</span>
+      </div>
+      {onRemove && (
+        <div
+          className={`cursor-pointer active:opacity-70 active:duration-300 active:ease-out disabled:active:opacity-100 ${removeButton}`}
+          onClick={() => {
+            if (onRemove) {
+              onRemove();
+            }
+          }}
+        >
+          <Icon icon="pajamas:close" />
+        </div>
+      )}
     </div>
   );
 };

package/src/components/table/index.tsx

@@ -46,7 +46,7 @@ interface TableProps {
       };
       customTool?: {
         icon: string;
-        tooltip?: string;
+        tooltip: string;
         variant: "primary" | "secondary" | "success" | "warning" | "danger";
         show?: boolean;
         onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
@@ -548,7 +548,7 @@ export const Table: TableComponentProps = ({
                     : "bg-primary hover:bg-primary-dark";
 
                 if (item.show !== false) {
-                  return item?.tooltip ? (
+                  return (
                     <Tooltip
                       key={index}
                       content={item.tooltip || "custom tool"}
@@ -563,16 +563,6 @@ export const Table: TableComponentProps = ({
                         <Icon icon={item.icon} className="text-2xl" />
                       </button>
                     </Tooltip>
-                  ) : (
-                    <button
-                      type="button"
-                      className={`rounded-full p-1.5 text-white ${variant}`}
-                      onClick={(e) => {
-                        item.onClick && item.onClick(e);
-                      }}
-                    >
-                      <Icon icon={item.icon} className="text-2xl" />
-                    </button>
                   );
                 }
               })}