nexaas-ui-components 1.0.15 → 1.0.18

package/dist/index.js

@@ -9,7 +9,7 @@ import { parse, format, set, startOfWeek, endOfWeek, startOfMonth, endOfMonth, s
 import { Switch, Popover, PopoverButton, PopoverPanel, Listbox, ListboxOptions, Combobox, ListboxOption } from '@headlessui/react';
 import { Float } from '@headlessui-float/react';
 import IntlCurrencyInputRaw from 'react-intl-currency-input';
-import _debounce from 'lodash/debounce';
+import * as lodashNamespace from 'lodash';
 import InputMask from 'react-input-mask';
 import * as ReactModalNamespace from 'react-modal';
 import { Tooltip } from 'react-tooltip';
@@ -19,36 +19,22 @@ import { useReactTable, getExpandedRowModel, getFacetedUniqueValues, getFacetedR
 import { rankItem } from '@tanstack/match-sorter-utils';
 
 // src/assets/spinner.tsx
-var SpinnerIcon = (props) => /* @__PURE__ */ jsxs(
+var SpinnerIcon = (props) => /* @__PURE__ */ jsx(
   "svg",
   {
-    width: 16,
-    height: 16,
-    viewBox: "0 0 24 24",
+    ...props,
+    width: `${props.width || 33}`,
+    height: `${props.height || 33}`,
+    viewBox: "0 0 33 33",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(
-        "circle",
-        {
-          className: "opacity-25",
-          cx: "12",
-          cy: "12",
-          r: "10",
-          stroke: "currentColor",
-          strokeWidth: "4"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          className: "opacity-75",
-          fill: "currentColor",
-          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-        }
-      )
-    ]
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M21.4671 32.1821C18.269 33.1951 14.8378 33.2061 11.6333 32.2137C8.42885 31.2213 5.6044 29.2729 3.53866 26.6297C1.47293 23.9866 0.264665 20.7751 0.0758752 17.4258C-0.112914 14.0765 0.726798 10.7495 2.48242 7.89096C4.23804 5.03242 6.82565 2.77896 9.89828 1.43272C12.9709 0.0864894 16.3817 -0.288163 19.6733 0.359002C22.9649 1.00617 25.98 2.64421 28.3142 5.0535C30.6485 7.46279 32.1903 10.5282 32.7331 13.8386L28.9102 14.4653C28.4953 11.9345 27.3165 9.59102 25.532 7.74911C23.7474 5.9072 21.4424 4.65491 18.926 4.16015C16.4095 3.66539 13.802 3.95181 11.4529 4.98101C9.10388 6.01021 7.12564 7.73299 5.78346 9.91835C4.44128 12.1037 3.79932 14.6472 3.94365 17.2077C4.08798 19.7683 5.01171 22.2235 6.59097 24.2442C8.17023 26.2649 10.3295 27.7544 12.7794 28.5132C15.2292 29.2719 17.8524 29.2634 20.2973 28.489L21.4671 32.1821Z",
+        fill: "#009EDB"
+      }
+    )
   }
 );
 var sizes = {
@@ -1840,6 +1826,9 @@ function InputMoney({
   );
 }
 InputMoney.displayName = "InputMoney";
+var lodash = lodashNamespace.default || lodashNamespace;
+var debounce = lodash.debounce;
+var debounce_default = debounce;
 function InputNumber({
   label,
   type,
@@ -1881,7 +1870,7 @@ function InputNumber({
     }
   };
   const updateCount = useMemo(() => {
-    return _debounce(() => {
+    return debounce_default(() => {
       save();
     }, 1e3);
   }, []);
@@ -2280,7 +2269,7 @@ var ModalDialog = ({
   description,
   children
 }) => {
-  const customStyles2 = {
+  const customStyles3 = {
     content: {
       top: "50%",
       left: "50%",
@@ -2311,7 +2300,7 @@ var ModalDialog = ({
         ariaHideApp: false,
         isOpen: open,
         onRequestClose: onClose,
-        style: customStyles2,
+        style: customStyles3,
         contentLabel: "Example Modal",
         children: /* @__PURE__ */ jsxs("div", { className: clsx7(sizes2[size]), children: [
           /* @__PURE__ */ jsxs("div", { className: "pb-2 border-b border-b-neutral-200 flex items-center justify-between", children: [
@@ -2507,7 +2496,7 @@ var SelectField = ({
   isClearable = false,
   onChange,
   required,
-  debounce = 0,
+  debounce: debounce2 = 0,
   filterOptions,
   optionsList,
   disabled,
@@ -2546,7 +2535,7 @@ var SelectField = ({
   const loadOptions = (inputValue2) => {
     setLoading(true);
     if (isSearchable && filterOptions) {
-      if (debounce && inputValue2.length >= debounce || !debounce) {
+      if (debounce2 && inputValue2.length >= debounce2 || !debounce2) {
         const result = filterOptions(inputValue2);
         setLoading(false);
         return result;
@@ -2605,7 +2594,7 @@ var SelectField = ({
           ) });
         };
         const LoadingMessage = (props) => {
-          if (!debounce || debounce && inputValue.length >= debounce) {
+          if (!debounce2 || debounce2 && inputValue.length >= debounce2) {
             return /* @__PURE__ */ jsxs(
               "div",
               {
@@ -2626,20 +2615,20 @@ var SelectField = ({
                 ]
               }
             );
-          } else if (debounce && inputValue.length < debounce) {
+          } else if (debounce2 && inputValue.length < debounce2) {
             return /* @__PURE__ */ jsxs("div", { className: "p-2 text-neutral-300", children: [
               "Digite ",
-              debounce,
+              debounce2,
               " ou mais caracteres para pesquisar"
             ] });
           }
         };
         const NoOptionsMessage = (props) => {
           var _a2;
-          if (props.selectProps.inputValue.length == 0 && debounce > 0 || debounce > 0 && props.selectProps.inputValue.length < debounce) {
+          if (props.selectProps.inputValue.length == 0 && debounce2 > 0 || debounce2 > 0 && props.selectProps.inputValue.length < debounce2) {
             return /* @__PURE__ */ jsxs("div", { className: "text-dangerous-500 text-sm", children: [
               "Digite ",
-              debounce,
+              debounce2,
               " ou mais caracteres para pesquisar"
             ] });
           } else if (props.selectProps.inputValue.length > 0 && ((_a2 = props == null ? void 0 : props.options) == null ? void 0 : _a2.length) == 0) {
@@ -2702,7 +2691,7 @@ var SelectField = ({
               onBlur: () => setIsFocused(false),
               loadingMessage: () => /* @__PURE__ */ jsx("div", { children: "Carregando" }),
               isLoading: loading,
-              defaultOptions: debounce > 0 ? false : optionsList ? options : true,
+              defaultOptions: debounce2 > 0 ? false : optionsList ? options : true,
               loadOptions,
               name: field.name,
               isClearable,
@@ -2764,6 +2753,393 @@ var SelectField = ({
 var ValueContainer = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(components.ValueContainer, { ...props, children });
 };
+
+// src/components/SelectFieldBip/SelectFieldBip.styles.tsx
+var customStyles2 = {
+  indicatorSeparator: (provided, props) => {
+    var _a;
+    return {
+      ...provided,
+      backgroundColor: props.hasValue && ((_a = provided == null ? void 0 : provided.selectProps) == null ? void 0 : _a.isSearchable) ? "var(--input)" : "transparent",
+      padding: "0px"
+    };
+  },
+  clearIndicator: (provided) => ({
+    ...provided,
+    color: "var(--label)",
+    ":hover": {
+      color: "var(--label)"
+    }
+  }),
+  dropdownIndicator: (provided, state) => {
+    var _a;
+    return {
+      ...provided,
+      color: "var(--paragraph)",
+      transform: ((_a = state == null ? void 0 : state.selectProps) == null ? void 0 : _a.menuIsOpen) ? "rotate(180deg)" : "rotate(0)",
+      ":hover": {
+        color: "var(--paragraph)"
+      }
+    };
+  },
+  input: (provided, state) => ({
+    ...provided,
+    paddingLeft: state.selectProps.hasIcon ? "34px" : "0px",
+    paddingTop: state.selectProps.hasLabel ? "10px" : "0px"
+  }),
+  menu: (provided) => ({
+    ...provided,
+    marginTop: "4px",
+    border: "1px solid var(--dark-blue-300)",
+    boxShadow: "none",
+    borderRadius: "8px",
+    background: "white",
+    zIndex: 60
+  }),
+  menuList: (provided) => ({
+    ...provided,
+    padding: "0px 8px"
+  }),
+  singleValue: (base, state) => ({
+    ...base,
+    paddingLeft: state.selectProps.hasIcon ? "34px" : "0px",
+    paddingTop: state.selectProps.hasLabel ? "10px" : "0",
+    color: state.data.value === "active" ? "#0EAF86" : "black",
+    display: "flex"
+  }),
+  placeholder: (provided, state) => ({
+    ...provided,
+    paddingLeft: state.selectProps.hasIcon ? "34px" : "0px"
+  }),
+  control: (provided, state) => ({
+    ...provided,
+    cursor: "pointer",
+    border: state.selectProps.hasError ? "1px solid var(--dangerous-700)" : state.menuIsOpen ? "1px solid var(--blue-700)" : "1px solid var(--dark-blue-300)",
+    boxShadow: "none",
+    outline: "none",
+    borderRadius: "0.5rem",
+    placeholder: " ",
+    height: "46px",
+    backgroundColor: state.isDisabled ? "var(--light-100)" : "white",
+    ":hover": {
+      border: state.selectProps.hasError ? "1px solid var(--dangerous-700)" : state.menuIsOpen ? "1px solid var(--blue-700)" : "1px solid var(--dark-blue-300)"
+    }
+  }),
+  multiValue: (provided) => ({
+    ...provided,
+    borderRadius: "20px",
+    backgroundColor: "var(--light-100)",
+    padding: "0px 8px"
+  }),
+  multiValueLabel: (provided) => ({
+    ...provided,
+    color: "var(--paragraph)"
+  }),
+  multiValueRemove: (provided) => ({
+    ...provided,
+    color: "var(--dark-blue-400)",
+    ":hover": {
+      color: "var(--dangerous-700)"
+    }
+  }),
+  option: (provided, state) => {
+    let color = state.isSelected ? "white" : (state == null ? void 0 : state.isDisabled) ? "var(--label)" : "var(--paragraph)";
+    return {
+      ...provided,
+      cursor: state.isDisabled ? "auto" : "pointer",
+      pointerEvents: state.isDisabled ? "none" : "",
+      borderRadius: "8px",
+      margin: "4px 0px",
+      padding: "10px 12px",
+      backgroundColor: state.isSelected ? "var(--blue-700)" : "white",
+      color,
+      fontWeight: state.isSelected ? 700 : 400,
+      "&:hover": {
+        backgroundColor: state.isSelected ? "var(--blue-700)" : "var(--light-200)"
+      },
+      "&:active": {
+        backgroundColor: "var(--blue-700)",
+        color: "white !important",
+        fontWeight: 700
+      },
+      "&:active i": {
+        color: "white !important",
+        fontWeight: 700
+      },
+      " i": {
+        color: "white !important"
+      }
+    };
+  },
+  container: (provided) => ({
+    ...provided,
+    border: "none",
+    outline: "none",
+    boxShadow: "none",
+    padding: "none",
+    margin: "none"
+  })
+};
+var SelectFieldBip = ({
+  name,
+  label,
+  error,
+  defaultValue,
+  control,
+  placeholder,
+  isSearchable = false,
+  required,
+  debounce: debounce2,
+  filterOptions,
+  disabled,
+  onChangeValue,
+  optionStyle,
+  valueStyle,
+  icon,
+  onErrorBip,
+  clearAfterSelect = true,
+  messages = {
+    searching: "Searching...",
+    debounce: `Type at least {debounce} characters`,
+    emptyMessage: "No options found",
+    loading: "Loading..."
+  }
+}) => {
+  var _a;
+  const { Option, SingleValue } = components;
+  const selectRef = useRef(null);
+  const [inputValue, setInputValue] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [cachedOptions, setCachedOptions] = useState([]);
+  const fetchOptions = async (value) => {
+    if (isSearchable && filterOptions) {
+      if (!debounce2 || debounce2 && value.length >= debounce2) {
+        setLoading(true);
+        const result = await filterOptions(value);
+        setCachedOptions(result);
+        setLoading(false);
+        return result;
+      }
+    }
+    return [];
+  };
+  const fieldValidation = useFieldErrorsStore((state) => state.field);
+  const fieldValidationMessages = [
+    (_a = fieldValidation[name]) == null ? void 0 : _a.message,
+    error == null ? void 0 : error.message
+  ];
+  const hasError = {
+    hasError: fieldValidationMessages.some((item) => item !== void 0)
+  };
+  const hasLabel = {
+    hasLabel: (label == null ? void 0 : label.length) > 0
+  };
+  const hasIcon = {
+    hasIcon: icon
+  };
+  const iconStyle = `z-[70] absolute bg-neutral-100 h-[44px] top-[1px] left-[1px] rounded-l-lg flex justify-center items-center w-[38px] text-[22px] ${hasError.hasError ? "text-dangerous-500" : "text-label"}`;
+  const debouncedFetchOptions = useMemo(() => {
+    return debounce_default((value, callback) => {
+      fetchOptions(value).then(callback);
+    }, 300);
+  }, [filterOptions]);
+  useEffect(() => {
+    return () => {
+      debouncedFetchOptions.cancel();
+    };
+  }, [debouncedFetchOptions]);
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      defaultValue,
+      render: ({ field }) => {
+        const CustomSingleValue = (props) => {
+          return /* @__PURE__ */ jsx(SingleValue, { ...props, children: valueStyle ? valueStyle(props == null ? void 0 : props.data) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            props.data.label,
+            " "
+          ] }) });
+        };
+        const IconOption = (props) => {
+          return /* @__PURE__ */ jsx(Option, { ...props, children: optionStyle ? optionStyle(props == null ? void 0 : props.data) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: /* @__PURE__ */ jsx("span", { className: clsx7("text-p-md focus:text-white"), children: props.data.label })
+            }
+          ) });
+        };
+        const LoadingMessage = (props) => {
+          if (!debounce2 || debounce2 && inputValue.length >= debounce2) {
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ...props.innerProps,
+                className: "flex items-center gap-[6px] p-2",
+                children: [
+                  /* @__PURE__ */ jsx(SpinnerIcon, { width: 16, height: 16, className: "animate-spin" }),
+                  messages.searching
+                ]
+              }
+            );
+          } else if (debounce2 && inputValue.length < debounce2) {
+            return /* @__PURE__ */ jsx("div", { className: "p-2 text-dark-blue-300", children: messages.debounce.replace("{debounce}", String(debounce2)) });
+          }
+        };
+        const NoOptionsMessage = (props) => {
+          var _a2;
+          if (inputValue.length == 0 && debounce2 > 0 || debounce2 > 0 && inputValue.length < debounce2) {
+            return /* @__PURE__ */ jsx("div", { className: "p-2 text-dark-blue-300", children: messages.debounce.replace("{debounce}", String(debounce2)) });
+          } else if (inputValue.length > 0 && ((_a2 = props == null ? void 0 : props.options) == null ? void 0 : _a2.length) == 0) {
+            return /* @__PURE__ */ jsx("div", { className: "p-2 text-dark-blue-300", children: messages.emptyMessage });
+          }
+        };
+        const DropdownIndicatorCustom = (props) => {
+          return null;
+        };
+        const handleKeyDown = async (event) => {
+          var _a2;
+          if (event.key === "Enter") {
+            event.preventDefault();
+            debouncedFetchOptions.cancel();
+            const fetchedOptions = await fetchOptions(event.target.value);
+            if ((fetchedOptions == null ? void 0 : fetchedOptions.length) > 0) {
+              onChange(fetchedOptions[0]);
+              setTimeout(() => {
+                var _a3, _b, _c;
+                setInputValue("");
+                (_a3 = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _a3.clearValue();
+                (_b = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _b.focus();
+                (_c = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _c.onMenuClose();
+                field.onChange(null);
+              }, 10);
+            } else {
+              onErrorBip((_a2 = event == null ? void 0 : event.target) == null ? void 0 : _a2.value);
+              selectRef.current.inputRef.select();
+              selectRef.current.onMenuClose();
+            }
+          }
+        };
+        const handleInputChange = (value, actionMeta) => {
+          if (actionMeta.action === "input-change") {
+            setInputValue(value);
+          }
+          return value;
+        };
+        const onChange = async (value, action) => {
+          var _a2, _b, _c, _d, _e;
+          if (onChangeValue) onChangeValue(value);
+          if ((action == null ? void 0 : action.action) === "select-option") {
+            if (clearAfterSelect) {
+              setInputValue("");
+              (_a2 = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _a2.clearValue();
+              (_b = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _b.onMenuClose();
+              (_c = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _c.focus();
+              field.onChange(null);
+            } else {
+              field.onChange(value);
+              setInputValue("");
+              (_d = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _d.onMenuClose();
+            }
+          }
+          if (action === "clear-value") {
+            setInputValue("");
+            setCachedOptions([]);
+            (_e = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _e.clearValue();
+            field.onChange(null);
+          }
+        };
+        const loadOptions = (value, callback) => {
+          debouncedFetchOptions(value, callback);
+        };
+        return /* @__PURE__ */ jsxs("div", { className: "relative", id: "multiselect", children: [
+          icon && /* @__PURE__ */ jsx("div", { className: iconStyle, children: icon }),
+          /* @__PURE__ */ jsx(
+            AsyncSelect,
+            {
+              onKeyDown: handleKeyDown,
+              ...field,
+              ...hasError,
+              ...hasLabel,
+              ...hasIcon,
+              ref: selectRef,
+              isDisabled: disabled,
+              onBlur: () => handleInputChange("", {
+                action: "input-change"
+              }),
+              loadingMessage: () => /* @__PURE__ */ jsx("div", { children: messages.loading }),
+              isLoading: loading,
+              loadOptions,
+              defaultOptions: false,
+              name: field.name,
+              isClearable: false,
+              styles: customStyles2,
+              placeholder: placeholder || " ",
+              isSearchable,
+              tabSelectsValue: true,
+              components: {
+                SingleValue: CustomSingleValue,
+                ValueContainer: ValueContainer2,
+                Option: IconOption,
+                LoadingIndicator: () => /* @__PURE__ */ jsx(Fragment, {}),
+                LoadingMessage,
+                NoOptionsMessage,
+                DropdownIndicator: DropdownIndicatorCustom
+              },
+              closeMenuOnSelect: false,
+              blurInputOnSelect: true,
+              hideSelectedOptions: false,
+              onChange,
+              inputValue,
+              onInputChange: handleInputChange
+            }
+          ),
+          inputValue !== "" && /* @__PURE__ */ jsx(
+            "i",
+            {
+              onClick: () => onChange(null, "clear-value"),
+              className: "uil uil-times text-[18px] absolute right-2 top-[11px] cursor-pointer text-label"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: clsx7(
+                "text-label text-sm left-2.5 cursor-pointer pointer-events-none",
+                {
+                  [" scale-75 -translate-y-3 "]: field.value,
+                  ["text-dangerous-700"]: hasError.hasError
+                }
+              ),
+              children: [
+                label,
+                required && label && /* @__PURE__ */ jsx("strong", { className: "text-dangerous-700", children: "\xA0*" })
+              ]
+            }
+          ),
+          fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "text-dangerous-700 text-xs mt-1 ml-[2px]",
+              role: "alert",
+              "aria-label": message,
+              children: message
+            },
+            index
+          ))
+        ] });
+      }
+    }
+  );
+};
+var ValueContainer2 = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(components.ValueContainer, { ...props, children });
+};
 var Radio = ({
   disabled,
   control,
@@ -3702,6 +4078,6 @@ function DataTable({
   ] });
 }
 
-export { Badge, Button, Calendar, Checkbox, DataTable, DataTablePagination, DatePickerInput, FilterCalendar, FilterOptions, Input, InputMoney, InputNumber, InputPercentage, Logo, MaskedInput, ModalDialog, PaginationSelect, Popover3 as Popover, Radio, RocketIcon, SelectField, SpinnerIcon, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Toggle, ValueContainer };
+export { Badge, Button, Calendar, Checkbox, DataTable, DataTablePagination, DatePickerInput, FilterCalendar, FilterOptions, Input, InputMoney, InputNumber, InputPercentage, Logo, MaskedInput, ModalDialog, PaginationSelect, Popover3 as Popover, Radio, RocketIcon, SelectField, SelectFieldBip, SpinnerIcon, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Toggle, ValueContainer };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map