siam-ui-utils 3.0.32 → 3.1.1

package/dist/select/multi-select/index.js

@@ -1,10 +1,83 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { MultiSelect as je } from "../../node_modules/react-multi-select-component/dist/esm/index.js";
+import { useState, useRef, useEffect, useCallback } from "react";
+import Select, { components } from "react-select";
 import { Row, Col } from "reactstrap";
+import { CustomInputCheckbox } from "../../custom-input/CustomInputCheckbox.js";
 import BadgeLabelMultiSelect from "./badge-label-multi-select.js";
 import { BadgeWrapper, ClickableBadge } from "./styled-component.js";
 import "./index.css";
+const SELECT_ALL_VALUE = "__select_all__";
+const SELECT_ALL_OPTION = {
+  value: SELECT_ALL_VALUE,
+  label: "SELECCIONAR TODOS"
+};
+function CheckboxOption({
+  data,
+  isSelected,
+  isFocused,
+  innerRef,
+  selectProps
+}) {
+  const isSelectAll = data.value === SELECT_ALL_VALUE;
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (isSelectAll) {
+      selectProps.onSelectAll?.();
+    } else {
+      selectProps.onOptionClick?.(data);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: innerRef,
+      onMouseDown: handleMouseDown,
+      onTouchEnd: handleMouseDown,
+      className: "multiselect-checkbox-option",
+      style: {
+        backgroundColor: isFocused ? "#f8e1e1" : "white",
+        borderBottom: isSelectAll ? "1px solid #ccc" : "none",
+        padding: "6px 12px",
+        cursor: "pointer"
+      },
+      children: /* @__PURE__ */ jsx(
+        CustomInputCheckbox,
+        {
+          id: `opt_${data.value}`,
+          checked: isSelected,
+          onChange: () => {
+          },
+          label: /* @__PURE__ */ jsx("span", { style: { fontWeight: isSelectAll ? "bold" : "normal" }, children: data.label })
+        }
+      )
+    }
+  );
+}
+function CustomValueContainer({ children, getValue, ...props }) {
+  const selected = getValue();
+  const totalOptions = props.selectProps.options.length - 1;
+  const count = selected.length;
+  const isAll = count > 0 && count === totalOptions;
+  const text = isAll ? "Todos Seleccionados" : count > 0 ? selected.map((s) => s.label).join(", ") : null;
+  return /* @__PURE__ */ jsxs(components.ValueContainer, { ...props, getValue, children: [
+    text ? /* @__PURE__ */ jsx("span", { style: { color: "#333" }, children: text }) : /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          color: count ? "transparent" : "#999",
+          position: "absolute"
+        },
+        children: props.selectProps.placeholder
+      }
+    ),
+    children[children.length - 1]
+  ] });
+}
+const CUSTOM_COMPONENTS = {
+  Option: CheckboxOption,
+  ValueContainer: CustomValueContainer
+};
 const CustomMultiSelect = ({
   lista = [],
   onListaUpdate = () => {
@@ -12,42 +85,77 @@ const CustomMultiSelect = ({
   value = [],
   styles = {}
 }) => {
-  const [selected, setSelected] = useState([]);
-  const overrideStringsCustom = {
-    selectSomeItems: "Seleccionar Estado/s",
-    allItemsAreSelected: "Todos Seleccionados",
-    search: "Buscar...",
-    selectAll: "SELECCIONAR TODOS"
-  };
+  const [selected, setSelected] = useState(value);
+  const isInternalChange = useRef(false);
   useEffect(() => {
-    if (value.length) {
-      setSelected(value);
+    if (isInternalChange.current) {
+      isInternalChange.current = false;
+      return;
     }
-  }, [value]);
-  const handleCheckChange = (selectedOptions) => {
-    if (selectedOptions) {
-      setSelected(selectedOptions);
-      onListaUpdate(selectedOptions);
-    }
-  };
-  const handleRemoveBadge = (valueToRemove) => {
-    const updated = selected.filter((item) => item.value !== valueToRemove);
-    setSelected(updated);
-    onListaUpdate(updated);
-  };
+    setSelected(value);
+  }, [JSON.stringify(value)]);
+  const update = useCallback(
+    (newSelected) => {
+      isInternalChange.current = true;
+      setSelected(newSelected);
+      onListaUpdate(newSelected);
+    },
+    [onListaUpdate]
+  );
+  const handleOptionClick = useCallback(
+    (data) => {
+      setSelected((prev) => {
+        const isAlreadySelected = prev.some((s) => s.value === data.value);
+        const next = isAlreadySelected ? prev.filter((s) => s.value !== data.value) : [...prev, data];
+        isInternalChange.current = true;
+        onListaUpdate(next);
+        return next;
+      });
+    },
+    [onListaUpdate]
+  );
+  const handleSelectAll = useCallback(() => {
+    setSelected((prev) => {
+      const next = prev.length === lista.length ? [] : [...lista];
+      isInternalChange.current = true;
+      onListaUpdate(next);
+      return next;
+    });
+  }, [lista, onListaUpdate]);
+  const handleRemoveBadge = useCallback(
+    (valueToRemove) => {
+      update(selected.filter((item) => item.value !== valueToRemove));
+    },
+    [selected, update]
+  );
+  const allSelected = lista.length > 0 && selected.length === lista.length;
+  const optionsWithSelectAll = [SELECT_ALL_OPTION, ...lista];
+  const isOptionSelected = useCallback(
+    (option) => option.value === SELECT_ALL_VALUE ? allSelected : selected.some((s) => s.value === option.value),
+    [allSelected, selected]
+  );
   return /* @__PURE__ */ jsxs(Row, { className: "align-items-center", children: [
-    /* @__PURE__ */ jsx(Col, { xs: 6, style: { ...styles }, children: /* @__PURE__ */ jsx(
-      je,
+    /* @__PURE__ */ jsx(Col, { xs: 6, style: styles, children: /* @__PURE__ */ jsx(
+      Select,
       {
-        options: lista,
+        options: optionsWithSelectAll,
         value: selected,
-        onChange: handleCheckChange,
-        labelledBy: "Seleccionar",
+        onChange: update,
+        isMulti: true,
+        placeholder: "Seleccione",
+        noOptionsMessage: () => "Sin opciones",
         className: "custom-multiselect",
-        overrideStrings: overrideStringsCustom
+        classNamePrefix: "custom-multiselect",
+        components: CUSTOM_COMPONENTS,
+        closeMenuOnSelect: false,
+        hideSelectedOptions: false,
+        isSearchable: false,
+        onSelectAll: handleSelectAll,
+        onOptionClick: handleOptionClick,
+        isOptionSelected
       }
     ) }),
-    /* @__PURE__ */ jsx(Col, { xs: 6, style: { marginTop: "0.5rem" }, children: selected.length > 0 && /* @__PURE__ */ jsx(BadgeWrapper, { children: selected.length === lista.length ? /* @__PURE__ */ jsx(ClickableBadge, { color: "info", pill: true, children: "Todos" }) : /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Col, { xs: 6, children: selected.length > 0 && /* @__PURE__ */ jsx(BadgeWrapper, { children: allSelected ? /* @__PURE__ */ jsx(ClickableBadge, { color: "info", pill: true, children: "Todos" }) : /* @__PURE__ */ jsx(
       BadgeLabelMultiSelect,
       {
         descripcionLabel: selected,

package/dist/select/multi-select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/select/multi-select/index.jsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { MultiSelect } from 'react-multi-select-component';\r\nimport { Col, Row } from 'reactstrap';\r\nimport BadgeLabelMultiSelect from './badge-label-multi-select';\r\nimport { BadgeWrapper, ClickableBadge } from './styled-component';\r\nimport './index.scss';\r\n\r\nexport const CustomMultiSelect = ({\r\n  lista = [],\r\n  onListaUpdate = () => { },\r\n  value = [],\r\n  styles = {},\r\n}) => {\r\n  const [selected, setSelected] = useState([]);\r\n  const overrideStringsCustom = {\r\n    selectSomeItems: 'Seleccionar Estado/s',\r\n    allItemsAreSelected: 'Todos Seleccionados',\r\n    search: 'Buscar...',\r\n    selectAll: 'SELECCIONAR TODOS',\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (value.length) {\r\n      setSelected(value);\r\n    }\r\n  }, [value]);\r\n\r\n  const handleCheckChange = (selectedOptions) => {\r\n    if (selectedOptions) {\r\n      setSelected(selectedOptions);\r\n      onListaUpdate(selectedOptions);\r\n    }\r\n  };\r\n\r\n  const handleRemoveBadge = (valueToRemove) => {\r\n    const updated = selected.filter((item) => item.value !== valueToRemove);\r\n    setSelected(updated);\r\n    onListaUpdate(updated);\r\n  };\r\n\r\n  return (\r\n    <Row className=\"align-items-center\" >\r\n      <Col xs={6} style={{ ...styles }}>\r\n        <MultiSelect\r\n          options={lista}\r\n          value={selected}\r\n          onChange={handleCheckChange}\r\n          labelledBy=\"Seleccionar\"\r\n          className=\"custom-multiselect\"\r\n          overrideStrings={overrideStringsCustom}\r\n        />\r\n      </Col>\r\n      <Col xs={6} style={{ marginTop: '0.5rem' }}>\r\n        {selected.length > 0 && (\r\n          <BadgeWrapper>\r\n            {selected.length === lista.length ? (\r\n              <ClickableBadge color=\"info\" pill>\r\n                Todos\r\n              </ClickableBadge>\r\n            ) : (\r\n              <BadgeLabelMultiSelect\r\n                descripcionLabel={selected}\r\n                onRemove={handleRemoveBadge}\r\n              />\r\n            )}\r\n          </BadgeWrapper>\r\n        )}\r\n      </Col>\r\n    </Row>\r\n  );\r\n};\r\n\r\nexport default CustomMultiSelect;\r\n"],"names":["MultiSelect"],"mappings":";;;;;;;AAOO,MAAM,oBAAoB,CAAC;AAAA,EAChC,QAAQ,CAAA;AAAA,EACR,gBAAgB,MAAM;AAAA,EAAE;AAAA,EACxB,QAAQ,CAAA;AAAA,EACR,SAAS,CAAA;AACX,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAA,CAAE;AAC3C,QAAM,wBAAwB;AAAA,IAC5B,iBAAiB;AAAA,IACjB,qBAAqB;AAAA,IACrB,QAAQ;AAAA,IACR,WAAW;AAAA,EAAA;AAGb,YAAU,MAAM;AACd,QAAI,MAAM,QAAQ;AAChB,kBAAY,KAAK;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,oBAAoB,CAAC,oBAAoB;AAC7C,QAAI,iBAAiB;AACnB,kBAAY,eAAe;AAC3B,oBAAc,eAAe;AAAA,IAC/B;AAAA,EACF;AAEA,QAAM,oBAAoB,CAAC,kBAAkB;AAC3C,UAAM,UAAU,SAAS,OAAO,CAAC,SAAS,KAAK,UAAU,aAAa;AACtE,gBAAY,OAAO;AACnB,kBAAc,OAAO;AAAA,EACvB;AAEA,SACE,qBAAC,KAAA,EAAI,WAAU,sBACb,UAAA;AAAA,IAAA,oBAAC,OAAI,IAAI,GAAG,OAAO,EAAE,GAAG,UACtB,UAAA;AAAA,MAACA;AAAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,OAAO;AAAA,QACP,UAAU;AAAA,QACV,YAAW;AAAA,QACX,WAAU;AAAA,QACV,iBAAiB;AAAA,MAAA;AAAA,IAAA,GAErB;AAAA,IACA,oBAAC,KAAA,EAAI,IAAI,GAAG,OAAO,EAAE,WAAW,SAAA,GAC7B,UAAA,SAAS,SAAS,yBAChB,cAAA,EACE,UAAA,SAAS,WAAW,MAAM,SACzB,oBAAC,gBAAA,EAAe,OAAM,QAAO,MAAI,MAAC,UAAA,QAAA,CAElC,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,kBAAkB;AAAA,QAClB,UAAU;AAAA,MAAA;AAAA,IAAA,GAGhB,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/select/multi-select/index.jsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\r\nimport Select, { components } from 'react-select';\r\nimport { Col, Row } from 'reactstrap';\r\nimport { CustomInputCheckbox } from '../../custom-input/CustomInputCheckbox';\r\nimport BadgeLabelMultiSelect from './badge-label-multi-select';\r\nimport { BadgeWrapper, ClickableBadge } from './styled-component';\r\nimport './index.scss';\r\n\r\nconst SELECT_ALL_VALUE = '__select_all__';\r\nconst SELECT_ALL_OPTION = {\r\n  value: SELECT_ALL_VALUE,\r\n  label: 'SELECCIONAR TODOS',\r\n};\r\n\r\nfunction CheckboxOption({\r\n  data,\r\n  isSelected,\r\n  isFocused,\r\n  innerRef,\r\n  selectProps,\r\n}) {\r\n  const isSelectAll = data.value === SELECT_ALL_VALUE;\r\n\r\n  const handleMouseDown = (e) => {\r\n    e.preventDefault();\r\n    e.stopPropagation();\r\n    if (isSelectAll) {\r\n      selectProps.onSelectAll?.();\r\n    } else {\r\n      selectProps.onOptionClick?.(data);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div\r\n      ref={innerRef}\r\n      onMouseDown={handleMouseDown}\r\n      onTouchEnd={handleMouseDown}\r\n      className=\"multiselect-checkbox-option\"\r\n      style={{\r\n        backgroundColor: isFocused ? '#f8e1e1' : 'white',\r\n        borderBottom: isSelectAll ? '1px solid #ccc' : 'none',\r\n        padding: '6px 12px',\r\n        cursor: 'pointer',\r\n      }}\r\n    >\r\n      <CustomInputCheckbox\r\n        id={`opt_${data.value}`}\r\n        checked={isSelected}\r\n        onChange={() => {}}\r\n        label={\r\n          <span style={{ fontWeight: isSelectAll ? 'bold' : 'normal' }}>\r\n            {data.label}\r\n          </span>\r\n        }\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction CustomValueContainer({ children, getValue, ...props }) {\r\n  const selected = getValue();\r\n  const totalOptions = props.selectProps.options.length - 1;\r\n  const count = selected.length;\r\n  const isAll = count > 0 && count === totalOptions;\r\n\r\n  const text = isAll\r\n    ? 'Todos Seleccionados'\r\n    : count > 0\r\n    ? selected.map((s) => s.label).join(', ')\r\n    : null;\r\n\r\n  return (\r\n    <components.ValueContainer {...props} getValue={getValue}>\r\n      {text ? (\r\n        <span style={{ color: '#333' }}>{text}</span>\r\n      ) : (\r\n        <span\r\n          style={{\r\n            color: count ? 'transparent' : '#999',\r\n            position: 'absolute',\r\n          }}\r\n        >\r\n          {props.selectProps.placeholder}\r\n        </span>\r\n      )}\r\n      {children[children.length - 1]}\r\n    </components.ValueContainer>\r\n  );\r\n}\r\n\r\nconst CUSTOM_COMPONENTS = {\r\n  Option: CheckboxOption,\r\n  ValueContainer: CustomValueContainer,\r\n};\r\n\r\nexport const CustomMultiSelect = ({\r\n  lista = [],\r\n  onListaUpdate = () => {},\r\n  value = [],\r\n  styles = {},\r\n}) => {\r\n  const [selected, setSelected] = useState(value);\r\n  const isInternalChange = useRef(false);\r\n\r\n  useEffect(() => {\r\n    if (isInternalChange.current) {\r\n      isInternalChange.current = false;\r\n      return;\r\n    }\r\n    setSelected(value);\r\n  }, [JSON.stringify(value)]); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n  const update = useCallback(\r\n    (newSelected) => {\r\n      isInternalChange.current = true;\r\n      setSelected(newSelected);\r\n      onListaUpdate(newSelected);\r\n    },\r\n    [onListaUpdate]\r\n  );\r\n\r\n  const handleOptionClick = useCallback(\r\n    (data) => {\r\n      setSelected((prev) => {\r\n        const isAlreadySelected = prev.some((s) => s.value === data.value);\r\n        const next = isAlreadySelected\r\n          ? prev.filter((s) => s.value !== data.value)\r\n          : [...prev, data];\r\n        isInternalChange.current = true;\r\n        onListaUpdate(next);\r\n        return next;\r\n      });\r\n    },\r\n    [onListaUpdate]\r\n  );\r\n\r\n  const handleSelectAll = useCallback(() => {\r\n    setSelected((prev) => {\r\n      const next = prev.length === lista.length ? [] : [...lista];\r\n      isInternalChange.current = true;\r\n      onListaUpdate(next);\r\n      return next;\r\n    });\r\n  }, [lista, onListaUpdate]);\r\n\r\n  const handleRemoveBadge = useCallback(\r\n    (valueToRemove) => {\r\n      update(selected.filter((item) => item.value !== valueToRemove));\r\n    },\r\n    [selected, update]\r\n  );\r\n\r\n  const allSelected = lista.length > 0 && selected.length === lista.length;\r\n  const optionsWithSelectAll = [SELECT_ALL_OPTION, ...lista];\r\n\r\n  const isOptionSelected = useCallback(\r\n    (option) =>\r\n      option.value === SELECT_ALL_VALUE\r\n        ? allSelected\r\n        : selected.some((s) => s.value === option.value),\r\n    [allSelected, selected]\r\n  );\r\n\r\n  return (\r\n    <Row className=\"align-items-center\">\r\n      <Col xs={6} style={styles}>\r\n        <Select\r\n          options={optionsWithSelectAll}\r\n          value={selected}\r\n          onChange={update}\r\n          isMulti\r\n          placeholder=\"Seleccione\"\r\n          noOptionsMessage={() => 'Sin opciones'}\r\n          className=\"custom-multiselect\"\r\n          classNamePrefix=\"custom-multiselect\"\r\n          components={CUSTOM_COMPONENTS}\r\n          closeMenuOnSelect={false}\r\n          hideSelectedOptions={false}\r\n          isSearchable={false}\r\n          onSelectAll={handleSelectAll}\r\n          onOptionClick={handleOptionClick}\r\n          isOptionSelected={isOptionSelected}\r\n        />\r\n      </Col>\r\n      <Col xs={6}>\r\n        {selected.length > 0 && (\r\n          <BadgeWrapper>\r\n            {allSelected ? (\r\n              <ClickableBadge color=\"info\" pill>\r\n                Todos\r\n              </ClickableBadge>\r\n            ) : (\r\n              <BadgeLabelMultiSelect\r\n                descripcionLabel={selected}\r\n                onRemove={handleRemoveBadge}\r\n              />\r\n            )}\r\n          </BadgeWrapper>\r\n        )}\r\n      </Col>\r\n    </Row>\r\n  );\r\n};\r\n\r\nexport default CustomMultiSelect;\r\n"],"names":[],"mappings":"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"}

package/dist/select/multi-select/styled-component.js

@@ -7,14 +7,13 @@ const ClickableBadge = styled(Badge)`
 `;
 const BadgeWrapper = styled.div`
   display: inline-flex;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   gap: 10px;
   padding: 0.5rem;
   border-radius: 0.5rem;
   background-color: #f1f1f1;
   border: 1px solid #ccc;
-  margin-top: 2.8rem;
-  max-width: 120%;
+  max-width: 100%;
   overflow-x: auto;
 `;
 export {

package/dist/select/multi-select/styled-component.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled-component.js","sources":["../../../src/select/multi-select/styled-component.js"],"sourcesContent":["import { Badge } from 'reactstrap';\r\nimport styled from 'styled-components';\r\n\r\nexport const ClickableBadge = styled(Badge)`\r\n  cursor: pointer;\r\n  width: fit-content;\r\n  white-space: nowrap;\r\n`;\r\n\r\nexport const BadgeWrapper = styled.div`\r\n  display: inline-flex;\r\n  flex-wrap: nowrap;\r\n  gap: 10px;\r\n  padding: 0.5rem;\r\n  border-radius: 0.5rem;\r\n  background-color: #f1f1f1;\r\n  border: 1px solid #ccc;\r\n  margin-top: 2.8rem;\r\n  max-width: 120%;\r\n  overflow-x: auto;\r\n`;\r\n"],"names":[],"mappings":";;AAGY,MAAC,iBAAiB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAM9B,MAAC,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"styled-component.js","sources":["../../../src/select/multi-select/styled-component.js"],"sourcesContent":["import { Badge } from 'reactstrap';\r\nimport styled from 'styled-components';\r\n\r\nexport const ClickableBadge = styled(Badge)`\r\n  cursor: pointer;\r\n  width: fit-content;\r\n  white-space: nowrap;\r\n`;\r\n\r\nexport const BadgeWrapper = styled.div`\r\n  display: inline-flex;\r\n  flex-wrap: wrap;\r\n  gap: 10px;\r\n  padding: 0.5rem;\r\n  border-radius: 0.5rem;\r\n  background-color: #f1f1f1;\r\n  border: 1px solid #ccc;\r\n  max-width: 100%;\r\n  overflow-x: auto;\r\n`;\r\n"],"names":[],"mappings":";;AAGY,MAAC,iBAAiB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAM9B,MAAC,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/tomar-foto/index.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { Row } from "reactstrap";
+import Row from "../node_modules/@neolution-ch/reactstrap/esm/Row.js";
 import { DropzoneUploader } from "../dropzone-uploader/base/index.js";
 import { Colxx } from "../CustomBootstrap.js";
 import imgHacerFoto from "../assets/img/take-photo.jpg.js";

package/dist/tomar-foto/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/tomar-foto/index.jsx"],"sourcesContent":["import { useState } from 'react';\r\nimport { Row } from 'reactstrap';\r\nimport { DropzoneUploader } from '../dropzone-uploader/base';\r\nimport { Colxx } from '../CustomBootstrap';\r\nimport imgHacerFoto from '../assets/img/take-photo.jpg';\r\nimport { TAKE_PHOTO } from '../constants';\r\n\r\nexport const TomarFoto = ({\r\n  onFilesSelectedSelfie = () => {},\r\n  isMobile = false,\r\n}) => {\r\n  const [filesTotalSelectedSelfie, setTotalFilesSelectedSelfie] = useState(0);\r\n  const {\r\n    LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE,\r\n    MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE,\r\n    TAKE_PHOTO_MESSAGE,\r\n  } = TAKE_PHOTO;\r\n\r\n  const handleFilesSelectedSelfie = (files) => {\r\n    setTotalFilesSelectedSelfie(files.length);\r\n    onFilesSelectedSelfie(files);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <Row className=\"pt-2 ml-4\">\r\n        <Colxx xxs=\"11\" md=\"5\">\r\n          {LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE}\r\n        </Colxx>\r\n      </Row>\r\n      <Row className=\"pt-2 ml-2\">\r\n        <Colxx xxs=\"12\" md=\"9\">\r\n          {isMobile ? (\r\n            <>\r\n              <Colxx xxs=\"12\" className=\"text-center\">\r\n                {filesTotalSelectedSelfie === 0 && (\r\n                  <img\r\n                    style={{ width: '97%' }}\r\n                    alt=\"hacerFotoDNI\"\r\n                    src={imgHacerFoto}\r\n                  />\r\n                )}\r\n                <DropzoneUploader\r\n                  className=\"pt-2 ml-2\"\r\n                  maxFiles={1}\r\n                  onChangeFiles={handleFilesSelectedSelfie}\r\n                  totalFiles={filesTotalSelectedSelfie}\r\n                  accept=\"image/jpg,image/jpeg\"\r\n                  capture=\"environment\"\r\n                  nameFileLabel={TAKE_PHOTO_MESSAGE}\r\n                />\r\n              </Colxx>\r\n            </>\r\n          ) : (\r\n            <h2\r\n              className={'view-icon iconsminds-smartphone-4 ml-2 mr-2'}\r\n              style={{\r\n                color: 'red',\r\n                margin: '10px 10px 0px 10px',\r\n              }}\r\n            >\r\n              {MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE}\r\n            </h2>\r\n          )}\r\n        </Colxx>\r\n      </Row>\r\n    </>\r\n  );\r\n};\r\n"],"names":[],"mappings":";;;;;;;AAOO,MAAM,YAAY,CAAC;AAAA,EACxB,wBAAwB,MAAM;AAAA,EAAC;AAAA,EAC/B,WAAW;AACb,MAAM;AACJ,QAAM,CAAC,0BAA0B,2BAA2B,IAAI,SAAS,CAAC;AAC1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,4BAA4B,CAAC,UAAU;AAC3C,gCAA4B,MAAM,MAAM;AACxC,0BAAsB,KAAK;AAAA,EAC7B;AAEA,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,KAAA,EAAI,WAAU,aACb,UAAA,oBAAC,OAAA,EAAM,KAAI,MAAK,IAAG,KAChB,UAAA,uCAAA,CACH,GACF;AAAA,wBACC,KAAA,EAAI,WAAU,aACb,UAAA,oBAAC,SAAM,KAAI,MAAK,IAAG,KAChB,qBACC,oBAAA,UAAA,EACE,UAAA,qBAAC,SAAM,KAAI,MAAK,WAAU,eACvB,UAAA;AAAA,MAAA,6BAA6B,KAC5B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,EAAE,OAAO,MAAA;AAAA,UAChB,KAAI;AAAA,UACJ,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAGT;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,UAAU;AAAA,UACV,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,eAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB,EAAA,CACF,GACF,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX,OAAO;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,QAGT,UAAA;AAAA,MAAA;AAAA,IAAA,GAGP,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../src/tomar-foto/index.jsx"],"sourcesContent":["import { useState } from 'react';\r\nimport { Row } from '@neolution-ch/reactstrap';\r\nimport { DropzoneUploader } from '../dropzone-uploader/base';\r\nimport { Colxx } from '../CustomBootstrap';\r\nimport imgHacerFoto from '../assets/img/take-photo.jpg';\r\nimport { TAKE_PHOTO } from '../constants';\r\n\r\nexport const TomarFoto = ({\r\n  onFilesSelectedSelfie = () => {},\r\n  isMobile = false,\r\n}) => {\r\n  const [filesTotalSelectedSelfie, setTotalFilesSelectedSelfie] = useState(0);\r\n  const {\r\n    LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE,\r\n    MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE,\r\n    TAKE_PHOTO_MESSAGE,\r\n  } = TAKE_PHOTO;\r\n\r\n  const handleFilesSelectedSelfie = (files) => {\r\n    setTotalFilesSelectedSelfie(files.length);\r\n    onFilesSelectedSelfie(files);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <Row className=\"pt-2 ml-4\">\r\n        <Colxx xxs=\"11\" md=\"5\">\r\n          {LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE}\r\n        </Colxx>\r\n      </Row>\r\n      <Row className=\"pt-2 ml-2\">\r\n        <Colxx xxs=\"12\" md=\"9\">\r\n          {isMobile ? (\r\n            <>\r\n              <Colxx xxs=\"12\" className=\"text-center\">\r\n                {filesTotalSelectedSelfie === 0 && (\r\n                  <img\r\n                    style={{ width: '97%' }}\r\n                    alt=\"hacerFotoDNI\"\r\n                    src={imgHacerFoto}\r\n                  />\r\n                )}\r\n                <DropzoneUploader\r\n                  className=\"pt-2 ml-2\"\r\n                  maxFiles={1}\r\n                  onChangeFiles={handleFilesSelectedSelfie}\r\n                  totalFiles={filesTotalSelectedSelfie}\r\n                  accept=\"image/jpg,image/jpeg\"\r\n                  capture=\"environment\"\r\n                  nameFileLabel={TAKE_PHOTO_MESSAGE}\r\n                />\r\n              </Colxx>\r\n            </>\r\n          ) : (\r\n            <h2\r\n              className={'view-icon iconsminds-smartphone-4 ml-2 mr-2'}\r\n              style={{\r\n                color: 'red',\r\n                margin: '10px 10px 0px 10px',\r\n              }}\r\n            >\r\n              {MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE}\r\n            </h2>\r\n          )}\r\n        </Colxx>\r\n      </Row>\r\n    </>\r\n  );\r\n};\r\n"],"names":[],"mappings":";;;;;;;AAOO,MAAM,YAAY,CAAC;AAAA,EACxB,wBAAwB,MAAM;AAAA,EAAC;AAAA,EAC/B,WAAW;AACb,MAAM;AACJ,QAAM,CAAC,0BAA0B,2BAA2B,IAAI,SAAS,CAAC;AAC1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,4BAA4B,CAAC,UAAU;AAC3C,gCAA4B,MAAM,MAAM;AACxC,0BAAsB,KAAK;AAAA,EAC7B;AAEA,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,KAAA,EAAI,WAAU,aACb,UAAA,oBAAC,OAAA,EAAM,KAAI,MAAK,IAAG,KAChB,UAAA,uCAAA,CACH,GACF;AAAA,wBACC,KAAA,EAAI,WAAU,aACb,UAAA,oBAAC,SAAM,KAAI,MAAK,IAAG,KAChB,qBACC,oBAAA,UAAA,EACE,UAAA,qBAAC,SAAM,KAAI,MAAK,WAAU,eACvB,UAAA;AAAA,MAAA,6BAA6B,KAC5B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,EAAE,OAAO,MAAA;AAAA,UAChB,KAAI;AAAA,UACJ,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAGT;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,UAAU;AAAA,UACV,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,eAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB,EAAA,CACF,GACF,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX,OAAO;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,QAGT,UAAA;AAAA,MAAA;AAAA,IAAA,GAGP,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/index.d.ts

@@ -272,7 +272,7 @@ declare module 'siam-ui-utils/where-by-room' {
 }
 
 declare module 'siam-ui-utils/CustomBootstrap' {
-  import { ColProps } from 'reactstrap';
+  import { ColProps } from '@neolution-ch/reactstrap';
 
   export interface ColxxProps extends ColProps {
     [key: string]: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "siam-ui-utils",
-  "version": "3.0.32",
+  "version": "3.1.1",
   "keywords": [
     "ampf-react",
     "ampf-utils",
@@ -86,23 +86,22 @@
     "publish-npm": "npm run build && npm publish"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
   "dependencies": {
+    "@neolution-ch/reactstrap": "^10.0.0",
     "@types/react-intl": "^3.0.0",
     "@whereby.com/browser-sdk": "^3.13.1",
+    "dropzone": "^6.0.0-beta.2",
     "events": "^3.3.0",
     "html5-file-selector": "^2.1.0",
     "invariant": "^2.2.4",
     "prop-types": "^15.8.1",
     "react-dropzone-component": "^3.2.0",
-    "react-intl": "^6.4.2",
-    "react-multi-select-component": "^4.3.4",
+    "react-intl": "^7.1.14",
     "react-notifications": "^1.7.4",
-    "react-select": "^5.8.0",
-    "react-tagsinput": "^3.20.3",
-    "reactstrap": "^9.2.2",
+    "react-select": "^5.10.2",
     "siam-utils": "^1.1.4",
     "styled-components": "^6.1.12"
   },
@@ -122,8 +121,8 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "sass-embedded": "^1.79.4",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.38.0",

package/dist/_virtual/react-dropzone.js

@@ -1,8 +0,0 @@
-import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
-import { __require as requireReactDropzone } from "../node_modules/react-dropzone-component/dist/react-dropzone.js";
-var reactDropzoneExports = requireReactDropzone();
-const DropzoneComponent = /* @__PURE__ */ getDefaultExportFromCjs(reactDropzoneExports);
-export {
-  DropzoneComponent as default
-};
-//# sourceMappingURL=react-dropzone.js.map

package/dist/_virtual/react-dropzone.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-dropzone.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/react-dropzone2.js

@@ -1,5 +0,0 @@
-var reactDropzone = { exports: {} };
-export {
-  reactDropzone as __module
-};
-//# sourceMappingURL=react-dropzone2.js.map

package/dist/_virtual/react-dropzone2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-dropzone2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}