master-components-react-ts 2.1.2 → 2.1.4

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

@@ -0,0 +1,83 @@
+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

@@ -0,0 +1,211 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+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__ */ jsxs("div", { className: `${namespace === "namespaceHr" ? style.namespaceHr : ""} ${style.datepickerContainer}`, children: [
+    /* @__PURE__ */ jsx("div", { ref: ComponentRef, className: style.datepickerInputWrapper, onClick: () => (setIsFocused((state) => !state), CalculatePos()), children: /* @__PURE__ */ jsx(
+      FormInput,
+      {
+        ...rest,
+        customFocus: IsFocused,
+        withActive: false,
+        value: Value,
+        toggleFocus: true,
+        formInputStyle: { cursor: "pointer" },
+        leftSlot: /* @__PURE__ */ jsx("div", { className: style.datepickerLeftIcon, children: /* @__PURE__ */ jsx(IconCalendar, {}) }),
+        rightSlot: /* @__PURE__ */ jsx("div", { className: `${style.datepickerRightIcon}`, onClick: Clear, children: Value && /* @__PURE__ */ jsx(IconCloseCircle, {}) }),
+        readOnly: true
+      }
+    ) }),
+    IsFocused && /* @__PURE__ */ 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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,337 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+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.zIndex = "100";
+    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__ */ jsxs("div", { className: `${style.dropdownWrapper}`, style: dropdownWrapperStyle ?? {}, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: ComponentRef,
+        className: style.dropdownInputWrapper,
+        style: dropdownInputWrapperStyle ?? {},
+        onClick: () => (setIsFocused((state) => !state), CalculatePos()),
+        onFocus: Focus,
+        children: /* @__PURE__ */ 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__ */ jsxs("div", { className: style.dropdownInputSlot, children: [
+              dropdownType === "currency" ? /* @__PURE__ */ jsx("p", { children: SingleSelectValue?.label }) : /* @__PURE__ */ jsx("img", { src: getFlagIconUrl(SingleSelectValue?.code), alt: "flag" }),
+              /* @__PURE__ */ jsx("div", { className: `${style.dropdownRightIconArrow} ${IsFocused ? style.focused : ""}`, children: /* @__PURE__ */ jsx(IconArrowUp, {}) })
+            ] }),
+            rightSlot: /* @__PURE__ */ jsxs("div", { className: `${style.dropdownRightIcon} ${IsFocused ? style.focused : ""}`, children: [
+              (withInput ? InputValue : !withMultiselect && SingleSelectValue) && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    if (withInput) {
+                      setInputValue("");
+                      setIsFocused(false);
+                    } else {
+                      setSingleSelectValue(null);
+                    }
+                  },
+                  className: style.dropdownRightIconClose,
+                  children: /* @__PURE__ */ jsx(IconCloseCircle, {})
+                }
+              ),
+              !withInput && /* @__PURE__ */ jsx("div", { className: style.dropdownRightIconArrow, children: /* @__PURE__ */ jsx(IconArrowUp, {}) })
+            ] }),
+            readOnly: !withInput,
+            forDropdown: true,
+            inputSlotStyle: { width: "100%" },
+            inputSlot: withMultiselect && SelectedData.current.length > 0 ? customInputSlot || /* @__PURE__ */ jsxs("ul", { className: style.dropdownInputSlot, style: dropdownInputSlotStyle ?? {}, children: [
+              SelectedData.current.slice(0, SelectedDataLength.current).map((el, index) => {
+                return /* @__PURE__ */ jsxs(
+                  "li",
+                  {
+                    ref: ListItemRef,
+                    className: style.dropdownInputSlotItem,
+                    style: dropdownInputSlotItemStyle ?? {},
+                    onClick: (e) => e.stopPropagation(),
+                    children: [
+                      /* @__PURE__ */ jsx("p", { title: el.label, className: style.dropdownInputSlotItemLabel, style: dropdownInputSlotItemLabelStyle ?? {}, children: typeof el.customLabel === "function" ? el.customLabel(el) : el.label }),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: dropdownInputSlotItemCloseStyle ?? {},
+                          className: style.dropdownInputSlotItemClose,
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            SelectItem(el);
+                          },
+                          children: /* @__PURE__ */ jsx(IconClose, { width: "16", height: "16", viewBox: "0 0 16 16", stroke: "#95969C" })
+                        }
+                      )
+                    ]
+                  },
+                  index
+                );
+              }),
+              SelectedData.current.length > SelectedDataLength.current && /* @__PURE__ */ jsx("li", { className: `${style.dropdownInputSlotItem} ${style.dropdownInputSlotItemMore}`, style: dropdownInputSlotItemMoreStyle ?? {}, children: /* @__PURE__ */ jsx("p", { className: style.dropdownInputSlotItemLabel, style: dropdownInputSlotItemLabelStyle ?? {}, children: `+${SelectedData.current.length - SelectedDataLength.current}` }) })
+            ] }) : null
+          }
+        )
+      }
+    ),
+    data && data.length > 0 && IsFocused && /* @__PURE__ */ jsxs("div", { ref: DropdownRef, onClick: (e) => e.stopPropagation(), className: style.dropdownListContainer, children: [
+      withFilter && /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          placeholder: "Search",
+          searchComponent: true,
+          withFocus: false,
+          withActive: false,
+          value: SearchValue,
+          onChange: (value) => setSearchValue(value)
+        }
+      ),
+      /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: style.itemCheckbox, style: itemCheckboxStyle ?? {}, children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  multipleChecked: item.id === "SELECT_ALL",
+                  disabled: disableAll || item?.disabled,
+                  checked: item?.selected,
+                  change: () => SelectItem(item)
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: style.dropdownItemLabel, style: dropdownItemLabelStyle ?? {}, children: [
+                withInput ? /* @__PURE__ */ jsxs("div", { className: style.dropdownItemLabelInput, children: [
+                  /* @__PURE__ */ jsx("img", { src: getFlagIconUrl(item.code), style: { width: "1.375rem", height: "1.375rem", objectFit: "contain" }, alt: item.name }),
+                  /* @__PURE__ */ jsx("span", { title: item.name, className: style.countryName, children: item.name || item.label }),
+                  /* @__PURE__ */ jsx("span", { className: style.countryDialCode, children: dropdownType === "country" ? item.dialCode : item?.label })
+                ] }) : /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    title: typeof item.label === "string" ? item.label : "",
+                    className: `${item.id === "SELECT_ALL" ? style.selectAll : ""}`,
+                    style: dropdownItemLabelTextStyle ?? {},
+                    children: typeof item.customLabel === "function" ? item.customLabel(item) : item.label
+                  }
+                ),
+                withMultiselect && /* @__PURE__ */ 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
+};