siam-ui-utils 3.0.32 → 3.1.0

package/dist/react-notifications/Notifications.js

@@ -1,72 +1,72 @@
-import { jsx } from "react/jsx-runtime";
-import { Component, createRef } from "react";
-import PropTypes from "prop-types";
-import classnames from "../_virtual/index.js";
-import Notification from "./Notification.js";
-import TransitionGroup from "../node_modules/react-transition-group/esm/TransitionGroup.js";
-import CSSTransition from "../node_modules/react-transition-group/esm/CSSTransition.js";
-class Notifications extends Component {
-  constructor(props) {
-    super(props);
-    this.nodeRefs = {};
-  }
-  handleRequestHide = (notification) => () => {
-    const { onRequestHide } = this.props;
-    if (onRequestHide) {
-      onRequestHide(notification);
-    }
-  };
-  getNodeRef = (key) => {
-    if (!this.nodeRefs[key]) {
-      this.nodeRefs[key] = createRef();
-    }
-    return this.nodeRefs[key];
-  };
-  render() {
-    const {
-      notifications = [],
-      enterTimeout = 400,
-      leaveTimeout = 400
-    } = this.props;
-    const className = classnames("notification-container", {
-      "notification-container-empty": notifications.length === 0
-    });
-    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(TransitionGroup, { children: notifications.map((notification) => {
-      const key = notification.id || (/* @__PURE__ */ new Date()).getTime();
-      const nodeRef = this.getNodeRef(key);
-      return /* @__PURE__ */ jsx(
-        CSSTransition,
-        {
-          classNames: "notification",
-          timeout: { exit: leaveTimeout, enter: enterTimeout },
-          nodeRef,
-          children: /* @__PURE__ */ jsx(
-            Notification,
-            {
-              ref: nodeRef,
-              type: notification.type,
-              title: notification.title,
-              message: notification.message,
-              timeOut: notification.timeOut,
-              onClick: notification.onClick,
-              onRequestHide: this.handleRequestHide(notification),
-              customClassName: notification.customClassName
-            },
-            key
-          )
-        },
-        key
-      );
-    }) }) });
-  }
-}
-Notifications.propTypes = {
-  notifications: PropTypes.array,
-  onRequestHide: PropTypes.func,
-  enterTimeout: PropTypes.number,
-  leaveTimeout: PropTypes.number
-};
-export {
-  Notifications as default
-};
-//# sourceMappingURL=Notifications.js.map
+import { jsx } from "react/jsx-runtime";
+import { Component, createRef } from "react";
+import PropTypes from "prop-types";
+import classnames from "../_virtual/index.js";
+import Notification from "./Notification.js";
+import TransitionGroup from "../node_modules/react-transition-group/esm/TransitionGroup.js";
+import CSSTransition from "../node_modules/react-transition-group/esm/CSSTransition.js";
+class Notifications extends Component {
+  constructor(props) {
+    super(props);
+    this.nodeRefs = {};
+  }
+  handleRequestHide = (notification) => () => {
+    const { onRequestHide } = this.props;
+    if (onRequestHide) {
+      onRequestHide(notification);
+    }
+  };
+  getNodeRef = (key) => {
+    if (!this.nodeRefs[key]) {
+      this.nodeRefs[key] = createRef();
+    }
+    return this.nodeRefs[key];
+  };
+  render() {
+    const {
+      notifications = [],
+      enterTimeout = 400,
+      leaveTimeout = 400
+    } = this.props;
+    const className = classnames("notification-container", {
+      "notification-container-empty": notifications.length === 0
+    });
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(TransitionGroup, { children: notifications.map((notification) => {
+      const key = notification.id || (/* @__PURE__ */ new Date()).getTime();
+      const nodeRef = this.getNodeRef(key);
+      return /* @__PURE__ */ jsx(
+        CSSTransition,
+        {
+          classNames: "notification",
+          timeout: { exit: leaveTimeout, enter: enterTimeout },
+          nodeRef,
+          children: /* @__PURE__ */ jsx(
+            Notification,
+            {
+              ref: nodeRef,
+              type: notification.type,
+              title: notification.title,
+              message: notification.message,
+              timeOut: notification.timeOut,
+              onClick: notification.onClick,
+              onRequestHide: this.handleRequestHide(notification),
+              customClassName: notification.customClassName
+            },
+            key
+          )
+        },
+        key
+      );
+    }) }) });
+  }
+}
+Notifications.propTypes = {
+  notifications: PropTypes.array,
+  onRequestHide: PropTypes.func,
+  enterTimeout: PropTypes.number,
+  leaveTimeout: PropTypes.number
+};
+export {
+  Notifications as default
+};
+//# sourceMappingURL=Notifications.js.map

package/dist/react-notifications/constants.js

@@ -1,26 +1,26 @@
-const TYPES = {
-  CHANGE: "change",
-  ERROR: "error",
-  INFO: "info",
-  PRIMARY: "primary",
-  SECONDARY: "secondary",
-  SUCCESS: "success",
-  WARNING: "warning"
-};
-const TITLES = {
-  AVISO: "AVISO",
-  ERROR: "ERROR",
-  EXITO: "EXITO",
-  INFORMACION: "INFORMACION",
-  PRIMARIO: "PRIMARIO",
-  SECUNDARIO: "SECUNDARIO"
-};
-const DEFAULT_VALUES = {
-  TIMEOUT: 5e3
-};
-export {
-  DEFAULT_VALUES,
-  TITLES,
-  TYPES
-};
-//# sourceMappingURL=constants.js.map
+const TYPES = {
+  CHANGE: "change",
+  ERROR: "error",
+  INFO: "info",
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  SUCCESS: "success",
+  WARNING: "warning"
+};
+const TITLES = {
+  AVISO: "AVISO",
+  ERROR: "ERROR",
+  EXITO: "EXITO",
+  INFORMACION: "INFORMACION",
+  PRIMARIO: "PRIMARIO",
+  SECUNDARIO: "SECUNDARIO"
+};
+const DEFAULT_VALUES = {
+  TIMEOUT: 5e3
+};
+export {
+  DEFAULT_VALUES,
+  TITLES,
+  TYPES
+};
+//# sourceMappingURL=constants.js.map

package/dist/react-notifications/index.js

@@ -1,11 +1,11 @@
-import "./notifications.css";
-import Notifications from "./Notifications.js";
-import { default as default2 } from "./NotificationContainer.js";
-import { default as default3 } from "./NotificationManager.js";
-export {
-  default2 as NotificationContainer,
-  default3 as NotificationManager,
-  Notifications,
-  Notifications as default
-};
-//# sourceMappingURL=index.js.map
+import "./notifications.css";
+import Notifications from "./Notifications.js";
+import { default as default2 } from "./NotificationContainer.js";
+import { default as default3 } from "./NotificationManager.js";
+export {
+  default2 as NotificationContainer,
+  default3 as NotificationManager,
+  Notifications,
+  Notifications as default
+};
+//# sourceMappingURL=index.js.map

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

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

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

@@ -1,90 +1,89 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import Select from "react-select";
-import { Label } from "reactstrap";
-import { CustomSelectInput } from "../custom-select-input/index.js";
-import { LABELS } from "./constants.js";
-import "react-tagsinput/react-tagsinput.css";
-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
+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

@@ -1 +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 'reactstrap';\r\nimport { CustomSelectInput } from '../custom-select-input';\r\nimport { LABELS } from './constants';\r\nimport 'react-tagsinput/react-tagsinput.css';\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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"}
+{"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

@@ -1,12 +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
+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/index.js

@@ -1,9 +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
+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/multi-select/badge-label-multi-select.js

@@ -1,29 +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
+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/index.css

@@ -1,24 +1,37 @@
-.rmsc input[type=checkbox] {
-  accent-color: #900604;
-}
-
-.rmsc .item:hover {
-  background-color: #f8e1e1;
-}
-
-.rmsc input[type=checkbox]:focus {
-  outline: 2px solid #900604;
-  outline-offset: 2px;
-}
-
-.custom-multiselect .dropdown-container {
-  min-height: 38px;
-}
-
-.dropdown-heading-value {
-  color: green;
-  height: 2rem;
-  display: inline;
-  font-weight: bold;
-  padding: 0.4rem;
+.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;
 }