master-components-react-ts 1.0.11 → 1.0.12

package/dist/master-components-react-ts.es7.js

@@ -1,336 +0,0 @@
-import { j as jsxRuntimeExports } from "./master-components-react-ts.es17.js";
-import { useState, useRef, useEffect } from "react";
-import style from "./master-components-react-ts.es30.js";
-import FormInput from "./master-components-react-ts.es3.js";
-import Checkbox from "./master-components-react-ts.es6.js";
-import { _filterUnique } from "./master-components-react-ts.es31.js";
-import { IconClose } from "./master-components-react-ts.es32.js";
-import { IconArrowUp } from "./master-components-react-ts.es33.js";
-import { IconCloseCircle } from "./master-components-react-ts.es22.js";
-const Dropdown = ({
-  data,
-  withFilter = true,
-  withClose = true,
-  disableAll = false,
-  withMultiselect = false,
-  selectedOptionID,
-  withInput = false,
-  dropdownType = "country",
-  onSelect,
-  onFocus,
-  onBlur,
-  onValueChange,
-  customInputSlot,
-  dropdownWrapperStyle,
-  dropdownInputWrapperStyle,
-  dropdownInputSlotStyle,
-  dropdownInputSlotItemStyle,
-  dropdownInputSlotItemLabelStyle,
-  dropdownInputSlotItemCloseStyle,
-  dropdownInputSlotItemMoreStyle,
-  dropdownItemStyle,
-  dropdownItemLabelStyle,
-  itemCheckboxStyle,
-  dropdownItemLabelTextStyle,
-  dropdownListStyle,
-  ...rest
-}) => {
-  const [Flag, setFlag] = useState(false);
-  const [InputValue, setInputValue] = useState("");
-  const [SelectAllKey, setSelectAllKey] = useState(false);
-  const [ClickedSelectAll, setClickedSelectAll] = useState(false);
-  const [IsFocused, setIsFocused] = useState(false);
-  const DropdownRef = useRef(null);
-  const ComponentRef = useRef(null);
-  const ListRef = useRef(null);
-  const ListItemRef = useRef(null);
-  const [Data, setData] = useState([]);
-  const SelectedData = useRef([]);
-  const SelectedDataLength = useRef(0);
-  const [SearchValue, setSearchValue] = useState("");
-  const [SingleSelectValue, setSingleSelectValue] = useState(null);
-  const getFlagIconUrl = (code) => {
-    return `https://flagsapi.com/${code}/flat/64.png`;
-  };
-  const SelectItem = (object) => {
-    object.selected = !object.selected;
-    if (!withMultiselect) {
-      onSelect?.(object);
-      return;
-    }
-    SelectedData.current = [...SelectedData.current, ...Data.filter((el) => el.selected == true), ...Data.filter((el) => el.id === object.id)];
-    SelectedData.current = _filterUnique(SelectedData.current, "id").filter((el) => el.selected).filter((el) => el.id !== "SELECT_ALL");
-    if (object.id === "SELECT_ALL") {
-      setSelectAllKey(object.selected);
-      setClickedSelectAll(true);
-    } else {
-      setSelectAllKey(false);
-      onSelect?.(SelectedData.current);
-      setClickedSelectAll(false);
-    }
-    setFlag((state) => !state);
-  };
-  const SingleSelect = (object) => {
-    setSingleSelectValue(object);
-    onSelect?.(object);
-    setIsFocused(false);
-  };
-  const Focus = () => {
-    onFocus?.();
-  };
-  const CalculatePos = () => {
-    const componentEl = ComponentRef.current;
-    const dropdownEl = DropdownRef.current;
-    if (!dropdownEl || !componentEl) return;
-    const componentRect = componentEl.getBoundingClientRect();
-    const windowHeight = window.innerHeight;
-    dropdownEl.style.position = "fixed";
-    dropdownEl.style.width = componentRect.width + "px";
-    dropdownEl.style.left = `${componentRect.left + window.pageXOffset}px`;
-    if (componentRect.bottom + dropdownEl.offsetHeight > windowHeight) {
-      dropdownEl.style.top = `${window.scrollY + componentRect.top - dropdownEl.offsetHeight + 18}px`;
-      dropdownEl.style.bottom = "unset";
-    } else {
-      dropdownEl.style.top = `${window.scrollY + componentRect.bottom + 8}px`;
-      dropdownEl.style.bottom = "unset";
-    }
-  };
-  useEffect(() => {
-    CalculatePos();
-  }, [DropdownRef, IsFocused]);
-  useEffect(() => {
-    SelectedData.current = data.filter((el) => el.selected);
-    if (!withMultiselect) {
-      setData(data);
-      return;
-    }
-    const hasSelected = data.some((el) => "selected" in el);
-    const firstItem = { id: "SELECT_ALL", label: "Select All", selected: SelectAllKey };
-    if (hasSelected) {
-      setData([firstItem, ...data]);
-    } else {
-      data.forEach((el) => {
-        el.selected = false;
-      });
-      setData([firstItem, ...data]);
-    }
-  }, [JSON.stringify(data)]);
-  useEffect(() => {
-    if (!withMultiselect) return;
-    if (!data.every((el) => el.selected)) {
-      setSelectAllKey(false);
-    }
-  }, [SelectedData.current.length]);
-  useEffect(() => {
-    if (!withMultiselect && selectedOptionID) {
-      setSingleSelectValue(data.find((el) => el.id === selectedOptionID));
-    }
-  }, [selectedOptionID]);
-  useEffect(() => {
-    if (!withMultiselect) return;
-    if (Data.length > 0 && ClickedSelectAll) {
-      const updated = Data.map((el) => {
-        if (el.id === "SELECT_ALL") return { ...el, selected: SelectAllKey };
-        if (el.disabled) return el;
-        return { ...el, selected: SelectAllKey };
-      });
-      setData(updated);
-      data.forEach((el) => {
-        if (el.id === "SELECT_ALL") {
-          el.selected = SelectAllKey;
-        } else if (!el.disabled) {
-          el.selected = SelectAllKey;
-        }
-      });
-      SelectedData.current = updated.filter((el) => el.selected && el.id !== "SELECT_ALL");
-      onSelect?.(SelectedData.current);
-    }
-  }, [Flag]);
-  useEffect(() => {
-    const ClickHandler = (event) => {
-      if (!ComponentRef.current) return;
-      if (event.composedPath().includes(ComponentRef.current)) return;
-      setIsFocused(false);
-    };
-    const ScrollHandler = (event) => {
-      if (!ComponentRef.current || !ListRef.current) return;
-      if (ListRef.current.contains(event.target)) return;
-      setIsFocused(false);
-    };
-    document.addEventListener("click", ClickHandler);
-    document.addEventListener("wheel", ScrollHandler);
-    return () => {
-      document.removeEventListener("click", ClickHandler);
-      document.removeEventListener("wheel", ScrollHandler);
-    };
-  }, []);
-  useEffect(() => {
-    if (!withMultiselect) return;
-    const calculateSelectedLength = () => {
-      const rect = ComponentRef.current?.getBoundingClientRect();
-      if (!rect) return;
-      const width = rect.width;
-      if (width <= 150) SelectedDataLength.current = 0;
-      else if (width <= 250) SelectedDataLength.current = 1;
-      else if (width <= 350) SelectedDataLength.current = 2;
-      else if (width <= 450) SelectedDataLength.current = 3;
-      else SelectedDataLength.current = 4;
-    };
-    calculateSelectedLength();
-    window.addEventListener("resize", calculateSelectedLength);
-    return () => window.removeEventListener("resize", calculateSelectedLength);
-  }, []);
-  const isInitialRender = useRef(true);
-  useEffect(() => {
-    if (isInitialRender.current) {
-      isInitialRender.current = false;
-      return;
-    }
-    if (!IsFocused) {
-      onBlur?.();
-    }
-  }, [IsFocused]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${style.dropdownWrapper}`, style: dropdownWrapperStyle ?? {}, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        ref: ComponentRef,
-        className: style.dropdownInputWrapper,
-        style: dropdownInputWrapperStyle ?? {},
-        onClick: () => (setIsFocused((state) => !state), CalculatePos()),
-        onFocus: Focus,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          FormInput,
-          {
-            ...rest,
-            onFocusChange: (value) => setIsFocused(value),
-            customFocus: IsFocused,
-            withActive: false,
-            value: withInput ? InputValue : SingleSelectValue?.label ?? "",
-            onChange: (value) => {
-              setInputValue(value);
-              onValueChange?.(value);
-            },
-            toggleFocus: true,
-            formInputStyle: { cursor: withInput ? "text" : "pointer" },
-            leftSlot: withInput && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.dropdownInputSlot, children: [
-              dropdownType === "currency" ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: SingleSelectValue?.label }) : /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: getFlagIconUrl(SingleSelectValue?.code), alt: "flag" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${style.dropdownRightIconArrow} ${IsFocused ? style.focused : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconArrowUp, {}) })
-            ] }),
-            rightSlot: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${style.dropdownRightIcon} ${IsFocused ? style.focused : ""}`, children: [
-              (withInput ? InputValue : !withMultiselect && SingleSelectValue) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "div",
-                {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    if (withInput) {
-                      setInputValue("");
-                      setIsFocused(false);
-                    } else {
-                      setSingleSelectValue(null);
-                    }
-                  },
-                  className: style.dropdownRightIconClose,
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconCloseCircle, {})
-                }
-              ),
-              !withInput && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.dropdownRightIconArrow, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconArrowUp, {}) })
-            ] }),
-            readOnly: !withInput,
-            forDropdown: true,
-            inputSlotStyle: { width: "100%" },
-            inputSlot: withMultiselect && SelectedData.current.length > 0 ? customInputSlot || /* @__PURE__ */ jsxRuntimeExports.jsxs("ul", { className: style.dropdownInputSlot, style: dropdownInputSlotStyle ?? {}, children: [
-              SelectedData.current.slice(0, SelectedDataLength.current).map((el, index) => {
-                return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                  "li",
-                  {
-                    ref: ListItemRef,
-                    className: style.dropdownInputSlotItem,
-                    style: dropdownInputSlotItemStyle ?? {},
-                    onClick: (e) => e.stopPropagation(),
-                    children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { title: el.label, className: style.dropdownInputSlotItemLabel, style: dropdownInputSlotItemLabelStyle ?? {}, children: el.customLabel ? el.customLabel(el) : el.label }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(
-                        "div",
-                        {
-                          style: dropdownInputSlotItemCloseStyle ?? {},
-                          className: style.dropdownInputSlotItemClose,
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            SelectItem(el);
-                          },
-                          children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconClose, { width: "16", height: "16", viewBox: "0 0 16 16", stroke: "#95969C" })
-                        }
-                      )
-                    ]
-                  },
-                  index
-                );
-              }),
-              SelectedData.current.length > SelectedDataLength.current && /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: `${style.dropdownInputSlotItem} ${style.dropdownInputSlotItemMore}`, style: dropdownInputSlotItemMoreStyle ?? {}, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: style.dropdownInputSlotItemLabel, style: dropdownInputSlotItemLabelStyle ?? {}, children: `+${SelectedData.current.length - SelectedDataLength.current}` }) })
-            ] }) : null
-          }
-        )
-      }
-    ),
-    data && data.length > 0 && IsFocused && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: DropdownRef, onClick: (e) => e.stopPropagation(), className: style.dropdownListContainer, children: [
-      withFilter && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        FormInput,
-        {
-          placeholder: "Search",
-          searchComponent: true,
-          withFocus: false,
-          withActive: false,
-          value: SearchValue,
-          onChange: (value) => setSearchValue(value)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { onClick: (e) => e.stopPropagation(), className: style.dropdownList, ref: ListRef, style: dropdownListStyle ?? {}, children: Data.filter((item) => item?.label?.toLowerCase().includes(SearchValue.toLowerCase())).map((item, index) => {
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "li",
-          {
-            style: { ...dropdownItemStyle, cursor: !withMultiselect && item?.disabled ? "not-allowed" : "pointer" },
-            className: `${style.dropdownItem} ${!withMultiselect && SingleSelectValue?.id === item.id ? style.selected : ""}  ${!item?.label || item.label === void 0 || disableAll || item?.disabled ? style.disabled : ""} ${!withMultiselect && !item?.disabled ? style.hovered : ""}`,
-            onClick: (e) => {
-              e.stopPropagation();
-              if (!withMultiselect && !item?.disabled) {
-                SingleSelect(item);
-              }
-            },
-            children: [
-              withMultiselect && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.itemCheckbox, style: itemCheckboxStyle ?? {}, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Checkbox,
-                {
-                  multipleChecked: item.id === "SELECT_ALL",
-                  disabled: disableAll || item?.disabled,
-                  checked: item?.selected,
-                  change: () => SelectItem(item)
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.dropdownItemLabel, style: dropdownItemLabelStyle ?? {}, children: [
-                withInput ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.dropdownItemLabelInput, children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: getFlagIconUrl(item.code), style: { width: "1.375rem", height: "1.375rem", objectFit: "contain" }, alt: item.name }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { title: item.name, className: style.countryName, children: item.name || item.label }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: style.countryDialCode, children: dropdownType === "country" ? item.dialCode : item?.label })
-                ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "p",
-                  {
-                    title: typeof item.label === "string" ? item.label : "",
-                    className: `${item.id === "SELECT_ALL" ? style.selectAll : ""}`,
-                    style: dropdownItemLabelTextStyle ?? {},
-                    children: item.customLabel ? item.customLabel() : item.label
-                  }
-                ),
-                withMultiselect && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: item.id === "SELECT_ALL" ? `${Data.filter((el) => el.id !== "SELECT_ALL" && el.selected).length}/${data.length}` : "" })
-              ] })
-            ]
-          },
-          index
-        );
-      }) }, Data.length)
-    ] })
-  ] });
-};
-export {
-  Dropdown as default
-};

package/dist/master-components-react-ts.es8.js

@@ -1,46 +0,0 @@
-import { j as jsxRuntimeExports } from "./master-components-react-ts.es17.js";
-import style from "./master-components-react-ts.es34.js";
-import { useState } from "react";
-import { useNamespace } from "./master-components-react-ts.es29.js";
-import { IconRadioChecked } from "./master-components-react-ts.es35.js";
-import { IconRadioUnchecked } from "./master-components-react-ts.es36.js";
-import { IconRadioCheckedDisabled } from "./master-components-react-ts.es37.js";
-import { IconRadioUncheckedDisabled } from "./master-components-react-ts.es38.js";
-const Radio = ({ checked, change, disabled, required, withUncheckState = false, radioType = "default" }) => {
-  useNamespace();
-  const [IsHovered, setIsHovered] = useState(false);
-  const onChange = () => {
-    if (!disabled) {
-      if (withUncheckState) {
-        change?.(!checked);
-      } else {
-        change?.(true);
-      }
-    }
-  };
-  const RadioIcon = () => {
-    let icon = null;
-    let color = disabled ? "#95969C" : radioType === "error" ? "#E3292F" : "#0058FF";
-    if (checked) {
-      if (disabled) {
-        icon = /* @__PURE__ */ jsxRuntimeExports.jsx(IconRadioCheckedDisabled, { color });
-      } else {
-        icon = /* @__PURE__ */ jsxRuntimeExports.jsx(IconRadioChecked, { color });
-      }
-    } else {
-      if (disabled) {
-        icon = /* @__PURE__ */ jsxRuntimeExports.jsx(IconRadioUncheckedDisabled, { color });
-      } else {
-        icon = /* @__PURE__ */ jsxRuntimeExports.jsx(IconRadioUnchecked, { color });
-      }
-    }
-    return icon;
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.radioWrapper, style: { cursor: disabled ? "not-allowed" : "pointer" }, onClick: onChange, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "radio", checked: true, readOnly: true, hidden: true, disabled: disabled ?? false, required }),
-    RadioIcon()
-  ] });
-};
-export {
-  Radio as default
-};

package/dist/master-components-react-ts.es9.js

@@ -1,153 +0,0 @@
-import { j as jsxRuntimeExports } from "./master-components-react-ts.es17.js";
-import { useRef, useState, useEffect } from "react";
-import style from "./master-components-react-ts.es39.js";
-const Tooltip = ({
-  children,
-  tooltipSlot,
-  delay = 400,
-  placement = "top",
-  trigger = "hover",
-  title,
-  text,
-  customText,
-  tooltipContentStyle,
-  tooltipTitlestyle,
-  tooltipTextStyle,
-  tooltipContainerStyle,
-  pointerPosition = "10%",
-  withPointer = false,
-  theme,
-  topCustomOffset = 0,
-  bottomCustomOffset = 0,
-  leftCustomOffset = 0,
-  rightCustomOffset = 0,
-  forceClose = false,
-  onClick
-}) => {
-  const ComponentRef = useRef(null);
-  const TooltipRef = useRef(null);
-  let timeout;
-  const [Active, setActive] = useState(false);
-  const hasContent = tooltipSlot || title || text || customText;
-  const ShowTip = () => {
-    if (trigger === "hover" && hasContent) {
-      timeout = setTimeout(() => {
-        setActive(true);
-      }, delay);
-    }
-  };
-  const HideTip = () => {
-    if (trigger === "hover") {
-      clearTimeout(timeout);
-      setTimeout(() => {
-        setActive(false);
-      }, delay);
-    }
-  };
-  const HandleActive = () => {
-    if (trigger === "click") {
-      onClick?.();
-      setActive((state) => !state);
-    }
-  };
-  const CalculatePos = () => {
-    const componentEl = ComponentRef.current;
-    const tooltipEl = TooltipRef.current;
-    if (!tooltipEl || !componentEl) return;
-    const componentRect = componentEl.getBoundingClientRect();
-    tooltipEl.style.position = "fixed";
-    switch (placement) {
-      case "top":
-        tooltipEl.style.top = `${componentRect.top - tooltipEl.offsetHeight - 8}px`;
-        tooltipEl.style.left = `${componentRect.left + topCustomOffset}px`;
-        break;
-      case "bottom":
-        tooltipEl.style.top = `${componentRect.bottom + 8}px`;
-        tooltipEl.style.left = `${componentRect.left + bottomCustomOffset}px`;
-        break;
-      case "left":
-        tooltipEl.style.top = `${componentRect.top + componentRect.height / 2 - tooltipEl.offsetHeight / 2}px`;
-        tooltipEl.style.left = `${componentRect.left - tooltipEl.offsetWidth - 8 + leftCustomOffset}px`;
-        break;
-      case "right":
-        tooltipEl.style.top = `${componentRect.top + componentRect.height / 2 - tooltipEl.offsetHeight / 2}px`;
-        tooltipEl.style.left = `${componentRect.right + 8 + rightCustomOffset}px`;
-        break;
-    }
-  };
-  useEffect(() => {
-    CalculatePos();
-  }, [ComponentRef, Active, children, placement, tooltipSlot, customText, title, text]);
-  useEffect(() => {
-    const handleScroll = (e) => {
-      const isInsideTooltip = ComponentRef.current?.contains(e.target);
-      if (!isInsideTooltip) {
-        setActive(false);
-      }
-    };
-    const ClickHandler = (event) => {
-      if (event.composedPath().includes(ComponentRef.current)) return;
-      setActive(false);
-    };
-    document.addEventListener("click", ClickHandler);
-    document.addEventListener("scroll", handleScroll, true);
-    return () => {
-      document.removeEventListener("scroll", handleScroll, true);
-      document.removeEventListener("click", ClickHandler);
-    };
-  }, []);
-  useEffect(() => {
-    if (forceClose) {
-      setActive(false);
-    }
-  }, [forceClose]);
-  useEffect(() => {
-    const element = TooltipRef.current;
-    if (element) {
-      element.style.setProperty("--pointer-position", `${pointerPosition}`);
-      if (!withPointer) {
-        element.classList.add(style.withoutPointer);
-      }
-    }
-  }, [Active]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
-    {
-      ref: ComponentRef,
-      className: `${theme === "dark" ? style.dark : ""} ${style.tooltipContainer}`,
-      onClick: HandleActive,
-      onMouseEnter: ShowTip,
-      onMouseLeave: HideTip,
-      style: tooltipContainerStyle ?? {},
-      children: [
-        children,
-        Active && tooltipSlot ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            style: tooltipContentStyle ?? {},
-            onClick: (e) => e.stopPropagation(),
-            ref: TooltipRef,
-            className: `${style.tooltipContent} ${placement ? style[placement] : style.bottom}`,
-            children: tooltipSlot
-          }
-        ) : Active && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "div",
-          {
-            style: tooltipContentStyle ?? {},
-            onClick: (e) => e.stopPropagation(),
-            ref: TooltipRef,
-            className: `${style.tooltipContent} ${placement ? style[placement] : style.bottom}`,
-            children: [
-              customText && typeof customText === "string" && customText,
-              title && title.length > 0 && typeof title === "string" && /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: style.tooltipTitle, style: tooltipTitlestyle ?? {}, children: title }),
-              text && text.length > 0 && typeof text === "string" && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: style.tooltipText, style: tooltipTextStyle ?? {}, children: text })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  Tooltip as default
-};