@apia/components 3.0.27 → 3.0.30

package/dist/index.d.ts

@@ -1626,6 +1626,7 @@ type TIcon<P = Record<string, unknown>> = {
      * Permite modificar el color individual de un ícono.
      */
     textColor?: string;
+    title?: string;
 };
 type TIconsList<P = Record<string, unknown>> = {
     /**

package/dist/index.js

@@ -7103,6 +7103,7 @@ function findIcon(icons, arg) {
     const icon = icons.find((current) => String(current.id) === iconId);
     return icon ?? null;
   }
+  return null;
 }
 const KeyHandler = ({
   children,
@@ -7195,6 +7196,15 @@ const KeyHandler = ({
         },
         [actions]
       ),
+      onClick: useCallback(
+        (ev) => {
+          const icon = findIcon(icons, ev.target);
+          if (onIconClick && icon) {
+            onIconClick(ev, icon);
+          }
+        },
+        [icons, onIconClick]
+      ),
       onDoubleClick: useCallback(
         (ev) => {
           if (onIconDoubleClick) {
@@ -7403,21 +7413,28 @@ const DefaultIconRendererNoMemo = (props) => {
     console.error({ props });
     console.error("The icon has no imageUrl nor icon defined");
   }
-  return /* @__PURE__ */ jsxs(Box, { title: props.label, className: "iconsList__icon__wrapper", children: [
-    /* @__PURE__ */ jsxs(Box, { className: "iconsList__icon__image__wrapper", children: [
-      props.imageUrl && /* @__PURE__ */ jsx(
-        Image,
-        {
-          className: "iconsList__icon__image",
-          src: props.imageUrl,
-          role: "none",
-          alt: ""
-        }
-      ),
-      props.icon && /* @__PURE__ */ jsx(Icon$1, { icon: props.icon, title: props.ariaLabel })
-    ] }),
-    /* @__PURE__ */ jsx(Box, { className: "iconsList__icon__label", children: props.label })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      title: props.title || props.label,
+      className: "iconsList__icon__wrapper",
+      children: [
+        /* @__PURE__ */ jsxs(Box, { className: "iconsList__icon__image__wrapper", children: [
+          props.imageUrl && /* @__PURE__ */ jsx(
+            Image,
+            {
+              className: "iconsList__icon__image",
+              src: props.imageUrl,
+              role: "none",
+              alt: ""
+            }
+          ),
+          props.icon && /* @__PURE__ */ jsx(Icon$1, { icon: props.icon, title: props.ariaLabel })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { className: "iconsList__icon__label", children: props.label })
+      ]
+    }
+  );
 };
 const DefaultIconRenderer = memo(DefaultIconRendererNoMemo);