@mailstep/design-system 0.8.26 → 0.8.27-beta.0

package/ui/Blocks/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.js

@@ -0,0 +1,60 @@
+import Button from "../../../../Elements/Button/Button.js";
+import ButtonMore from "../ButtonMore/ButtonMore.js";
+import DropdownSelect_default from "../../../../Elements/DropdownSelect/index.js";
+import "react";
+import styled$1, { x } from "@xstyled/styled-components";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.tsx
+const Row = styled$1.div`
+  display: flex;
+  & > * {
+    margin-right: 12px;
+  }
+  z-index: 2;
+`;
+const ControlButton = ({ hide, node, label, appearance, variant, disabled, onClick, onSelect, options, hideChevron, iconLeft, buttonProps }) => {
+	if (hide) return null;
+	if (node) return /* @__PURE__ */ jsx(Fragment, { children: node });
+	if (options) return /* @__PURE__ */ jsx(DropdownSelect_default, {
+		label: label || "",
+		appearance: appearance || "secondary",
+		variant: variant || "default",
+		options,
+		showChevron: !hideChevron,
+		onSelect,
+		disabled
+	});
+	else return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		onClick,
+		disabled,
+		variant: variant || "default",
+		appearance: appearance || "primary",
+		iconLeft,
+		...buttonProps,
+		children: label
+	});
+};
+const ExtraControlButtons = ({ extraControlButtons, isMobile, targetPosition }) => {
+	const buttons = targetPosition ? (extraControlButtons || []).filter(({ position, hide }) => position === targetPosition && !hide) : extraControlButtons ?? [];
+	if (isMobile && buttons?.length > 0) {
+		const items = buttons.flatMap(({ onSelect, onClick, options, label }) => {
+			if (options && onSelect) return options.map((option) => ({
+				title: typeof label === "string" && !option.label.startsWith(String(label)) ? `${label}: ${option.label}` : option.label,
+				onClick: () => {
+					onSelect(option.value);
+				}
+			}));
+			if (label && onClick) return [{
+				title: label,
+				onClick
+			}];
+			return [];
+		});
+		if (items.length === 0) return null;
+		return /* @__PURE__ */ jsx(ButtonMore, { items });
+	}
+	return /* @__PURE__ */ jsx(Row, { children: buttons?.map((button, idx) => /* @__PURE__ */ jsx(x.div, { children: /* @__PURE__ */ jsx(ControlButton, { ...button }) }, idx)) });
+};
+//#endregion
+export { Row, ExtraControlButtons as default };

package/ui/Blocks/CommonGrid/components/ExtraControlButtons/index.d.ts

@@ -1,3 +1,2 @@
-import { default as ExtraControlButtons } from './ExtraControlButtons';
-
+import ExtraControlButtons from './ExtraControlButtons';
 export default ExtraControlButtons;

package/ui/Blocks/CommonGrid/components/ExtraControlButtons/index.js

@@ -0,0 +1,5 @@
+import ExtraControlButtons from "./ExtraControlButtons.js";
+//#region packages/ui/Blocks/CommonGrid/components/ExtraControlButtons/index.tsx
+var ExtraControlButtons_default = ExtraControlButtons;
+//#endregion
+export { ExtraControlButtons_default as default };

package/ui/Blocks/CommonGrid/components/FilterDropdown.d.ts

@@ -1,4 +1,3 @@
-import { PropsWithChildren, ReactElement } from 'react';
-
+import { type PropsWithChildren, type ReactElement } from 'react';
 declare const OverlayComponent: ({ children }: PropsWithChildren) => ReactElement;
 export default OverlayComponent;

package/ui/Blocks/CommonGrid/components/FilterDropdown.js

@@ -0,0 +1,32 @@
+import React from "react";
+import styled$1 from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/FilterDropdown.tsx
+const OverlayWrapper = styled$1.div`
+  position: absolute;
+  z-index: 1;
+  visibility: hidden;
+`;
+const OverlayComponent = ({ children }) => {
+	const overlayRef = React.useRef(null);
+	React.useEffect(() => {
+		const Overlay = overlayRef.current;
+		if (!Overlay) return;
+		const FilterCell = Overlay.closest(".cell");
+		const GridWrapper = FilterCell?.closest(".gridWrapper");
+		const relativeLeftOffset = (FilterCell?.offsetLeft ?? 0) - (FilterCell?.parentElement?.offsetLeft ?? 0);
+		const spaceLeft = (GridWrapper?.clientWidth ?? 0) + (GridWrapper?.scrollLeft ?? 0) - relativeLeftOffset - (Overlay.clientWidth ?? 0);
+		const left = spaceLeft > 0 ? FilterCell?.offsetLeft ?? 0 : (FilterCell?.offsetLeft ?? 0) + spaceLeft;
+		const topOffset = (FilterCell?.offsetTop ?? 0) + (FilterCell?.clientHeight ?? 0);
+		Overlay.style.left = `${left}px`;
+		Overlay.style.top = `${topOffset}px`;
+		Overlay.style.visibility = `initial`;
+	});
+	return /* @__PURE__ */ jsx(OverlayWrapper, {
+		ref: overlayRef,
+		className: "filterOverlay",
+		children
+	});
+};
+//#endregion
+export { OverlayComponent as default };

package/ui/Blocks/CommonGrid/components/FilterRow.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { Settings, ColumnDefinition as ColumnDefinitionType, ActionColumn, GridActionsType, GridSelectorsType, Group, CustomComparators, FiltersConfig, UxState, RowProps } from '../types';
-
+import type { FC } from 'react';
+import type { Settings, ColumnDefinition as ColumnDefinitionType, ActionColumn, GridActionsType, GridSelectorsType, Group, CustomComparators, FiltersConfig, UxState, RowProps } from '../types';
 type Props = {
     columns: ColumnDefinitionType[];
     actionColumn?: ActionColumn;

package/ui/Blocks/CommonGrid/components/FilterRow.js

@@ -0,0 +1,30 @@
+import { getFilterName } from "../utils/index.js";
+import { Row } from "./Table.js";
+import ColumnFilterCell from "./ColumnFilterCell.js";
+import { jsx } from "react/jsx-runtime";
+import get from "lodash/fp/get.js";
+import throttle from "lodash/throttle.js";
+//#region packages/ui/Blocks/CommonGrid/components/FilterRow.tsx
+const FilterRow = ({ columns, groups, actionColumn, onChange, filterValues = {}, displayColumnsWidth, filters, comparators, handleUxChange, onAsyncLoadFilterOptions, rowsData, uxState }) => {
+	const handleOnChange = throttle(onChange, 500);
+	return /* @__PURE__ */ jsx(Row, {
+		className: "filterRow",
+		children: columns.map((column, index) => /* @__PURE__ */ jsx(ColumnFilterCell, {
+			column,
+			actionColumn,
+			rowsData,
+			uxState,
+			handleUxChange,
+			onChange: handleOnChange,
+			value: get([getFilterName(column), "value"], filterValues),
+			others: get([getFilterName(column), "others"], filterValues),
+			displayColumnWidth: displayColumnsWidth[column.name],
+			filters,
+			comparators,
+			group: groups?.[index],
+			onAsyncLoadFilterOptions
+		}, index))
+	});
+};
+//#endregion
+export { FilterRow as default };

package/ui/Blocks/CommonGrid/components/Filters/ActionsFilter/ActionsFilter.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { ActionColumn, GridActionsType, RowProps, UxState } from '../../../types';
-
+import type { FC } from 'react';
+import type { ActionColumn, GridActionsType, RowProps, UxState } from '../../../types';
 type Props = {
     actionColumn?: ActionColumn;
     rowsData?: RowProps[];

package/ui/Blocks/CommonGrid/components/Filters/ActionsFilter/ActionsFilter.js

@@ -0,0 +1,34 @@
+import { useToggleAllCheckbox } from "../../../hooks/useToggleAllCheckbox.js";
+import Checkbox_default from "../../../../../Forms/Checkbox/index.js";
+import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/Filters/ActionsFilter/ActionsFilter.tsx
+const ActionsFilter = ({ actionColumn, rowsData, uxState, handleUxChange }) => {
+	const [allChecked, toggleCheckbox] = useToggleAllCheckbox(rowsData, uxState, handleUxChange);
+	const displayRowNumberLabel = actionColumn?.addRowNumbers;
+	const rowsNumberLabel = actionColumn?.addRowNumbersLabel ?? "#";
+	const displayCheckbox = actionColumn?.actionOptions?.length || actionColumn?.forceCheckboxes;
+	return /* @__PURE__ */ jsxs(x.div, {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		gap: "16px",
+		pl: "4px",
+		children: [displayCheckbox && /* @__PURE__ */ jsx(x.div, {
+			w: "100%",
+			children: /* @__PURE__ */ jsx(Checkbox_default, {
+				checked: allChecked,
+				onChange: toggleCheckbox,
+				label: ""
+			}, "check-all")
+		}), displayRowNumberLabel && /* @__PURE__ */ jsx(x.div, {
+			w: "100%",
+			pr: "12px",
+			display: "flex",
+			justifyContent: "center",
+			children: rowsNumberLabel
+		})]
+	});
+};
+//#endregion
+export { ActionsFilter as default };

package/ui/Blocks/CommonGrid/components/Filters/ActionsFilter/index.d.ts

@@ -1,3 +1,2 @@
-import { default as ActionsFilter } from './ActionsFilter';
-
+import ActionsFilter from './ActionsFilter';
 export default ActionsFilter;

package/ui/Blocks/CommonGrid/components/Filters/ActionsFilter/index.js

@@ -0,0 +1,5 @@
+import ActionsFilter from "./ActionsFilter.js";
+//#region packages/ui/Blocks/CommonGrid/components/Filters/ActionsFilter/index.ts
+var ActionsFilter_default = ActionsFilter;
+//#endregion
+export { ActionsFilter_default as default };

package/ui/Blocks/CommonGrid/components/Filters/BooleanSelect/BooleanSelect.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 type Props = {
     onChange: (data: any) => void;
     value?: string;

package/ui/Blocks/CommonGrid/components/Filters/BooleanSelect/BooleanSelect.js

@@ -0,0 +1,37 @@
+import GridSelect_default from "../GridSelect/index.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { i18n } from "@lingui/core";
+//#region packages/ui/Blocks/CommonGrid/components/Filters/BooleanSelect/BooleanSelect.tsx
+const getFlagOptions = () => [
+	{
+		value: "",
+		label: i18n._({
+			id: "dataGrid.columnActive.filterOptions.all",
+			message: "All"
+		})
+	},
+	{
+		value: "1",
+		label: i18n._({
+			id: "dataGrid.columnActive.filterOptions.yes",
+			message: "Yes"
+		})
+	},
+	{
+		value: "0",
+		label: i18n._({
+			id: "dataGrid.columnActive.filterOptions.no",
+			message: "No"
+		})
+	}
+];
+const SelectFilter = (props) => {
+	return /* @__PURE__ */ jsx(GridSelect_default, {
+		options: useMemo(() => getFlagOptions(), []),
+		...props,
+		isClearable: false
+	});
+};
+//#endregion
+export { SelectFilter as default };

package/ui/Blocks/CommonGrid/components/Filters/BooleanSelect/index.d.ts

@@ -1,3 +1,2 @@
-import { default as BooleanSelect } from './BooleanSelect';
-
+import BooleanSelect from './BooleanSelect';
 export default BooleanSelect;

package/ui/Blocks/CommonGrid/components/Filters/BooleanSelect/index.js

@@ -0,0 +1,5 @@
+import SelectFilter from "./BooleanSelect.js";
+//#region packages/ui/Blocks/CommonGrid/components/Filters/BooleanSelect/index.tsx
+var BooleanSelect_default = SelectFilter;
+//#endregion
+export { BooleanSelect_default as default };

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.d.ts

@@ -1,7 +1,6 @@
-import { FC } from 'react';
-import { DateTimeOthers } from '../../../../../Elements/DatePicker/Datetime/types';
-import { FilterComponentProps } from '../../../types';
-
+import { type FC } from 'react';
+import type { DateTimeOthers } from '../../../../../Elements/DatePicker/Datetime/types';
+import type { FilterComponentProps } from '../../../types';
 type InitialView = 'past' | 'future';
 type DatePickerRangeProps = FilterComponentProps<Date[]> & {
     filterTime?: number;

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.js

@@ -0,0 +1,152 @@
+import { useClickOutside } from "../../../../Modal/hooks/useClickOutside.js";
+import Input_default from "../../../../../Forms/Input/index.js";
+import DatePicker_default from "../../../../../Elements/DatePicker/index.js";
+import { getCleanValues } from "./utils/getCleanValues.js";
+import { pickerRangeToString } from "./utils/pickerRangeToString.js";
+import React, { useCallback, useMemo, useState } from "react";
+import styled$1, { css } from "@xstyled/styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { i18n } from "@lingui/core";
+import { DateTime } from "luxon";
+//#region packages/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.tsx
+const RangeWrapper = styled$1.div`
+  display: ${({ $compact }) => $compact ? "flex" : "inline-flex"};
+  flex-direction: ${({ $compact }) => $compact ? "column" : "row"};
+  margin-right: ${({ $compact }) => $compact ? "0" : "20px"};
+
+  ${({ $compact }) => $compact && css`
+      .rdtPicker {
+        min-width: unset;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0.5rem 0.5rem;
+      }
+      .rdtPicker .rdtDays {
+        min-width: unset;
+      }
+      .rdtPicker td {
+        padding: 0 0.2rem;
+      }
+    `}
+`;
+const OverlayComponentDefault = ({ children }) => /* @__PURE__ */ jsx("div", { children });
+const DatePickerRange = (props) => {
+	const { onChange, error, label, value, others, filterTime, initialView, compact, OverlayComponent = OverlayComponentDefault, ...rest } = props;
+	const [startRangeValue, setStartRangeValue] = useState(value?.[0] ?? void 0);
+	const [endRangeValue, setEndRangeValue] = useState(value?.[1] ?? void 0);
+	const timeFormat = filterTime ? "HH:mm" : false;
+	const cleanValue = React.useMemo(() => getCleanValues(value), [value]);
+	const initialViewDate = useMemo(() => {
+		if (cleanValue[0] && cleanValue[1]) return cleanValue;
+		const firstDate = /* @__PURE__ */ new Date();
+		firstDate.setHours(0, 0, 0, 0);
+		const secondDate = /* @__PURE__ */ new Date();
+		secondDate.setHours(23, 59, 59, 0);
+		if (initialView === "future") secondDate.setMonth(secondDate.getMonth() + 1);
+		else firstDate.setMonth(firstDate.getMonth());
+		return [cleanValue[0] || firstDate, cleanValue[1] || secondDate];
+	}, [cleanValue, initialView]);
+	const [isOpen, setOpen] = useState(false);
+	const setDateFrom = useCallback((v) => {
+		setStartRangeValue(v);
+		onChange([v, cleanValue[1]], others);
+	}, [
+		onChange,
+		others,
+		cleanValue
+	]);
+	const setDateTo = useCallback((v) => {
+		setEndRangeValue(v);
+		onChange([cleanValue[0], v], others);
+	}, [
+		onChange,
+		others,
+		cleanValue
+	]);
+	const handleOthersChangeFrom = useCallback((othersFrom) => {
+		onChange(cleanValue, [othersFrom, others?.[1]]);
+	}, [
+		onChange,
+		cleanValue,
+		others
+	]);
+	const handleOthersChangeTo = useCallback((othersTo) => {
+		onChange(cleanValue, [others?.[0], othersTo]);
+	}, [
+		onChange,
+		cleanValue,
+		others
+	]);
+	const openPicker = useCallback(() => {
+		setOpen(true);
+	}, [setOpen]);
+	const clear = useCallback(() => {
+		onChange([], []);
+		setStartRangeValue(void 0);
+		setEndRangeValue(void 0);
+	}, [onChange]);
+	const isValidDateFrom = useCallback((current) => !cleanValue[1] || DateTime.fromJSDate(cleanValue[1]) >= DateTime.fromJSDate(current), [cleanValue]);
+	const isValidDateTo = useCallback((current) => !cleanValue[0] || DateTime.fromJSDate(current) >= DateTime.fromJSDate(cleanValue[0]), [cleanValue]);
+	const onClose = useCallback(() => {
+		setOpen(false);
+	}, []);
+	const secondDatePickerValue = cleanValue[1] === null ? cleanValue[0] : cleanValue[1];
+	return /* @__PURE__ */ jsxs("div", {
+		ref: useClickOutside({ onClose }),
+		children: [/* @__PURE__ */ jsx(Input_default, {
+			name: props.name,
+			type: "text",
+			icon: "calendar",
+			value: pickerRangeToString(cleanValue, others),
+			label: props.label,
+			onFocus: openPicker,
+			iconOnClick: openPicker,
+			onClear: clear,
+			error,
+			readOnly: true
+		}), /* @__PURE__ */ jsx(OverlayComponent, { children: /* @__PURE__ */ jsx(Fragment, { children: isOpen && /* @__PURE__ */ jsxs(RangeWrapper, {
+			$compact: compact,
+			className: "ignore-element-for-closing-hook",
+			children: [/* @__PURE__ */ jsx(DatePicker_default, {
+				...rest,
+				timeFormat,
+				value: cleanValue[0] ?? "",
+				initialViewDate: initialViewDate[0],
+				secondValue: endRangeValue,
+				onChange: setDateFrom,
+				others: others?.[0],
+				onChangeOthers: handleOthersChangeFrom,
+				icon: false,
+				label: isOpen && i18n._({
+					id: "dataGrid.filterCell.from",
+					message: "From"
+				}),
+				isValidDate: isValidDateFrom,
+				input: false,
+				spaceAround: !compact,
+				open: true
+			}), /* @__PURE__ */ jsx(DatePicker_default, {
+				...rest,
+				timeFormat,
+				value: secondDatePickerValue,
+				initialViewDate: initialViewDate[1],
+				secondValue: startRangeValue,
+				onChange: setDateTo,
+				others: others?.[1],
+				onChangeOthers: handleOthersChangeTo,
+				icon: false,
+				label: isOpen && i18n._({
+					id: "dataGrid.filterCell.to",
+					message: "To"
+				}),
+				isValidDate: isValidDateTo,
+				input: false,
+				spaceAround: !compact,
+				open: true,
+				isSecondDatePicker: true
+			})]
+		}) }) })]
+	});
+};
+//#endregion
+export { DatePickerRange as default };

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/index.d.ts

@@ -1,3 +1,2 @@
-import { default as DatePickerRange } from './DatePickerRange';
-
+import DatePickerRange from './DatePickerRange';
 export default DatePickerRange;

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/index.js

@@ -0,0 +1,5 @@
+import DatePickerRange from "./DatePickerRange.js";
+//#region packages/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/index.tsx
+var DatePickerRange_default = DatePickerRange;
+//#endregion
+export { DatePickerRange_default as default };

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/utils/getCleanValues.js

@@ -0,0 +1,10 @@
+//#region packages/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/utils/getCleanValues.ts
+const getCleanValue = (value) => {
+	if (typeof value === "string") return new Date(value);
+	return value || void 0;
+};
+const getCleanValues = (value) => {
+	return [getCleanValue(value?.[0]), getCleanValue(value?.[1])];
+};
+//#endregion
+export { getCleanValues };

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/utils/pickerRangeToString.d.ts

@@ -1,3 +1,2 @@
-import { DateTimeOthers } from '../../../../../../Elements/DatePicker/Datetime/types';
-
+import type { DateTimeOthers } from '../../../../../../Elements/DatePicker/Datetime/types';
 export declare const pickerRangeToString: (values?: Date[], others?: DateTimeOthers[]) => string;

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/utils/pickerRangeToString.js

@@ -0,0 +1,16 @@
+import { DatePickerRepeatTrans, TimePickerRepeatTrans } from "../../../../../../Elements/DatePicker/utils/constants.js";
+import { sameDate } from "./sameDate.js";
+import { DateTime } from "luxon";
+//#region packages/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/utils/pickerRangeToString.ts
+const pickerRangeToString = (values = [], others) => {
+	if (others?.[0]?.dateTypeRepeater || others?.[1]?.dateTypeRepeater) return others.map((other, i) => {
+		if (!other?.dateTypeRepeater) return values[i] && DateTime.fromJSDate(values[i]).toFormat("dd.LL.yyyy HH:mm");
+		const repeaterDate = DatePickerRepeatTrans[other?.dateTypeRepeater];
+		return `${i === 0 ? TimePickerRepeatTrans.from : TimePickerRepeatTrans.to} ${repeaterDate} ${other?.time ? `${String(other?.time.h).padStart(2, "0")}:${String(other?.time.m).padStart(2, "0")}` : ""}`.trim();
+	}).filter(Boolean).join(" - ");
+	if (!values[0] && !values[1]) return "";
+	if (values[0] && !values[1] || sameDate(values[0], values[1])) return DateTime.fromJSDate(values[0]).toFormat("dd.LL.yyyy");
+	return values.map((v) => v && DateTime.fromJSDate(v).toFormat("dd.LL.yyyy HH:mm")).join(" - ");
+};
+//#endregion
+export { pickerRangeToString };

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/utils/sameDate.js

@@ -0,0 +1,4 @@
+//#region packages/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/utils/sameDate.ts
+const sameDate = (date1, date2) => date1 && date1.getTime && date2 && date2.getTime && date1.getTime() === date2.getTime();
+//#endregion
+export { sameDate };

package/ui/Blocks/CommonGrid/components/Filters/GridSelect/GridSelect.d.ts

@@ -1,7 +1,6 @@
-import { FC } from 'react';
-import { Option } from '../../../../../Elements/Select/types';
-import { CommonGridProps } from '../../../types';
-
+import type { FC } from 'react';
+import { type Option } from '../../../../../Elements/Select/types';
+import { type CommonGridProps } from '../../../types';
 type Props = {
     onChange: (data: any) => void;
     onAsyncLoadFilterOptions?: CommonGridProps['onAsyncLoadFilterOptions'];

package/ui/Blocks/CommonGrid/components/Filters/GridSelect/GridSelect.js

@@ -0,0 +1,95 @@
+import Select_default from "../../../../../Elements/Select/index.js";
+import SingleSelect_default from "../../../../../Elements/SingleSelect/index.js";
+import { isOptionArray } from "./guards.js";
+import { useCallback, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { i18n } from "@lingui/core";
+import isArray from "lodash/isArray.js";
+import uniqBy from "lodash/uniqBy.js";
+//#region packages/ui/Blocks/CommonGrid/components/Filters/GridSelect/GridSelect.tsx
+const minColumnWidth = 120;
+const noOptionsMessage = () => null;
+const SelectFilter = ({ onChange, isClearable = true, disabled, placeholder, showValue = true, columnWidth, isMulti, value, options, checkAllButton, asyncLoadKey, onAsyncLoadFilterOptions, withNotEqComparator = true }) => {
+	const [loadedOptions, setLoadedOptions] = useState([]);
+	const [isNotEqNoValue, setIsNotEqNoValue] = useState(false);
+	const isAsync = !!asyncLoadKey;
+	const isNotEq = useMemo(() => isOptionArray(value) ? value.some((option) => option.isNotEq) : isNotEqNoValue, [value, isNotEqNoValue]);
+	const handleOnMultiChange = useCallback((options) => {
+		onChange?.(!isArray(options) || !options?.length ? null : options?.map((option) => ({
+			...option,
+			isNotEq
+		})));
+	}, [onChange, isNotEq]);
+	const handleLoadOptions = useCallback(async (fulltext) => {
+		let data = [];
+		if (asyncLoadKey) data = await onAsyncLoadFilterOptions?.(asyncLoadKey, fulltext) || [];
+		setLoadedOptions(data);
+		return data;
+	}, [asyncLoadKey, onAsyncLoadFilterOptions]);
+	const handleIconClick = useCallback((event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		if (!value || !isOptionArray(value)) {
+			setIsNotEqNoValue((prev) => !prev);
+			return;
+		}
+		const newOptions = value?.map((option) => ({
+			...option,
+			isNotEq: !isNotEq
+		}));
+		onChange(newOptions);
+	}, [
+		value,
+		isNotEq,
+		onChange
+	]);
+	const defaultOptions = useMemo(() => isMulti && isAsync && isOptionArray(value) ? uniqBy([...loadedOptions, ...value], "value") : void 0, [
+		isAsync,
+		value,
+		loadedOptions
+	]);
+	const isWide = columnWidth && columnWidth > minColumnWidth;
+	const isSelectClearable = isWide ? isClearable : false;
+	const placeholderValue = placeholder || (isAsync ? i18n._({
+		id: "dataGrid.filterCell",
+		message: "Type to filter"
+	}) : void 0);
+	if (isMulti) {
+		const placeholderIcon = isWide && withNotEqComparator ? isNotEq ? "notEqual" : "equals" : null;
+		return /* @__PURE__ */ jsx(Select_default, {
+			maxMenuHeight: 250,
+			onChange: handleOnMultiChange,
+			value: showValue ? isOptionArray(value) ? value.map((option) => String(option.value)) : value : void 0,
+			options: defaultOptions || options,
+			showSelectAllButton: checkAllButton,
+			style: "gridFilter",
+			loadOptions: isAsync ? handleLoadOptions : void 0,
+			defaultOptions,
+			placeholder: placeholderValue,
+			noOptionsMessage,
+			containerVariant: isAsync ? "search" : void 0,
+			placeholderIcon,
+			onIconClick: withNotEqComparator ? handleIconClick : void 0,
+			optionVariant: "checkbox",
+			multiLabelVariant: "count",
+			shortVariant: "join",
+			isMulti: true,
+			disabled,
+			isClearable: isSelectClearable
+		});
+	}
+	return /* @__PURE__ */ jsx(SingleSelect_default, {
+		maxMenuHeight: 250,
+		onChange,
+		value: showValue ? value : void 0,
+		options,
+		style: "gridFilter",
+		loadOptions: isAsync ? handleLoadOptions : void 0,
+		placeholder: placeholderValue,
+		placeholderIcon: isWide ? void 0 : null,
+		isClearable: isSelectClearable,
+		disabled
+	});
+};
+//#endregion
+export { SelectFilter as default };

package/ui/Blocks/CommonGrid/components/Filters/GridSelect/guards.d.ts

@@ -1,3 +1,2 @@
-import { Option } from '../../../../../Elements/Select/types';
-
+import { type Option } from '../../../../../Elements/Select/types';
 export declare const isOptionArray: (value: unknown) => value is Option[];

package/ui/Blocks/CommonGrid/components/Filters/GridSelect/guards.js

@@ -0,0 +1,6 @@
+//#region packages/ui/Blocks/CommonGrid/components/Filters/GridSelect/guards.ts
+const isOptionArray = (value) => {
+	return Array.isArray(value) && value.every((v) => typeof v === "object" && v !== null && "label" in v && "value" in v);
+};
+//#endregion
+export { isOptionArray };

package/ui/Blocks/CommonGrid/components/Filters/GridSelect/index.d.ts

@@ -1,3 +1,2 @@
-import { default as GridSelect } from './GridSelect';
-
+import GridSelect from './GridSelect';
 export default GridSelect;

package/ui/Blocks/CommonGrid/components/Filters/GridSelect/index.js

@@ -0,0 +1,5 @@
+import SelectFilter from "./GridSelect.js";
+//#region packages/ui/Blocks/CommonGrid/components/Filters/GridSelect/index.tsx
+var GridSelect_default = SelectFilter;
+//#endregion
+export { GridSelect_default as default };

package/ui/Blocks/CommonGrid/components/Filters/NumberRange/NumberRange.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-import { NumberRangeProps } from './types';
-
+import { type FC } from 'react';
+import { type NumberRangeProps } from './types';
 declare const NumberRange: FC<NumberRangeProps>;
 export default NumberRange;