contentoh-components-library 21.6.25 → 21.6.26

package/dist/index.js

@@ -862,7 +862,7 @@ Object.keys(_index65).forEach(function (key) {
   });
 });
 
-var _index66 = require("./components/molecules/ButtonDownloadFile/index");
+var _index66 = require("./components/molecules/SingleSelect/index");
 
 Object.keys(_index66).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -875,7 +875,7 @@ Object.keys(_index66).forEach(function (key) {
   });
 });
 
-var _index67 = require("./components/molecules/ImageTooltip/index");
+var _index67 = require("./components/molecules/ButtonDownloadFile/index");
 
 Object.keys(_index67).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -888,7 +888,7 @@ Object.keys(_index67).forEach(function (key) {
   });
 });
 
-var _index68 = require("./components/molecules/SelectV2/index");
+var _index68 = require("./components/molecules/ImageTooltip/index");
 
 Object.keys(_index68).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -901,7 +901,7 @@ Object.keys(_index68).forEach(function (key) {
   });
 });
 
-var _index69 = require("./components/molecules/Dropdown/index");
+var _index69 = require("./components/molecules/SelectV2/index");
 
 Object.keys(_index69).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -914,7 +914,7 @@ Object.keys(_index69).forEach(function (key) {
   });
 });
 
-var _index70 = require("./components/molecules/StripeCardForm/index");
+var _index70 = require("./components/molecules/Dropdown/index");
 
 Object.keys(_index70).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -927,7 +927,7 @@ Object.keys(_index70).forEach(function (key) {
   });
 });
 
-var _index71 = require("./components/molecules/StripeCardSelector/index");
+var _index71 = require("./components/molecules/StripeCardForm/index");
 
 Object.keys(_index71).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -940,7 +940,7 @@ Object.keys(_index71).forEach(function (key) {
   });
 });
 
-var _index72 = require("./components/molecules/GridItem/index");
+var _index72 = require("./components/molecules/StripeCardSelector/index");
 
 Object.keys(_index72).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -953,7 +953,7 @@ Object.keys(_index72).forEach(function (key) {
   });
 });
 
-var _index73 = require("./components/molecules/HeaderItem/index");
+var _index73 = require("./components/molecules/GridItem/index");
 
 Object.keys(_index73).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -966,7 +966,7 @@ Object.keys(_index73).forEach(function (key) {
   });
 });
 
-var _index74 = require("./components/molecules/RowItem/index");
+var _index74 = require("./components/molecules/HeaderItem/index");
 
 Object.keys(_index74).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -979,7 +979,7 @@ Object.keys(_index74).forEach(function (key) {
   });
 });
 
-var _index75 = require("./components/organisms/ChangePassword/index");
+var _index75 = require("./components/molecules/RowItem/index");
 
 Object.keys(_index75).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -992,7 +992,7 @@ Object.keys(_index75).forEach(function (key) {
   });
 });
 
-var _index76 = require("./components/organisms/Fullplan/index");
+var _index76 = require("./components/organisms/ChangePassword/index");
 
 Object.keys(_index76).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1005,7 +1005,7 @@ Object.keys(_index76).forEach(function (key) {
   });
 });
 
-var _index77 = require("./components/organisms/FullProductNameHeader/index");
+var _index77 = require("./components/organisms/Fullplan/index");
 
 Object.keys(_index77).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1018,7 +1018,7 @@ Object.keys(_index77).forEach(function (key) {
   });
 });
 
-var _index78 = require("./components/organisms/FullTabsMenu/index");
+var _index78 = require("./components/organisms/FullProductNameHeader/index");
 
 Object.keys(_index78).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1031,7 +1031,7 @@ Object.keys(_index78).forEach(function (key) {
   });
 });
 
-var _index79 = require("./components/organisms/ImageDataTable/index");
+var _index79 = require("./components/organisms/FullTabsMenu/index");
 
 Object.keys(_index79).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1044,7 +1044,7 @@ Object.keys(_index79).forEach(function (key) {
   });
 });
 
-var _index80 = require("./components/organisms/ImagePreviewer/index");
+var _index80 = require("./components/organisms/ImageDataTable/index");
 
 Object.keys(_index80).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1057,7 +1057,7 @@ Object.keys(_index80).forEach(function (key) {
   });
 });
 
-var _index81 = require("./components/organisms/ImagesGroup/index");
+var _index81 = require("./components/organisms/ImagePreviewer/index");
 
 Object.keys(_index81).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1070,7 +1070,7 @@ Object.keys(_index81).forEach(function (key) {
   });
 });
 
-var _index82 = require("./components/organisms/InputGroup/index");
+var _index82 = require("./components/organisms/ImagesGroup/index");
 
 Object.keys(_index82).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1083,7 +1083,7 @@ Object.keys(_index82).forEach(function (key) {
   });
 });
 
-var _index83 = require("./components/organisms/LinkVariantsModal/index");
+var _index83 = require("./components/organisms/InputGroup/index");
 
 Object.keys(_index83).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1096,7 +1096,7 @@ Object.keys(_index83).forEach(function (key) {
   });
 });
 
-var _index84 = require("./components/organisms/ProductImageModal/index");
+var _index84 = require("./components/organisms/LinkVariantsModal/index");
 
 Object.keys(_index84).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1109,7 +1109,7 @@ Object.keys(_index84).forEach(function (key) {
   });
 });
 
-var _index85 = require("./components/organisms/Chat/index");
+var _index85 = require("./components/organisms/ProductImageModal/index");
 
 Object.keys(_index85).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1122,7 +1122,7 @@ Object.keys(_index85).forEach(function (key) {
   });
 });
 
-var _index86 = require("./components/organisms/Modal/index");
+var _index86 = require("./components/organisms/Chat/index");
 
 Object.keys(_index86).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1135,7 +1135,7 @@ Object.keys(_index86).forEach(function (key) {
   });
 });
 
-var _index87 = require("./components/organisms/OrderDetail/index");
+var _index87 = require("./components/organisms/Modal/index");
 
 Object.keys(_index87).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1148,6 +1148,19 @@ Object.keys(_index87).forEach(function (key) {
   });
 });
 
+var _index88 = require("./components/organisms/OrderDetail/index");
+
+Object.keys(_index88).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index88[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index88[key];
+    }
+  });
+});
+
 var _RangeCalendar = require("./components/organisms/RangeCalendar");
 
 Object.keys(_RangeCalendar).forEach(function (key) {
@@ -1174,28 +1187,28 @@ Object.keys(_TableResizable).forEach(function (key) {
   });
 });
 
-var _index88 = require("./components/organisms/SideModal/index");
+var _index89 = require("./components/organisms/SideModal/index");
 
-Object.keys(_index88).forEach(function (key) {
+Object.keys(_index89).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _index88[key]) return;
+  if (key in exports && exports[key] === _index89[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _index88[key];
+      return _index89[key];
     }
   });
 });
 
-var _index89 = require("./components/organisms/GridProducts/index");
+var _index90 = require("./components/organisms/GridProducts/index");
 
-Object.keys(_index89).forEach(function (key) {
+Object.keys(_index90).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _index89[key]) return;
+  if (key in exports && exports[key] === _index90[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _index89[key];
+      return _index90[key];
     }
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.6.25",
+  "version": "21.6.26",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/molecules/SingleSelect/index.js

@@ -0,0 +1,183 @@
+import { useRef, useState, useEffect } from "react";
+import {
+  SelectWrapper,
+  SelectBase,
+  Arrow,
+  Options,
+  OptionItem,
+  SelectedOptionItem,
+} from "./styles";
+
+/*
+  Select de opción única con búsqueda escribiendo.
+
+  Es el CustomSelect que la aplicación usa en el alta de productos, traído a la
+  librería para que las pantallas que viven aquí no tengan que caer en el <select>
+  del sistema, que se ve ajeno al resto de la plataforma.
+
+  Se llama distinto porque la librería ya exporta un `CustomSelect`: aquel es un
+  filtro de selección múltiple con calendario, otra cosa. Compartir nombre habría
+  roto el export global.
+
+  Tres cambios respecto al original, todos porque aquí el entorno es otro:
+  el ancho es flexible en vez de 210px fijos —en el modal van tres en fila—, los
+  colores salen de las variables de la librería en lugar de `var(--gray)`, y la
+  flecha va dibujada porque la fuente de iconos de Material la carga la
+  aplicación, no esta librería.
+
+  props:
+    - options: [{ label, value }]
+    - value: el value seleccionado
+    - onChange: recibe el value elegido, o null al limpiar
+    - placeholder, disabled, loading
+*/
+export const SingleSelect = ({
+  id,
+  className,
+  placeholder = "Selecciona una opción",
+  options = [],
+  onChange,
+  loading = false,
+  value = "",
+  disabled = false,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedValue, setSelectedValue] = useState(value);
+  const [inputValue, setInputValue] = useState("");
+
+  const wrapperRef = useRef(null);
+  const inputRef = useRef(null);
+
+  const selectedOption = options.find(
+    (option) => `${option?.value}` === `${selectedValue}`
+  );
+
+  const filteredOptions = loading
+    ? []
+    : options.filter((option) =>
+        (option?.label ?? "").toLowerCase().includes(inputValue.toLowerCase())
+      );
+
+  const handleSelect = (option) => {
+    setSelectedValue(option?.value);
+    setInputValue("");
+    onChange?.(option?.value);
+    setIsOpen(false);
+  };
+
+  const clearSelected = () => {
+    setSelectedValue("");
+    setInputValue("");
+    onChange?.(null);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  // Al deshabilitarse se limpia: un nivel de cascada que se apaga no puede
+  // quedarse mostrando la elección anterior, que ya no significa nada.
+  useEffect(() => {
+    if (disabled) {
+      setSelectedValue("");
+      setInputValue("");
+    }
+  }, [disabled]);
+
+  useEffect(() => {
+    setSelectedValue(value);
+  }, [value]);
+
+  return (
+    <SelectWrapper id={id} className={className} ref={wrapperRef}>
+      <SelectBase
+        disabled={disabled}
+        className="selectBase"
+        onClick={() => {
+          if (!disabled && !isOpen) setIsOpen(true);
+        }}
+      >
+        <div>
+          {selectedOption ? (
+            <SelectedOptionItem title={selectedOption?.label}>
+              <p>{selectedOption?.label}</p>
+            </SelectedOptionItem>
+          ) : null}
+
+          <input
+            type="text"
+            placeholder={selectedOption ? "" : placeholder}
+            value={inputValue}
+            disabled={disabled}
+            ref={inputRef}
+            onChange={(event) => setInputValue(event.target.value)}
+            onFocus={() => {
+              if (!isOpen) setIsOpen(true);
+            }}
+            onKeyDown={(event) => {
+              const esBorrar = event.key === "Backspace";
+              const vacio = (inputRef.current?.value || "") === "";
+
+              if (!isOpen) setIsOpen(true);
+
+              // Borrar con el campo vacío deshace la elección, que es lo que
+              // espera quien escribe para cambiarla.
+              if (esBorrar && vacio && selectedValue !== "") clearSelected();
+
+              if (event.key === "Enter" && filteredOptions.length > 0) {
+                event.preventDefault();
+                handleSelect(filteredOptions[0]);
+              }
+            }}
+            onBlur={() => {
+              setTimeout(() => {
+                if (
+                  wrapperRef.current &&
+                  !wrapperRef.current.contains(document.activeElement)
+                ) {
+                  setIsOpen(false);
+                }
+              }, 0);
+            }}
+          />
+        </div>
+
+        <Arrow aria-hidden="true">▼</Arrow>
+      </SelectBase>
+
+      <Options open={isOpen} data-testid="options">
+        {filteredOptions.length > 0 ? (
+          filteredOptions.map((option) => (
+            <OptionItem
+              key={option?.value}
+              selected={`${option?.value}` === `${selectedValue}`}
+              onClick={() => handleSelect(option)}
+              className={
+                inputValue.trim() !== "" && option === filteredOptions[0]
+                  ? "first"
+                  : ""
+              }
+              tabIndex={-1}
+            >
+              {option?.label}
+            </OptionItem>
+          ))
+        ) : (
+          <OptionItem
+            disabled
+            style={{ pointerEvents: "none", opacity: 0.5 }}
+          >
+            {loading ? "Cargando…" : "No se encontraron elementos"}
+          </OptionItem>
+        )}
+      </Options>
+    </SelectWrapper>
+  );
+};

package/src/components/molecules/SingleSelect/styles.js

@@ -0,0 +1,132 @@
+import styled from "styled-components";
+import "../../../global-files/global-styles.css";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+const PINK = "#E13AA8";
+
+export const SelectWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1 1 0;
+  min-width: 0;
+  font-family: ${FontFamily.Raleway};
+  font-size: 13px;
+  user-select: none;
+  box-sizing: border-box;
+`;
+
+export const SelectBase = styled.div`
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  border-radius: 5px 5px 0 0;
+  border-bottom: 1px solid rgba(225, 58, 168, 0.5);
+  color: ${GlobalColors.deep_gray};
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  white-space: nowrap;
+  overflow-x: hidden;
+  padding: 0;
+
+  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  pointer-events: ${({ disabled }) => (disabled ? "none" : "auto")};
+
+  > div {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  > div > input {
+    width: 100%;
+    min-width: 0;
+    border: none;
+    outline: none;
+    padding: 9px 22px 9px 10px;
+    border-radius: 5px 5px 0 0;
+    font-family: ${FontFamily.Raleway};
+    font-size: 13px;
+    color: ${GlobalColors.deep_gray};
+    background: none;
+  }
+
+  > div > input::placeholder {
+    color: ${GlobalColors.gray};
+  }
+`;
+
+export const SelectedOptionItem = styled.div`
+  position: relative;
+  max-width: 60%;
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+  padding: 5px 8px;
+  background-color: rgba(225, 58, 168, 0.06);
+  color: ${GlobalColors.gray};
+  font-size: 12px;
+
+  > p {
+    width: 100%;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
+/*
+  Flecha dibujada, no un icono de fuente. El componente original usaba
+  material-symbols-outlined, que la aplicación carga y esta librería no: aquí
+  habría salido la palabra "arrow_drop_down" escrita donde debería ir el triángulo.
+*/
+export const Arrow = styled.span`
+  position: absolute;
+  right: 6px;
+  pointer-events: none;
+  color: ${PINK};
+  font-size: 10px;
+  line-height: 1;
+`;
+
+export const Options = styled.ul`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  max-height: 180px;
+  overflow-y: auto;
+  background-color: ${GlobalColors.white};
+  border-radius: 8px;
+  border: 1px solid ${GlobalColors.s2};
+  box-shadow: 0 4px 8px rgb(0 0 0 / 18%);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: ${({ open }) => (open ? "block" : "none")};
+  z-index: 1000;
+`;
+
+export const OptionItem = styled.li`
+  padding: 9px 12px;
+  cursor: pointer;
+  font-size: 12px;
+  white-space: normal;
+  background-color: ${({ selected }) => (selected ? PINK : GlobalColors.white)};
+  color: ${({ selected }) => (selected ? GlobalColors.white : GlobalColors.gray)};
+
+  &.first {
+    background-color: ${({ selected }) =>
+      selected ? PINK : "rgba(225, 58, 168, 0.1)"};
+  }
+
+  &:hover {
+    background-color: ${({ selected }) =>
+      selected ? PINK : "rgba(225, 58, 168, 0.06)"};
+  }
+`;