master-components-react-ts 2.0.1 → 2.1.2

package/dist/components/DatePicker/Calendar.module.scss.js

@@ -1,83 +0,0 @@
-const datePicker = "Calendar-module__datePicker";
-const dualCalendar = "Calendar-module__dualCalendar";
-const dualCalendarWithQuick = "Calendar-module__dualCalendarWithQuick";
-const border = "Calendar-module__border";
-const calendarWrapper = "Calendar-module__calendarWrapper";
-const quickPick = "Calendar-module__quickPick";
-const datePickerHeader = "Calendar-module__datePickerHeader";
-const div = "Calendar-module__div";
-const currentDateHeader = "Calendar-module__currentDateHeader";
-const left = "Calendar-module__left";
-const right = "Calendar-module__right";
-const singleIcon = "Calendar-module__singleIcon";
-const doubleIcon = "Calendar-module__doubleIcon";
-const spacerRow = "Calendar-module__spacerRow";
-const day = "Calendar-module__day";
-const today = "Calendar-module__today";
-const inRange = "Calendar-module__inRange";
-const selected = "Calendar-module__selected";
-const startDate = "Calendar-module__startDate";
-const endDate = "Calendar-module__endDate";
-const disabled = "Calendar-module__disabled";
-const otherMonth = "Calendar-module__otherMonth";
-const monthsWrapper = "Calendar-module__monthsWrapper";
-const month = "Calendar-module__month";
-const pickedMonth = "Calendar-module__pickedMonth";
-const buttonWrapper = "Calendar-module__buttonWrapper";
-const style = {
-  datePicker,
-  dualCalendar,
-  dualCalendarWithQuick,
-  border,
-  calendarWrapper,
-  quickPick,
-  datePickerHeader,
-  div,
-  currentDateHeader,
-  left,
-  right,
-  singleIcon,
-  doubleIcon,
-  spacerRow,
-  day,
-  today,
-  inRange,
-  selected,
-  startDate,
-  endDate,
-  disabled,
-  otherMonth,
-  monthsWrapper,
-  month,
-  pickedMonth,
-  buttonWrapper
-};
-export {
-  border,
-  buttonWrapper,
-  calendarWrapper,
-  currentDateHeader,
-  datePicker,
-  datePickerHeader,
-  day,
-  style as default,
-  disabled,
-  div,
-  doubleIcon,
-  dualCalendar,
-  dualCalendarWithQuick,
-  endDate,
-  inRange,
-  left,
-  month,
-  monthsWrapper,
-  otherMonth,
-  pickedMonth,
-  quickPick,
-  right,
-  selected,
-  singleIcon,
-  spacerRow,
-  startDate,
-  today
-};

package/dist/components/DatePicker/DatePicker.js

@@ -1,211 +0,0 @@
-import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
-import { useState, useRef, useEffect } from "react";
-import dayjs from "dayjs";
-import style from "./Datepicker.module.scss.js";
-import Calendar from "./Calendar.js";
-import { IconCalendar } from "../../assets/Icons/IconCalendar.js";
-import customParseFormat from "../../node_modules/dayjs/plugin/customParseFormat.js";
-import { useNamespace } from "../../context/NamespaceContext.js";
-import FormInput from "../FormInput/FormInput.js";
-import { IconCloseCircle } from "../../assets/Icons/IconCloseCircle.js";
-dayjs.extend(customParseFormat);
-const DatePicker = ({
-  defaultValue,
-  valueFormat = "DD-MM-YYYY",
-  onChange,
-  onBlur,
-  onFocus,
-  customYears,
-  fixedDropdown = true,
-  disabledDatesFrom,
-  disabledDatesTill,
-  disabledDatesRange,
-  datepickerStyle,
-  datepickerLabelStyle,
-  requiredStyle,
-  datepickerHelperTextStyle,
-  selectedStyle,
-  endDateStyle,
-  startDateStyle,
-  inRangeStyle,
-  otherMonthStyle,
-  todayStyle,
-  weekDayStyle,
-  quickPickStyle,
-  monthStyle,
-  quickPick,
-  mode = "single",
-  pickerType = "single",
-  disabled = false,
-  ...rest
-}) => {
-  const namespace = useNamespace();
-  const [IsFocused, setIsFocused] = useState(false);
-  const [Value, setValue] = useState("");
-  const DefaultValue = useRef({ state: false, value: "" });
-  const CalendarRef = useRef(null);
-  const [CurrentMonth, setCurrentMonth] = useState(() => {
-    const thisYear = dayjs().year().toString();
-    if (customYears?.length) {
-      return customYears.includes(thisYear) ? dayjs() : dayjs(`${Math.min(...customYears.map(Number))}-01-01`);
-    }
-    return dayjs();
-  });
-  useEffect(() => {
-    const thisYear = dayjs().year().toString();
-    if (customYears?.length) {
-      setCurrentMonth(customYears.includes(thisYear) ? dayjs() : dayjs(`${Math.min(...customYears.map(Number))}-01-01`));
-    }
-  }, [customYears]);
-  const [SelectedDate, setSelectedDate] = useState("");
-  const [RangeSelection, setRangeSelection] = useState({
-    start: null,
-    end: null
-  });
-  const ComponentRef = useRef(null);
-  const Change = (value, singleQuickPick, withDefault) => {
-    let dateValue = "";
-    let objValue = { start: "", end: "" };
-    if (mode === "single" || typeof value === "string") {
-      dateValue = value;
-      setValue(dateValue);
-    }
-    if (mode !== "single" || typeof value !== "string") {
-      dateValue = `${dayjs(value?.start ?? "").format(valueFormat)} / ${value?.end ? dayjs(value?.end).format(valueFormat) : ""}`;
-      objValue.start = dayjs(value?.start ?? "").format(valueFormat);
-      objValue.end = value?.end ? dayjs(value?.end).format(valueFormat) : "";
-      setValue(dateValue);
-    }
-    if (value?.end) {
-      setIsFocused(false);
-    }
-    if (onChange && typeof onChange === "function" && !withDefault) {
-      onChange(objValue.start !== "" ? objValue : dateValue);
-      DefaultValue.current.value = objValue.start !== "" ? objValue : dateValue;
-    }
-  };
-  const Clear = (e) => {
-    e.stopPropagation();
-    setSelectedDate("");
-    DefaultValue.current.value = "";
-    setValue("");
-    setRangeSelection({
-      start: null,
-      end: null
-    });
-    if (onChange && typeof onChange === "function") {
-      onChange("");
-    }
-  };
-  const ClickHandler = (event) => {
-    if (!ComponentRef.current) return;
-    if (event.composedPath().includes(ComponentRef.current)) return;
-    setIsFocused(false);
-  };
-  const ScrollHandler = (event) => {
-    if (!ComponentRef.current || !CalendarRef.current) return;
-    if (event.composedPath().includes(ComponentRef.current) || event.composedPath().includes(CalendarRef.current)) return;
-    setIsFocused(false);
-  };
-  const CalculatePos = () => {
-    if (!ComponentRef.current || !CalendarRef.current) return;
-    const componentEl = ComponentRef.current;
-    const calendarEl = CalendarRef.current;
-    if (!calendarEl || !componentEl) return;
-    const componentRect = componentEl.getBoundingClientRect();
-    const windowHeight = window.innerHeight;
-    const windowWidth = window.innerWidth;
-    calendarEl.style.position = "fixed";
-    if (componentRect.bottom + calendarEl.offsetHeight > windowHeight) {
-      calendarEl.style.top = `${window.scrollY + componentRect.top - calendarEl.offsetHeight - 8}px`;
-      calendarEl.style.bottom = "unset";
-    } else {
-      calendarEl.style.top = `${window.scrollY + componentRect.bottom + 8}px`;
-      calendarEl.style.bottom = "unset";
-    }
-    if (componentRect.right + componentRect.width > windowWidth - 120) {
-      calendarEl.style.left = `${window.scrollX + componentRect.left + componentRect.width - calendarEl.offsetWidth}px`;
-    } else {
-      calendarEl.style.left = `${window.scrollX + componentRect.left}px`;
-    }
-  };
-  useEffect(() => {
-    if (defaultValue && DefaultValue.current.value === "") {
-      let value = Array.isArray(defaultValue) ? {
-        start: dayjs(defaultValue[0], valueFormat),
-        end: defaultValue.length > 1 ? dayjs(defaultValue[1], valueFormat) : ""
-      } : dayjs(defaultValue, valueFormat).format(valueFormat);
-      DefaultValue.current.value = defaultValue;
-      DefaultValue.current.state = true;
-      if (value) {
-        Change(value, false, true);
-      }
-    }
-  }, []);
-  useEffect(() => {
-    if (IsFocused) {
-      CalculatePos();
-    }
-  }, [CalendarRef, IsFocused]);
-  useEffect(() => {
-    document.addEventListener("click", ClickHandler);
-    document.addEventListener("wheel", ScrollHandler);
-    return () => {
-      document.removeEventListener("click", ClickHandler);
-      document.removeEventListener("wheel", ScrollHandler);
-    };
-  }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${namespace === "namespaceHr" ? style.namespaceHr : ""} ${style.datepickerContainer}`, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: ComponentRef, className: style.datepickerInputWrapper, onClick: () => (setIsFocused((state) => !state), CalculatePos()), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      FormInput,
-      {
-        ...rest,
-        customFocus: IsFocused,
-        withActive: false,
-        value: Value,
-        toggleFocus: true,
-        formInputStyle: { cursor: "pointer" },
-        leftSlot: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.datepickerLeftIcon, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconCalendar, {}) }),
-        rightSlot: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${style.datepickerRightIcon}`, onClick: Clear, children: Value && /* @__PURE__ */ jsxRuntimeExports.jsx(IconCloseCircle, {}) }),
-        readOnly: true
-      }
-    ) }),
-    IsFocused && /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Calendar,
-      {
-        namespace,
-        defaultValue: DefaultValue.current,
-        CalendarRef,
-        disabledDatesFrom,
-        disabledDatesTill,
-        disabledDatesRange,
-        valueFormat,
-        onChange: (value) => Change(value, false, false),
-        customYears,
-        CurrentMonth,
-        setCurrentMonth,
-        SelectedDate,
-        setSelectedDate,
-        IsFocused,
-        setIsFocused,
-        quickPick,
-        mode,
-        RangeSelection,
-        setRangeSelection,
-        pickerType,
-        selectedStyle,
-        endDateStyle,
-        startDateStyle,
-        inRangeStyle,
-        otherMonthStyle,
-        todayStyle,
-        weekDayStyle,
-        quickPickStyle,
-        monthStyle
-      }
-    )
-  ] });
-};
-export {
-  DatePicker as default
-};

package/dist/components/DatePicker/Datepicker.module.scss.js

@@ -1,17 +0,0 @@
-const datepickerContainer = "Datepicker-module__datepickerContainer";
-const datepickerInputWrapper = "Datepicker-module__datepickerInputWrapper";
-const datepickerLeftIcon = "Datepicker-module__datepickerLeftIcon";
-const datepickerRightIcon = "Datepicker-module__datepickerRightIcon";
-const style = {
-  datepickerContainer,
-  datepickerInputWrapper,
-  datepickerLeftIcon,
-  datepickerRightIcon
-};
-export {
-  datepickerContainer,
-  datepickerInputWrapper,
-  datepickerLeftIcon,
-  datepickerRightIcon,
-  style as default
-};

package/dist/components/Dropdown/Dropdown.js

@@ -1,336 +0,0 @@
-import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
-import { useState, useRef, useEffect } from "react";
-import style from "./Dropdown.module.scss.js";
-import FormInput from "../FormInput/FormInput.js";
-import Checkbox from "../Checkbox/Checkbox.js";
-import { _filterUnique } from "../../utils/Helpers.js";
-import { IconClose } from "../../assets/Icons/IconClose.js";
-import { IconArrowUp } from "../../assets/Icons/IconArrowUp.js";
-import { IconCloseCircle } from "../../assets/Icons/IconCloseCircle.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
-};