nexaas-ui-components 1.0.17 → 1.0.18

package/dist/index.cjs

@@ -48,36 +48,22 @@ var ReactModalNamespace__namespace = /*#__PURE__*/_interopNamespace(ReactModalNa
 var AsyncSelect__default = /*#__PURE__*/_interopDefault(AsyncSelect);
 
 // src/assets/spinner.tsx
-var SpinnerIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+var SpinnerIcon = (props) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-        "circle",
-        {
-          className: "opacity-25",
-          cx: "12",
-          cy: "12",
-          r: "10",
-          stroke: "currentColor",
-          strokeWidth: "4"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = {
@@ -2312,7 +2298,7 @@ var ModalDialog = ({
   description,
   children
 }) => {
-  const customStyles2 = {
+  const customStyles3 = {
     content: {
       top: "50%",
       left: "50%",
@@ -2343,7 +2329,7 @@ var ModalDialog = ({
         ariaHideApp: false,
         isOpen: open,
         onRequestClose: onClose,
-        style: customStyles2,
+        style: customStyles3,
         contentLabel: "Example Modal",
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx7__default.default(sizes2[size]), children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-2 border-b border-b-neutral-200 flex items-center justify-between", children: [
@@ -2796,6 +2782,393 @@ var SelectField = ({
 var ValueContainer = ({ children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(reactSelect.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 } = reactSelect.components;
+  const selectRef = React2.useRef(null);
+  const [inputValue, setInputValue] = React2.useState("");
+  const [loading, setLoading] = React2.useState(false);
+  const [cachedOptions, setCachedOptions] = React2.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 = React2.useMemo(() => {
+    return debounce_default((value, callback) => {
+      fetchOptions(value).then(callback);
+    }, 300);
+  }, [filterOptions]);
+  React2.useEffect(() => {
+    return () => {
+      debouncedFetchOptions.cancel();
+    };
+  }, [debouncedFetchOptions]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      name,
+      control,
+      defaultValue,
+      render: ({ field }) => {
+        const CustomSingleValue = (props) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(SingleValue, { ...props, children: valueStyle ? valueStyle(props == null ? void 0 : props.data) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            props.data.label,
+            " "
+          ] }) });
+        };
+        const IconOption = (props) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(Option, { ...props, children: optionStyle ? optionStyle(props == null ? void 0 : props.data) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx7__default.default("text-p-md focus:text-white"), children: props.data.label })
+            }
+          ) });
+        };
+        const LoadingMessage = (props) => {
+          if (!debounce2 || debounce2 && inputValue.length >= debounce2) {
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                ...props.innerProps,
+                className: "flex items-center gap-[6px] p-2",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { width: 16, height: 16, className: "animate-spin" }),
+                  messages.searching
+                ]
+              }
+            );
+          } else if (debounce2 && inputValue.length < debounce2) {
+            return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative", id: "multiselect", children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: iconStyle, children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            AsyncSelect__default.default,
+            {
+              onKeyDown: handleKeyDown,
+              ...field,
+              ...hasError,
+              ...hasLabel,
+              ...hasIcon,
+              ref: selectRef,
+              isDisabled: disabled,
+              onBlur: () => handleInputChange("", {
+                action: "input-change"
+              }),
+              loadingMessage: () => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}),
+                LoadingMessage,
+                NoOptionsMessage,
+                DropdownIndicator: DropdownIndicatorCustom
+              },
+              closeMenuOnSelect: false,
+              blurInputOnSelect: true,
+              hideSelectedOptions: false,
+              onChange,
+              inputValue,
+              onInputChange: handleInputChange
+            }
+          ),
+          inputValue !== "" && /* @__PURE__ */ jsxRuntime.jsx(
+            "i",
+            {
+              onClick: () => onChange(null, "clear-value"),
+              className: "uil uil-times text-[18px] absolute right-2 top-[11px] cursor-pointer text-label"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: clsx7__default.default(
+                "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__ */ jsxRuntime.jsx("strong", { className: "text-dangerous-700", children: "\xA0*" })
+              ]
+            }
+          ),
+          fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(reactSelect.components.ValueContainer, { ...props, children });
+};
 var Radio = ({
   disabled,
   control,
@@ -3755,6 +4128,7 @@ exports.Popover = Popover3;
 exports.Radio = Radio;
 exports.RocketIcon = RocketIcon;
 exports.SelectField = SelectField;
+exports.SelectFieldBip = SelectFieldBip;
 exports.SpinnerIcon = SpinnerIcon;
 exports.Table = Table;
 exports.TableBody = TableBody;