innoboxrr-react-form-elements 3.0.0 → 3.2.0

package/index.js

@@ -22,6 +22,7 @@ export { default as CountrySelectInputComponent } from './src/CountrySelectInput
 export { default as DynamicGroupInputComponent } from './src/DynamicGroupInputComponent.jsx'
 export { default as EditorInputComponent } from './src/EditorInputComponent.jsx'
 export { default as FileDropInputComponent } from './src/FileDropInputComponent.jsx'
+export { default as IconComponent } from './src/IconComponent.jsx'
 export { default as FileInputComponent } from './src/FileInputComponent.jsx'
 export { default as FqsInputComponent } from './src/FqsInputComponent.jsx'
 export { default as InputErrorComponent } from './src/InputErrorComponent.jsx'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "innoboxrr-react-form-elements",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "description": "Gemelo React de innoboxrr-form-elements: los mismos componentes, los mismos nombres y el mismo contrato.",
   "type": "module",
   "main": "index.js",
@@ -48,10 +48,11 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@iconify/react": "^6.0.0",
     "@tinymce/tinymce-react": "^6.3.0",
     "@uiw/react-codemirror": "^4.25.11",
     "@yaireo/tagify": "^4.38.0",
-    "innoboxrr-form-core": "^2.0.0",
+    "innoboxrr-form-core": "^2.2.0",
     "innoboxrr-maskjs": "^2.0.0",
     "react-colorful": "^5.8.1",
     "react-phone-number-input": "^3.4.18",

package/src/IconComponent.jsx

@@ -0,0 +1,39 @@
+import { useSyncExternalStore } from 'react'
+import { Icon } from '@iconify/react'
+import { iconFor, onIconChange } from 'innoboxrr-form-core'
+
+/**
+ * Un icono, por nombre semantico.
+ *
+ *     <IconComponent name="plus" />
+ *     <IconComponent name="mdi:home" size={24} />
+ *
+ * El nombre se resuelve contra el mapa de innoboxrr-form-core —el mismo que
+ * usa la rama Vue—, asi que cambiar el juego de iconos de todo el proyecto es
+ * un `setIcons()` en el arranque y no tocar un solo componente.
+ *
+ * Es `aria-hidden` a proposito: un icono decorativo junto a su texto no debe
+ * leerse dos veces. Cuando el icono es la unica pista —un boton solo con
+ * icono— la etiqueta va en el `aria-label` del boton, que es donde el lector
+ * la espera.
+ *
+ * @param {{ name: string, size?: number|string, className?: string }} props
+ */
+export default function IconComponent({ name, size = null, className = null }) {
+    // useSyncExternalStore es la forma correcta de leer estado que vive fuera
+    // de React: un `setIcons()` en caliente repinta lo ya montado.
+    const resolved = useSyncExternalStore(
+        onIconChange,
+        () => iconFor(name),
+        () => iconFor(name)
+    )
+
+    return (
+        <Icon
+            icon={resolved}
+            width={size}
+            height={size}
+            className={className}
+            aria-hidden="true" />
+    )
+}

package/src/TextInputComponent.jsx

@@ -1,4 +1,5 @@
 import { useId, useState } from 'react'
+import IconComponent from './IconComponent.jsx'
 import { applyMask, isMaskSpec } from 'innoboxrr-maskjs'
 import Field from './internal/Field.jsx'
 import useThemeClass from './internal/useThemeClass.js'
@@ -62,7 +63,7 @@ export default function TextInputComponent({
 
     return (
         <Field label={label} help={help} htmlFor={uid}>
-            {hasIcon ? <span className="fe-field-icon" uk-icon={`icon: ${icon}`}></span> : null}
+            {hasIcon ? <span className="fe-field-icon"><IconComponent name={icon} /></span> : null}
 
             <div className="fe-input-wrap">
                 <input

package/src/internal/FieldLabel.jsx

@@ -20,7 +20,11 @@ export default function FieldLabel({ label, help, htmlFor = undefined }) {
         <label htmlFor={htmlFor} className={theme.label}>
             {help ? (
                 <span className={theme.help}>
-                    <i uk-tooltip={`title: ${help}`} className={theme.helpIcon}></i>
+                    <i
+                        className={theme.helpIcon}
+                        data-tooltip={help}
+                        aria-label={help}
+                        tabIndex={0}></i>
                 </span>
             ) : null}
             {label}