siam-ui-utils 3.0.31 → 3.1.0

package/dist/react-notifications/notifications.css

@@ -0,0 +1,213 @@
+.notification-container {
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 999999;
+  width: 320px;
+  padding: 0px 15px;
+  max-height: calc(100% - 30px);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.notification-container-empty {
+  display: none;
+}
+
+.notification {
+  box-sizing: border-box;
+  padding: 15px 15px 15px 15px;
+  text-align: start;
+  border-radius: 2px;
+  cursor: pointer;
+  font-size: 1em;
+  line-height: 1.2em;
+  position: relative;
+  opacity: 0.9;
+  margin-top: 15px;
+}
+
+.notification .title {
+  font-size: 1em;
+  line-height: 1.2em;
+  font-weight: bold;
+  margin: 0 0 5px 0;
+}
+
+.notification:hover,
+.notification:focus {
+  opacity: 1;
+}
+
+.notification-enter {
+  visibility: hidden;
+  transform: translate3d(100%, 0, 0);
+}
+
+.notification-enter-active {
+  visibility: visible;
+  transform: translate3d(0, 0, 0);
+  transition: all 0.4s;
+}
+
+.notification-exit {
+  visibility: visible;
+  transform: translate3d(0, 0, 0);
+}
+
+.notification-exit-active {
+  visibility: hidden;
+  transform: translate3d(100%, 0, 0);
+  transition: all 0.4s;
+}
+
+.notification-primary {
+  color: #922c88;
+  background-color: #ffffff;
+  border: 1px solid #922c88;
+  opacity: 1;
+}
+
+.notification-primary .notification-message .title {
+  color: #922c88;
+}
+
+.notification-primary .notification-message .message {
+  color: #212529;
+}
+
+.notification-primary.filled {
+  color: #ffffff;
+  background-color: #922c88;
+}
+
+.notification-primary.filled .notification-message .title,
+.notification-primary.filled .notification-message .message {
+  color: #ffffff;
+}
+
+.notification-secondary {
+  color: #145388;
+  background-color: #ffffff;
+  border: 1px solid #145388;
+  opacity: 1;
+}
+
+.notification-secondary .notification-message .title {
+  color: #145388;
+}
+
+.notification-secondary .notification-message .message {
+  color: #6c757d;
+}
+
+.notification-secondary.filled {
+  color: #ffffff;
+  background-color: #145388;
+}
+
+.notification-secondary.filled .notification-message .title,
+.notification-secondary.filled .notification-message .message {
+  color: #ffffff;
+}
+
+.notification-info {
+  color: #17a2b8;
+  background-color: #ffffff;
+  border: 1px solid #17a2b8;
+  opacity: 1;
+}
+
+.notification-info .notification-message .title {
+  color: #17a2b8;
+}
+
+.notification-info .notification-message .message {
+  color: #6c757d;
+}
+
+.notification-info.filled {
+  color: #ffffff;
+  background-color: #17a2b8;
+}
+
+.notification-info.filled .notification-message .title,
+.notification-info.filled .notification-message .message {
+  color: #ffffff;
+}
+
+.notification-success {
+  color: #28a745;
+  background-color: #ffffff;
+  border: 1px solid #28a745;
+  opacity: 1;
+}
+
+.notification-success .notification-message .title {
+  color: #28a745;
+}
+
+.notification-success .notification-message .message {
+  color: #6c757d;
+}
+
+.notification-success.filled {
+  color: #ffffff;
+  background-color: #28a745;
+}
+
+.notification-success.filled .notification-message .title,
+.notification-success.filled .notification-message .message {
+  color: #ffffff;
+}
+
+.notification-warning {
+  color: #ffc107;
+  background-color: #ffffff;
+  border: 1px solid #ffc107;
+  opacity: 1;
+}
+
+.notification-warning .notification-message .title {
+  color: #ffc107;
+}
+
+.notification-warning .notification-message .message {
+  color: #6c757d;
+}
+
+.notification-warning.filled {
+  color: #ffffff;
+  background-color: #ffc107;
+}
+
+.notification-warning.filled .notification-message .title,
+.notification-warning.filled .notification-message .message {
+  color: #ffffff;
+}
+
+.notification-error {
+  color: #dc3545;
+  background-color: #ffffff;
+  border: 1px solid #dc3545;
+  opacity: 1;
+}
+
+.notification-error .notification-message .title {
+  color: #dc3545;
+}
+
+.notification-error .notification-message .message {
+  color: #6c757d;
+}
+
+.notification-error.filled {
+  color: #ffffff;
+  background-color: #dc3545;
+}
+
+.notification-error.filled .notification-message .title,
+.notification-error.filled .notification-message .message {
+  color: #ffffff;
+}

package/dist/select/custom-select/constants.js

@@ -0,0 +1,8 @@
+const LABELS = {
+  SIN_DATOS: "SIN DATOS",
+  SELECCIONE: "SELECCIONE..."
+};
+export {
+  LABELS
+};
+//# sourceMappingURL=constants.js.map

package/dist/select/custom-select/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../src/select/custom-select/constants.js"],"sourcesContent":["export const LABELS = {\r\n  SIN_DATOS: \"SIN DATOS\",\r\n  SELECCIONE: \"SELECCIONE...\",\r\n};\r\n"],"names":[],"mappings":"AAAY,MAAC,SAAS;AAAA,EACpB,WAAW;AAAA,EACX,YAAY;AACd;"}

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

@@ -0,0 +1,89 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import Select from "react-select";
+import Label from "../../node_modules/@neolution-ch/reactstrap/esm/Label.js";
+import { CustomSelectInput } from "../custom-select-input/index.js";
+import { LABELS } from "./constants.js";
+const { SIN_DATOS, SELECCIONE } = LABELS;
+const CustomSelect = (props) => {
+  const [firstElement] = useState(props.firstElement);
+  const [newItem] = useState(props.newItem);
+  const [selectedIoption, setIoption] = useState({});
+  const [customStylesOption] = useState(props.customStylesOption);
+  const [customStyles, setCustomStyles] = useState({});
+  useEffect(() => {
+    if (newItem) {
+      props.options.push(newItem);
+    }
+  }, [newItem, props.options]);
+  useEffect(() => {
+    const { options = [] } = props;
+    if (firstElement && Number(options?.length) > 1) {
+      const propIOption = options.filter((item) => item === firstElement);
+      if (propIOption?.length === 0) {
+        props.options.unshift(firstElement);
+      }
+    }
+  }, [firstElement, props.options]);
+  useEffect(() => {
+    const { selectedValue } = props;
+    const errorProp = { value: null };
+    if (selectedValue || firstElement && firstElement.value === selectedValue) {
+      const propIOption = props.options.filter(({ value }) => {
+        return JSON.stringify(value) === JSON.stringify(selectedValue);
+      });
+      if (propIOption[0]) {
+        setIoption(propIOption[0]);
+        if (!Object.getOwnPropertyDescriptor(selectedIoption, "label")) {
+          props.onChange(propIOption[0]);
+        }
+      } else {
+        setIoption(errorProp);
+        props.onChange(errorProp);
+      }
+    } else if (props.options.length > 0) {
+      setIoption(errorProp);
+      props.onChange(errorProp);
+    }
+  }, [props.selectedValue, props.options, firstElement]);
+  useEffect(() => {
+    if (customStylesOption) {
+      const stylesOption = {
+        option: (base, { data }) => {
+          return {
+            ...base,
+            color: data.fields && data.fields[customStylesOption.fieldMatch] === customStylesOption.valueMatch ? "blue !important" : "",
+            fontWeight: data.fields && data.fields[customStylesOption.fieldMatch] === customStylesOption.valueMatch ? "bold" : ""
+          };
+        }
+      };
+      setCustomStyles(stylesOption);
+    }
+  }, [customStylesOption]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    props.label && props.label !== "" && /* @__PURE__ */ jsxs(Label, { className: "mb-0", children: [
+      props.label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        ...props,
+        components: { Input: CustomSelectInput },
+        className: "react-select",
+        classNamePrefix: "react-select",
+        name: "form-field-name",
+        value: Object.getOwnPropertyDescriptor(selectedIoption, "label") ? selectedIoption : "",
+        onChange: props.onChange,
+        options: props.options,
+        placeholder: Number(props.options.length) === 0 ? SIN_DATOS : props.placeholder || SELECCIONE,
+        isDisabled: props.disabled,
+        styles: customStyles
+      }
+    )
+  ] });
+};
+export {
+  CustomSelect
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/select/custom-select/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\r\nimport Select from 'react-select';\r\nimport { Label } from '@neolution-ch/reactstrap';\r\nimport { CustomSelectInput } from '../custom-select-input';\r\nimport { LABELS } from './constants';\r\n\r\ninterface ICustomStylesOption {\r\n  fieldMatch: string;\r\n  valueMatch: any;\r\n}\r\ninterface IOption {\r\n  label: string;\r\n  value: any;\r\n  fields?: any;\r\n}\r\ninterface IOption {\r\n  label: string;\r\n  value: any;\r\n  fields?: any;\r\n}\r\ninterface Props {\r\n  label: string;\r\n  tabIndex: number;\r\n  options: [IOption];\r\n  onChange: any;\r\n  selectedValue: any;\r\n  firstElement?: IOption; // no ingresar null como VALUE del elemento, setear '' ya que lo toma como que no se selecciono nada\r\n  newItem?: IOption;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  customStylesOption?: ICustomStylesOption;\r\n}\r\n\r\nconst { SIN_DATOS, SELECCIONE } = LABELS;\r\n\r\nexport const CustomSelect: React.FC<Props> = (props: Props) => {\r\n  const [firstElement] = useState(props.firstElement);\r\n  const [newItem] = useState(props.newItem);\r\n  const [selectedIoption, setIoption] = useState({});\r\n  const [customStylesOption] = useState(props.customStylesOption);\r\n  const [customStyles, setCustomStyles] = useState({});\r\n\r\n  // agrega items\r\n  useEffect(() => {\r\n    if (newItem) {\r\n      props.options.push(newItem);\r\n    }\r\n  }, [newItem, props.options]);\r\n\r\n  // Seleccion del 1er item.\r\n  useEffect(() => {\r\n    const { options = [] } = props;\r\n    if (firstElement && Number(options?.length) > 1) {\r\n      const propIOption = options.filter((item) => item === firstElement);\r\n\r\n      if (propIOption?.length === 0) {\r\n        props.options.unshift(firstElement);\r\n      }\r\n    }\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [firstElement, props.options]);\r\n\r\n  // selecciona un valor seteado dentro de la coleccion\r\n  useEffect(() => {\r\n    const { selectedValue } = props;\r\n    const errorProp = { value: null };\r\n\r\n    if (\r\n      selectedValue ||\r\n      (firstElement && firstElement.value === selectedValue)\r\n    ) {\r\n      const propIOption = props.options.filter(({ value }) => {\r\n        return JSON.stringify(value) === JSON.stringify(selectedValue);\r\n      });\r\n\r\n      if (propIOption[0]) {\r\n        setIoption(propIOption[0]);\r\n        if (!Object.getOwnPropertyDescriptor(selectedIoption, 'label')) {\r\n          props.onChange(propIOption[0]);\r\n        }\r\n      } else {\r\n        setIoption(errorProp);\r\n        props.onChange(errorProp);\r\n      }\r\n    } else if (props.options.length > 0) {\r\n      setIoption(errorProp);\r\n      props.onChange(errorProp);\r\n    }\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [props.selectedValue, props.options, firstElement]);\r\n\r\n  useEffect(() => {\r\n    if (customStylesOption) {\r\n      const stylesOption = {\r\n        option: (base: any, { data }: any) => {\r\n          return {\r\n            ...base,\r\n            color:\r\n              data.fields &&\r\n              data.fields[customStylesOption.fieldMatch] ===\r\n                customStylesOption.valueMatch\r\n                ? 'blue !important'\r\n                : '',\r\n            fontWeight:\r\n              data.fields &&\r\n              data.fields[customStylesOption.fieldMatch] ===\r\n                customStylesOption.valueMatch\r\n                ? 'bold'\r\n                : '',\r\n          };\r\n        },\r\n      };\r\n      setCustomStyles(stylesOption);\r\n    }\r\n  }, [customStylesOption]);\r\n\r\n  return (\r\n    <>\r\n      {props.label && props.label !== '' && (\r\n        <Label className=\"mb-0\">{props.label}:</Label>\r\n      )}\r\n      <Select\r\n        {...props}\r\n        components={{ Input: CustomSelectInput }}\r\n        className=\"react-select\"\r\n        classNamePrefix=\"react-select\"\r\n        name=\"form-field-name\"\r\n        value={\r\n          Object.getOwnPropertyDescriptor(selectedIoption, 'label')\r\n            ? selectedIoption\r\n            : ''\r\n        }\r\n        onChange={props.onChange}\r\n        options={props.options}\r\n        placeholder={\r\n          Number(props.options.length) === 0\r\n            ? SIN_DATOS\r\n            : props.placeholder || SELECCIONE\r\n        }\r\n        isDisabled={props.disabled}\r\n        styles={customStyles}\r\n      />\r\n    </>\r\n  );\r\n};\r\n"],"names":[],"mappings":"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"}

package/dist/select/custom-select-input/index.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { components } from "react-select";
+const CustomSelectInput = (props) => {
+  const customProps = { ...props };
+  delete customProps.autoCorrect;
+  delete customProps.autoCapitalize;
+  return /* @__PURE__ */ jsx(components.Input, { ...customProps });
+};
+export {
+  CustomSelectInput
+};
+//# sourceMappingURL=index.js.map

package/dist/select/custom-select-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/select/custom-select-input/index.jsx"],"sourcesContent":["import { components } from 'react-select';\r\n\r\nexport const CustomSelectInput = (props) => {\r\n  const customProps = { ...props };\r\n  delete customProps.autoCorrect;\r\n  delete customProps.autoCapitalize;\r\n  return <components.Input {...customProps} />;\r\n};\r\n"],"names":[],"mappings":";;AAEO,MAAM,oBAAoB,CAAC,UAAU;AAC1C,QAAM,cAAc,EAAE,GAAG,MAAA;AACzB,SAAO,YAAY;AACnB,SAAO,YAAY;AACnB,SAAO,oBAAC,WAAW,OAAX,EAAkB,GAAG,YAAA,CAAa;AAC5C;"}

package/dist/select/index.js

@@ -0,0 +1,9 @@
+import { CustomSelect } from "./custom-select/index.js";
+import { CustomMultiSelect } from "./multi-select/index.js";
+import { CustomSelectInput } from "./custom-select-input/index.js";
+export {
+  CustomMultiSelect,
+  CustomSelect,
+  CustomSelectInput
+};
+//# sourceMappingURL=index.js.map

package/dist/select/index.js.map

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

package/dist/select/multi-select/badge-label-multi-select.js

@@ -0,0 +1,29 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { toCamelCase } from "siam-utils";
+import { ClickableBadge } from "./styled-component.js";
+const BadgeLabelMultiSelect = ({
+  descripcionLabel = [],
+  onRemove = () => {
+  }
+}) => {
+  const getBadgeColor = (value) => {
+    return value.color || "dark";
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: descripcionLabel.map((item) => /* @__PURE__ */ jsxs(
+    ClickableBadge,
+    {
+      color: getBadgeColor(item),
+      pill: true,
+      onClick: () => onRemove(item.value),
+      children: [
+        toCamelCase(item.label),
+        " ×"
+      ]
+    },
+    item.value
+  )) });
+};
+export {
+  BadgeLabelMultiSelect as default
+};
+//# sourceMappingURL=badge-label-multi-select.js.map

package/dist/select/multi-select/badge-label-multi-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-label-multi-select.js","sources":["../../../src/select/multi-select/badge-label-multi-select.jsx"],"sourcesContent":["import { toCamelCase } from 'siam-utils';\r\nimport { ClickableBadge } from './styled-component';\r\n\r\nconst BadgeLabelMultiSelect = ({\r\n  descripcionLabel = [],\r\n  onRemove = () => {},\r\n}) => {\r\n  const getBadgeColor = (value) => {\r\n    return value.color || 'dark';\r\n  };\r\n\r\n  return (\r\n    <>\r\n      {descripcionLabel.map((item) => (\r\n        <ClickableBadge\r\n          key={item.value}\r\n          color={getBadgeColor(item)}\r\n          pill\r\n          onClick={() => onRemove(item.value)}\r\n        >\r\n          {toCamelCase(item.label)} &times;\r\n        </ClickableBadge>\r\n      ))}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default BadgeLabelMultiSelect;\r\n"],"names":[],"mappings":";;;AAGA,MAAM,wBAAwB,CAAC;AAAA,EAC7B,mBAAmB,CAAA;AAAA,EACnB,WAAW,MAAM;AAAA,EAAC;AACpB,MAAM;AACJ,QAAM,gBAAgB,CAAC,UAAU;AAC/B,WAAO,MAAM,SAAS;AAAA,EACxB;AAEA,SACE,oBAAA,UAAA,EACG,UAAA,iBAAiB,IAAI,CAAC,SACrB;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,OAAO,cAAc,IAAI;AAAA,MACzB,MAAI;AAAA,MACJ,SAAS,MAAM,SAAS,KAAK,KAAK;AAAA,MAEjC,UAAA;AAAA,QAAA,YAAY,KAAK,KAAK;AAAA,QAAE;AAAA,MAAA;AAAA,IAAA;AAAA,IALpB,KAAK;AAAA,EAAA,CAOb,GACH;AAEJ;"}

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

@@ -0,0 +1,37 @@
+.multiselect-checkbox-option .custom-checkbox {
+  margin-bottom: 0;
+}
+.multiselect-checkbox-option .custom-checkbox input[type=checkbox] + label {
+  line-height: 1.2 !important;
+  display: flex;
+  align-items: center;
+  padding-left: 1.75rem;
+}
+.multiselect-checkbox-option .custom-checkbox input[type=checkbox] + label::before {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.multiselect-checkbox-option .custom-checkbox input[type=checkbox]:checked + label::after {
+  top: 50%;
+  transform: translateY(-65%) rotate(45deg);
+}
+
+.custom-multiselect__control {
+  min-height: 38px;
+  border-color: #ccc;
+}
+.custom-multiselect__control:hover {
+  border-color: #900604;
+}
+.custom-multiselect__control--is-focused {
+  border-color: #900604;
+  box-shadow: 0 0 0 1px #900604;
+}
+
+.dropdown-heading-value {
+  color: green;
+  height: 2rem;
+  display: inline;
+  font-weight: bold;
+  padding: 0.4rem;
+}

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

@@ -0,0 +1,171 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+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;
+  console.log("selected", selected, text);
+  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 = () => {
+  },
+  value = [],
+  styles = {}
+}) => {
+  const [selected, setSelected] = useState(value);
+  const isInternalChange = useRef(false);
+  useEffect(() => {
+    if (isInternalChange.current) {
+      isInternalChange.current = false;
+      return;
+    }
+    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(
+      Select,
+      {
+        options: optionsWithSelectAll,
+        value: selected,
+        onChange: update,
+        isMulti: true,
+        placeholder: "Seleccione",
+        noOptionsMessage: () => "Sin opciones",
+        className: "custom-multiselect",
+        classNamePrefix: "custom-multiselect",
+        components: CUSTOM_COMPONENTS,
+        closeMenuOnSelect: false,
+        hideSelectedOptions: false,
+        isSearchable: false,
+        onSelectAll: handleSelectAll,
+        onOptionClick: handleOptionClick,
+        isOptionSelected
+      }
+    ) }),
+    /* @__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,
+        onRemove: handleRemoveBadge
+      }
+    ) }) })
+  ] });
+};
+export {
+  CustomMultiSelect
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"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  console.log('selected', selected, text);\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

@@ -0,0 +1,23 @@
+import { Badge } from "reactstrap";
+import styled from "styled-components";
+const ClickableBadge = styled(Badge)`
+  cursor: pointer;
+  width: fit-content;
+  white-space: nowrap;
+`;
+const BadgeWrapper = styled.div`
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  background-color: #f1f1f1;
+  border: 1px solid #ccc;
+  max-width: 100%;
+  overflow-x: auto;
+`;
+export {
+  BadgeWrapper,
+  ClickableBadge
+};
+//# sourceMappingURL=styled-component.js.map

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

@@ -0,0 +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: 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;"}