bmi-next 1.0.24 → 1.0.25

package/dist/components/Select/DrawerPortal/index.js

@@ -1,95 +1,105 @@
-import { jsxs as r, Fragment as D, jsx as o } from "react/jsx-runtime";
-import { useRef as E, Fragment as A } from "react";
+import { jsxs as o, Fragment as D, jsx as r } from "react/jsx-runtime";
+import { useRef as h, Fragment as A } from "react";
 import { r as I } from "../../../index-Cp_B-Y3h.js";
 import { Icon as j } from "../../../icons/icons.js";
 import { Image as H } from "../../images/index.js";
-import '../../../assets/index3.css';const B = "_overlay_f1ngj_1", Y = "_closing_f1ngj_11", L = "_bottomDrawer_f1ngj_35", S = "_drawerHeader_f1ngj_73", C = "_drawerIndicator_f1ngj_87", X = "_drawerContent_f1ngj_98", $ = "_optionCountry_f1ngj_106", b = "_optionNormal_f1ngj_107", R = "_options_f1ngj_125", M = "_closeButton_f1ngj_137", x = "_separator_f1ngj_150", t = {
+import '../../../assets/index3.css';const B = "_overlay_f1ngj_1", Y = "_closing_f1ngj_11", L = "_bottomDrawer_f1ngj_35", S = "_drawerHeader_f1ngj_73", C = "_drawerIndicator_f1ngj_87", R = "_drawerContent_f1ngj_98", X = "_optionCountry_f1ngj_106", $ = "_optionNormal_f1ngj_107", b = "_options_f1ngj_125", x = "_closeButton_f1ngj_137", M = "_separator_f1ngj_150", t = {
   overlay: B,
   closing: Y,
   bottomDrawer: L,
   drawerHeader: S,
   drawerIndicator: C,
-  drawerContent: X,
-  optionCountry: $,
-  optionNormal: b,
-  options: R,
-  closeButton: M,
-  separator: x
+  drawerContent: R,
+  optionCountry: X,
+  optionNormal: $,
+  options: b,
+  closeButton: x,
+  separator: M
 }, P = ({
-  isOpen: h,
+  isOpen: E,
   handleClose: s,
-  dragPosition: f,
-  setDragPosition: i,
-  isClosing: _,
-  title: p,
-  options: u,
-  handleOptionClick: w,
-  countries: N,
-  zIndex: d
+  dragPosition: p,
+  setDragPosition: m,
+  isClosing: u,
+  title: f,
+  options: _,
+  handleOptionClick: y,
+  countries: w,
+  zIndex: l
 }) => {
-  const y = d ? 50 : 70, l = E(0), m = E(0);
-  if (!h) return null;
-  const v = (e) => {
+  const N = l ? 50 : 70, d = h(0), i = h(0);
+  if (!E) return null;
+  const g = (e) => {
     const n = "touches" in e ? e.touches[0].clientY : e.clientY;
-    l.current = n, m.current = n, document.addEventListener("mousemove", c), document.addEventListener("touchmove", c), document.addEventListener("mouseup", a), document.addEventListener("touchend", a);
-  }, a = () => {
-    document.removeEventListener("mousemove", c), document.removeEventListener("touchmove", c), document.removeEventListener("mouseup", a), document.removeEventListener("touchend", a), m.current - l.current > 100 ? s() : i(0);
-  }, c = (e) => {
-    const n = "touches" in e ? e.touches[0].clientY : e.clientY, g = n - l.current;
-    m.current = n, g > 0 && i(g);
+    d.current = n, i.current = n, document.addEventListener("mousemove", a), document.addEventListener("touchmove", a), document.addEventListener("mouseup", c), document.addEventListener("touchend", c);
+  }, c = () => {
+    document.removeEventListener("mousemove", a), document.removeEventListener("touchmove", a), document.removeEventListener("mouseup", c), document.removeEventListener("touchend", c), i.current - d.current > 100 ? s() : m(0);
+  }, a = (e) => {
+    const n = "touches" in e ? e.touches[0].clientY : e.clientY, v = n - d.current;
+    i.current = n, v > 0 && m(v);
   };
   return I.createPortal(
-    /* @__PURE__ */ r(D, { children: [
-      /* @__PURE__ */ o(
+    /* @__PURE__ */ o(D, { children: [
+      /* @__PURE__ */ r(
         "div",
         {
-          style: { zIndex: 2e3 + (d || 0) },
-          className: `${t.overlay} ${_ ? t.closing : ""}`,
+          style: { zIndex: 2e3 + (l || 0) },
+          className: `${t.overlay} ${u ? t.closing : ""}`,
           onClick: s
         }
       ),
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ o(
         "div",
         {
-          className: `${t.bottomDrawer} ${_ ? t.closing : ""}`,
+          className: `${t.bottomDrawer} ${u ? t.closing : ""}`,
           style: {
-            transform: `translateY(${f ?? 0}px)`,
-            zIndex: 2001 + (d || 0)
+            transform: `translateY(${p ?? 0}px)`,
+            zIndex: 2001 + (l || 0)
           },
           children: [
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ o(
               "header",
               {
                 className: t.drawerHeader,
-                onMouseDown: v,
-                onTouchStart: v,
+                onMouseDown: g,
+                onTouchStart: g,
                 children: [
-                  /* @__PURE__ */ o("div", { className: t.drawerIndicator }),
-                  /* @__PURE__ */ o("div", { className: t.closeButton, onClick: s, children: /* @__PURE__ */ o(j, { name: "Close", fill: "rgb(0 0 0/40%)" }) }),
-                  /* @__PURE__ */ o("p", { children: p })
+                  /* @__PURE__ */ r("div", { className: t.drawerIndicator }),
+                  /* @__PURE__ */ r("div", { className: t.closeButton, onClick: s, children: /* @__PURE__ */ r(j, { name: "Close", fill: "rgb(0 0 0/40%)" }) }),
+                  /* @__PURE__ */ r("p", { children: f })
                 ]
               }
             ),
-            /* @__PURE__ */ o(
+            /* @__PURE__ */ r(
               "div",
               {
                 className: t.drawerContent,
-                style: { maxHeight: `${y}vh` },
-                children: /* @__PURE__ */ o("div", { className: t.options, children: u.map(
-                  (e, n) => e.hidden ? null : /* @__PURE__ */ r(A, { children: [
-                    /* @__PURE__ */ r(
+                style: { maxHeight: `${N}vh` },
+                children: /* @__PURE__ */ r("div", { className: t.options, children: _.map(
+                  (e, n) => e.hidden ? null : /* @__PURE__ */ o(A, { children: [
+                    /* @__PURE__ */ o(
                       "div",
                       {
-                        className: `${N ? t.optionCountry : t.optionNormal}`,
-                        onClick: () => w(e),
+                        className: `${w ? t.optionCountry : t.optionNormal}`,
+                        onClick: () => y(e),
                         children: [
-                          e.image && /* @__PURE__ */ o(H, { width: 30, height: 30, src: e.image.src }),
-                          e.label
+                          e.image && /* @__PURE__ */ r(H, { width: 30, height: 30, src: e.image.src }),
+                          /* @__PURE__ */ o("div", { style: { display: "flex", flexDirection: "column" }, children: [
+                            /* @__PURE__ */ r("p", { style: { margin: 0 }, children: e.label }),
+                            e.description && /* @__PURE__ */ r(
+                              "p",
+                              {
+                                className: "small2Regular",
+                                style: { margin: 0, opacity: 0.5 },
+                                children: e.description
+                              }
+                            )
+                          ] })
                         ]
                       },
                       e.value
                     ),
-                    n < u.length - 1 && /* @__PURE__ */ o("div", { className: t.separator })
+                    n < _.length - 1 && /* @__PURE__ */ r("div", { className: t.separator })
                   ] }, n)
                 ) })
               }

package/dist/components/Select/index.d.ts

@@ -10,6 +10,7 @@ import { ImgProps } from '../images';
  * @property {ImgProps} [image] - Imagen opcional para mostrar junto a la opción.
  * @property {IconPropsWithIconName} [icon] - Icono opcional para mostrar junto a la opción.
  * @property {boolean} [hidden] - Indica si la opción debe estar oculta en la lista.
+ * @property {string} [description] - Descripción opcional para mostrar junto a la opción.
  */
 export interface Option {
     /** El texto que se muestra para la opción */
@@ -22,6 +23,8 @@ export interface Option {
     icon?: IconPropsWithIconName;
     /** Indica si la opción debe estar oculta en la lista */
     hidden?: boolean;
+    /** Descripción opcional para mostrar junto a la opción */
+    description?: string;
 }
 /**
  * Props del componente Select.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bmi-next",
   "description": "Componentes de UI para proyecto BMI Next",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "author": "David Fernández Bolaños <david@bmiahorro.com>",
   "contributors": [
     "Jorge Martín <jorge@bmiahorro.com>",