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

package/ui/Blocks/CommonGrid/components/gridCells/EnumInCell.js

@@ -0,0 +1,30 @@
+import HighlightBox_default from "../../../../Elements/HighlightBox/index.js";
+import { useMemo } from "react";
+import styled$1 from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/EnumInCell.tsx
+const Center = styled$1.div`
+  display: flex;
+  justify-content: flex-start;
+  width: 100%;
+`;
+const EnumInCell = ({ value, enumObj, appearanceMap, size }) => {
+	const finalLabel = useMemo(() => {
+		return enumObj[value] ? enumObj[value]() : value;
+	}, [enumObj, value]);
+	const coloringProp = useMemo(() => {
+		return { appearance: appearanceMap[value] };
+	}, [appearanceMap, value]);
+	if (!finalLabel) return null;
+	return /* @__PURE__ */ jsx(Center, {
+		"data-propagation": "true",
+		children: /* @__PURE__ */ jsx(HighlightBox_default, {
+			...coloringProp,
+			size,
+			prefix: "grid",
+			children: finalLabel
+		})
+	});
+};
+//#endregion
+export { EnumInCell };

package/ui/Blocks/CommonGrid/components/gridCells/HoverBubble.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { DataCellProps } from '../../types';
-
+import type { FC } from 'react';
+import { type DataCellProps } from '../../types';
 type Props = DataCellProps<{}>;
 export declare const HoverBubble: FC<Props>;
 export {};

package/ui/Blocks/CommonGrid/components/gridCells/HoverBubble.js

@@ -0,0 +1,52 @@
+import "react";
+import styled$1 from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import get from "lodash/fp/get.js";
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/HoverBubble.tsx
+const Wrapper = styled$1.div`
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  :hover {
+    cursor: pointer;
+    .tooltip {
+      display: block;
+    }
+  }
+`;
+const Tooltip = styled$1.div`
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  margin-bottom: 2;
+
+  div {
+    display: none;
+    position: absolute;
+    background-color: white;
+    color: gray;
+    border-color: gray;
+    border: 1px solid;
+    border-radius: md;
+    padding: 2 3;
+    margin: 1;
+    z-index: 1;
+    box-shadow: tooltipBoxShadow;
+    transform: translateY(-100%);
+
+    max-width: 400px;
+    line-break: anywhere;
+    white-space: initial;
+  }
+`;
+const HoverBubble = ({ rowData, column }) => {
+	const value = get(column.name, rowData);
+	if (value) return /* @__PURE__ */ jsxs(Wrapper, { children: [/* @__PURE__ */ jsx(Tooltip, { children: /* @__PURE__ */ jsx("div", {
+		className: "tooltip",
+		children: value
+	}) }), value] });
+	return null;
+};
+//#endregion
+export { HoverBubble };

package/ui/Blocks/CommonGrid/components/gridCells/IconButtonInCell.d.ts

@@ -1,5 +1,4 @@
-import { default as React, FC } from 'react';
-
+import React, { type FC } from 'react';
 type Props = {
     icon?: string;
     isLoading?: boolean;

package/ui/Blocks/CommonGrid/components/gridCells/IconButtonInCell.js

@@ -0,0 +1,34 @@
+import Icon from "../../../../Elements/Icon/Icon.js";
+import { Spinner } from "../../../../Elements/Spinner/Spinner.js";
+import "react";
+import { x } from "@xstyled/styled-components";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { Link } from "react-router-dom";
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/IconButtonInCell.tsx
+const IconButtonInCell = ({ icon, isLoading, onClick, linkTo }) => {
+	return /* @__PURE__ */ jsx(Fragment, { children: isLoading ? /* @__PURE__ */ jsx(Spinner, { variant: "sm" }) : linkTo ? /* @__PURE__ */ jsx(Link, {
+		to: linkTo,
+		"data-cy": `${icon ?? ""}IconBtn`,
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: icon || "warning",
+			size: "16px",
+			fill: "blue2"
+		})
+	}) : /* @__PURE__ */ jsx(x.span, {
+		onClick,
+		"data-cy": `${icon ?? ""}IconBtn`,
+		cursor: "pointer",
+		h: "100%",
+		w: "100%",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: icon || "warning",
+			size: "16px",
+			fill: "blue2"
+		})
+	}) });
+};
+//#endregion
+export { IconButtonInCell };

package/ui/Blocks/CommonGrid/components/gridCells/ImageCell.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { DataCellProps } from '../../types';
-
+import { type FC } from 'react';
+import { type DataCellProps } from '../../types';
 type Props = DataCellProps<{}> & {
     onClick?: () => void;
 };

package/ui/Blocks/CommonGrid/components/gridCells/ImageCell.js

@@ -0,0 +1,31 @@
+import Image from "../../../../Elements/Image/Image.js";
+import "react";
+import styled$1 from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+import get from "lodash/fp/get.js";
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/ImageCell.tsx
+const ImageWrapper = styled$1.div`
+  ${({ onClick }) => onClick ? "cursor: pointer;" : ""}
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const StyledImage = styled$1(Image)`
+  max-width: 100%;
+  height: 30px;
+  border: 1x solid;
+  border-radius: md;
+  border-color: lightGray3;
+`;
+const ImageCell = ({ rowData, column, onClick }) => {
+	const value = get(column.name, rowData);
+	if (value?.[0]?.urlSmall) return /* @__PURE__ */ jsx(ImageWrapper, {
+		onClick,
+		children: /* @__PURE__ */ jsx(StyledImage, { src: value[0].urlSmall })
+	});
+	return null;
+};
+//#endregion
+export { ImageCell };

package/ui/Blocks/CommonGrid/components/gridCells/LinkInCell.d.ts

@@ -1 +1 @@
-export declare const LinkInCell: import('styled-components').StyledComponent<typeof import('react-router-dom').Link, import('@xstyled/system').Theme, import('../../../../Elements/SimpleLink/SimpleLink').Props, never>;
+export declare const LinkInCell: import("styled-components").StyledComponent<typeof import("react-router-dom").Link, import("@xstyled/system").Theme, import("../../../../Elements/SimpleLink/SimpleLink").Props, never>;

package/ui/Blocks/CommonGrid/components/gridCells/LinkInCell.js

@@ -0,0 +1,9 @@
+import StyledLink from "../../../../Elements/SimpleLink/SimpleLink.js";
+import "../../../../Elements/SimpleLink/index.js";
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/LinkInCell.tsx
+const LinkInCell = styled$1(StyledLink)`
+  text-decoration: underline;
+`;
+//#endregion
+export { LinkInCell };

package/ui/Blocks/CommonGrid/components/gridCells/RemoveItem.d.ts

@@ -1,8 +1,7 @@
-import { FC } from 'react';
-import { DataCellProps } from '../../types';
-
+import type { FC } from 'react';
+import { type DataCellProps } from '../../types';
 type Props = DataCellProps<any>;
-export declare const Wrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const Trigger: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Wrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Trigger: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 export declare const RemoveCell: FC<Props>;
 export {};

package/ui/Blocks/CommonGrid/components/gridCells/RemoveItem.js

@@ -0,0 +1,41 @@
+import Icon from "../../../../Elements/Icon/Icon.js";
+import React from "react";
+import styled$1 from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Trans } from "@lingui/react";
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/RemoveItem.tsx
+const Wrap = styled$1.div`
+  width: 100%;
+`;
+const Trigger = styled$1.div`
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+  color: gray;
+  font-weight: bold;
+  font-size: 10px;
+  & .faIcon {
+    margin-right: 4px;
+  }
+`;
+const RemoveCell = ({ rowData, onRowAction }) => {
+	const onRemoveClick = React.useCallback(() => {
+		onRowAction?.(rowData.id, "remove", rowData);
+	}, [rowData, onRowAction]);
+	if (rowData?.product?.type === "virtual") return /* @__PURE__ */ jsx(Trans, {
+		id: "dataGrid.columnLot.NA",
+		message: "N/A"
+	});
+	return /* @__PURE__ */ jsx(Wrap, { children: /* @__PURE__ */ jsxs(Trigger, {
+		onClick: onRemoveClick,
+		children: [/* @__PURE__ */ jsx(Icon, {
+			icon: "deleteX",
+			size: "12px"
+		}), /* @__PURE__ */ jsx(Trans, {
+			id: "dataGrid.deleteItem",
+			message: "Delete"
+		})]
+	}) });
+};
+//#endregion
+export { RemoveCell, Trigger, Wrap };

package/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { DataCellProps, ActionColumn, UxState, GridActionsType } from '../../types';
-
+import type { FC } from 'react';
+import type { DataCellProps, ActionColumn, UxState, GridActionsType } from '../../types';
 type Props = DataCellProps<{
     id: string;
 }> & {

package/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.js

@@ -0,0 +1,79 @@
+import Checkbox_default from "../../../../Forms/Checkbox/index.js";
+import { IconButtonInCell } from "./IconButtonInCell.js";
+import { useCallback, useMemo } from "react";
+import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isFunction } from "lodash/fp.js";
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.tsx
+const RowActionsCell = ({ actionColumnDefinition, rowData, addRowNumbers, rowIndex, checkedRows, withCheckboxes, onUxChange, onRowAction }) => {
+	const rowDataId = rowData?.id;
+	const canEdit = isFunction(actionColumnDefinition?.canRowEdit) ? actionColumnDefinition?.canRowEdit(rowData) : actionColumnDefinition?.canRowEdit;
+	const canRead = isFunction(actionColumnDefinition?.canRowRead) ? actionColumnDefinition?.canRowRead(rowData) : actionColumnDefinition?.canRowRead;
+	const onClick = useCallback(() => {
+		const action = canEdit ? "row_edit" : "row_read";
+		onRowAction?.(rowData?.id, action, rowData);
+	}, [
+		canEdit,
+		onRowAction,
+		rowData
+	]);
+	const linkTo = useMemo(() => {
+		const mode = canEdit ? "edit" : "read";
+		return actionColumnDefinition?.createLink?.({
+			mode,
+			id: rowData?.id
+		});
+	}, [canEdit, rowData?.id]);
+	const isChecked = !!checkedRows?.[rowDataId];
+	const onCheckboxChange = useCallback(() => {
+		const newCheckedRows = { ...checkedRows || {} };
+		if (!isChecked) newCheckedRows[rowDataId] = true;
+		else delete newCheckedRows[rowDataId];
+		onUxChange?.("checkedRows", newCheckedRows);
+	}, [
+		onUxChange,
+		isChecked,
+		rowDataId,
+		checkedRows
+	]);
+	const handleOnClick = useCallback(() => {
+		if (isFunction(onClick)) onClick();
+	}, [onClick]);
+	return /* @__PURE__ */ jsxs(x.div, {
+		w: "100%",
+		display: "flex",
+		gap: "16px",
+		pl: "4px",
+		pr: "4px",
+		children: [
+			withCheckboxes && /* @__PURE__ */ jsx(x.div, {
+				w: "100%",
+				children: /* @__PURE__ */ jsx(Checkbox_default, {
+					checked: isChecked,
+					onChange: onCheckboxChange,
+					label: ""
+				})
+			}),
+			addRowNumbers && /* @__PURE__ */ jsx(x.div, {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				pr: "8px",
+				w: "100%",
+				children: rowIndex
+			}),
+			canEdit && /* @__PURE__ */ jsx(IconButtonInCell, {
+				icon: "pen",
+				onClick: handleOnClick,
+				linkTo
+			}, "edit"),
+			!canEdit && canRead && /* @__PURE__ */ jsx(IconButtonInCell, {
+				icon: "chevronRight",
+				onClick: handleOnClick,
+				linkTo
+			}, "read")
+		]
+	});
+};
+//#endregion
+export { RowActionsCell };

package/ui/Blocks/CommonGrid/components/gridCells/StringJoin.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { DataCellProps } from '../../types';
-
+import { type FC } from 'react';
+import { type DataCellProps } from '../../types';
 type Props = DataCellProps<{}>;
 export declare const StringJoinCell: FC<Props>;
 export {};

package/ui/Blocks/CommonGrid/components/gridCells/StringJoin.js

@@ -0,0 +1,10 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import get from "lodash/fp/get.js";
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/StringJoin.tsx
+const StringJoinCell = ({ rowData, column }) => {
+	const values = get(column.name, rowData);
+	return values?.length ? /* @__PURE__ */ jsx("span", { children: values.join(", ") }) : null;
+};
+//#endregion
+export { StringJoinCell };

package/ui/Blocks/CommonGrid/components/gridCells/SwitchInCell.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-import { Props } from '../../../../Elements/Toggle/types';
-
+import type { FC } from 'react';
+import { type Props } from '../../../../Elements/Toggle/types';
 export declare const SwitchInCell: FC<Props>;

package/ui/Blocks/CommonGrid/components/gridCells/SwitchInCell.js

@@ -0,0 +1,12 @@
+import Toggle from "../../../../Elements/Toggle/Toggle.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/SwitchInCell.tsx
+const SwitchInCell = (props) => {
+	return /* @__PURE__ */ jsx(Toggle, {
+		...props,
+		variant: "grid"
+	});
+};
+//#endregion
+export { SwitchInCell };

package/ui/Blocks/CommonGrid/components/gridCells/ToggleCell.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { DataCellProps } from '../../types';
-
+import { type FC } from 'react';
+import { type DataCellProps } from '../../types';
 type SwitchData = {
     id: string;
 };

package/ui/Blocks/CommonGrid/components/gridCells/ToggleCell.js

@@ -0,0 +1,33 @@
+import { SwitchInCell } from "./SwitchInCell.js";
+import React, { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+import get from "lodash/fp/get.js";
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/ToggleCell.tsx
+const ToggleCell = ({ rowData, column, onRowAction }) => {
+	const inverse = !!column?.passProps?.inverse;
+	const rawValue = get(column.name, rowData);
+	const value = inverse ? !rawValue : !!rawValue;
+	const actionName = `toggle_${column.name}`;
+	const [isChecked, setIsChecked] = React.useState(value);
+	React.useEffect(() => {
+		setIsChecked(value);
+	}, [rowData.id]);
+	return /* @__PURE__ */ jsx(SwitchInCell, {
+		checked: isChecked,
+		onChange: useCallback(() => {
+			if (!onRowAction) return;
+			const ret = onRowAction(rowData.id, actionName, !isChecked, rowData);
+			if (ret) ret.then(() => {
+				setIsChecked(!isChecked);
+			});
+			else setIsChecked(!isChecked);
+		}, [
+			onRowAction,
+			rowData.id,
+			actionName,
+			isChecked
+		])
+	});
+};
+//#endregion
+export { ToggleCell };

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

@@ -0,0 +1,15 @@
+import { DateCell } from "./Date.js";
+import { DateTimeCell } from "./DateTime.js";
+import { StringJoinCell } from "./StringJoin.js";
+import { BoolIconCell } from "./BoolIcon.js";
+import { RemoveCell } from "./RemoveItem.js";
+import { LinkInCell } from "./LinkInCell.js";
+import { ButtonInCell } from "./ButtonInCell.js";
+import { IconButtonInCell } from "./IconButtonInCell.js";
+import { SwitchInCell } from "./SwitchInCell.js";
+import { ImageCell } from "./ImageCell.js";
+import { EnumInCell } from "./EnumInCell.js";
+import { HoverBubble } from "./HoverBubble.js";
+import { RowActionsCell } from "./RowActionsCell.js";
+import { ToggleCell } from "./ToggleCell.js";
+export { BoolIconCell, ButtonInCell, DateCell, DateTimeCell, EnumInCell, HoverBubble, IconButtonInCell, ImageCell, LinkInCell, RemoveCell, RowActionsCell, StringJoinCell, SwitchInCell, ToggleCell };

package/ui/Blocks/CommonGrid/components/icons/Edit.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 declare const Edit: FC<any>;
 export default Edit;

package/ui/Blocks/CommonGrid/components/icons/Edit.js

@@ -0,0 +1,14 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/icons/Edit.tsx
+const Edit = (props) => /* @__PURE__ */ jsx("svg", {
+	"data-icon": "edit",
+	viewBox: "0 0 16 16",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M3.25 10.26l2.47 2.47 6.69-6.69-2.46-2.48-6.7 6.7zM.99 14.99l3.86-1.39-2.46-2.44-1.4 3.83zm12.25-14c-.48 0-.92.2-1.24.51l-1.44 1.44 2.47 2.47 1.44-1.44c.32-.32.51-.75.51-1.24.01-.95-.77-1.74-1.74-1.74z",
+		fillRule: "evenodd"
+	})
+});
+//#endregion
+export { Edit as default };

package/ui/Blocks/CommonGrid/components/icons/EyeOpen.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-
+import type { FC } from 'react';
 declare const EyeOpen: FC<any>;
 export default EyeOpen;

package/ui/Blocks/CommonGrid/components/icons/EyeOpen.js

@@ -0,0 +1,14 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/icons/EyeOpen.tsx
+const EyeOpen = (props) => /* @__PURE__ */ jsx("svg", {
+	"data-icon": "eye-open",
+	viewBox: "0 0 16 16",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M8.002 7.003a1.003 1.003 0 000 2.005 1.003 1.003 0 000-2.005zm7.988.972v-.02-.01-.02-.02a.675.675 0 00-.17-.36c-.509-.673-1.118-1.264-1.737-1.806-1.328-1.173-2.846-2.155-4.523-2.546a6.702 6.702 0 00-2.925-.06c-.889.18-1.738.541-2.546.992C2.84 4.837 1.692 5.81.694 6.902c-.18.211-.36.411-.53.632a.742.742 0 000 .932c.51.672 1.119 1.264 1.738 1.805 1.328 1.173 2.846 2.156 4.523 2.547.968.23 1.947.24 2.925.04.889-.18 1.738-.542 2.546-.993 1.248-.712 2.397-1.684 3.395-2.777.18-.2.37-.411.54-.632.09-.1.149-.23.169-.36v-.02-.02-.01-.02-.03c0-.01-.01-.01-.01-.02zm-7.988 3.038a2.998 2.998 0 01-2.995-3.008 2.998 2.998 0 012.995-3.008 2.998 2.998 0 012.996 3.008 2.998 2.998 0 01-2.996 3.008z",
+		fillRule: "evenodd"
+	})
+});
+//#endregion
+export { EyeOpen as default };

package/ui/Blocks/CommonGrid/components/icons/Sorting.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 export declare const SortingUp: FC<any>;
 export declare const SortingDown: FC<any>;

package/ui/Blocks/CommonGrid/components/icons/Sorting.js

@@ -0,0 +1,21 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/icons/Sorting.tsx
+const SortingUp = (props) => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 16 16",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z",
+		fillRule: "evenodd"
+	})
+});
+const SortingDown = (props) => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 16 16",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z",
+		fillRule: "evenodd"
+	})
+});
+//#endregion
+export { SortingDown, SortingUp };

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

@@ -1,5 +1,4 @@
 import { MouseEvent } from 'react';
-
 type Props = {
     handleRowClick: (e: MouseEvent<HTMLDivElement>) => void;
 };

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

@@ -0,0 +1,21 @@
+import { useState } from "react";
+//#region packages/ui/Blocks/CommonGrid/components/utils.tsx
+const useTimeMeasurement = ({ handleRowClick }) => {
+	const [startTime, setStartTime] = useState(0);
+	const handleMouseDown = () => {
+		setStartTime(Date.now());
+	};
+	const handleMouseUp = (e) => {
+		if (startTime !== 0) {
+			const duration = Date.now() - startTime;
+			if (duration > 0 && duration < 200) handleRowClick(e);
+			setStartTime(0);
+		}
+	};
+	return {
+		handleMouseDown,
+		handleMouseUp
+	};
+};
+//#endregion
+export { useTimeMeasurement };

package/ui/Blocks/CommonGrid/hooks/useAddFilter.d.ts

@@ -1,5 +1,4 @@
-import { GridActionsType, ColumnDefinition } from '../types';
-
+import type { GridActionsType, ColumnDefinition } from '../types';
 type AddFilterRet = (value: any, column: ColumnDefinition, others?: any) => void;
 export declare const useAddFilter: (onChange: Required<GridActionsType>["addFilter"]) => AddFilterRet;
 export {};

package/ui/Blocks/CommonGrid/hooks/useAddFilter.js

@@ -0,0 +1,17 @@
+import { createFilterType, getFilterName } from "../utils/index.js";
+import { useCallback } from "react";
+//#region packages/ui/Blocks/CommonGrid/hooks/useAddFilter.ts
+const useAddFilter = (onChange) => {
+	return useCallback((value, column, others) => {
+		if (onChange) {
+			const filterProps = {
+				type: createFilterType(column),
+				filterExtraProps: column.filterExtraProps || {},
+				computedValue: column.getFilterCriteria ? column.getFilterCriteria(value) : null
+			};
+			onChange(getFilterName(column), value, filterProps, others);
+		}
+	}, [onChange]);
+};
+//#endregion
+export { useAddFilter };

package/ui/Blocks/CommonGrid/hooks/useColumnSizes.d.ts

@@ -1,6 +1,5 @@
-import { default as React } from 'react';
+import React from 'react';
 import { CommonGridProps, GridActionsType, GridSelectorsType } from '../types';
-
 type ReturnProps = {
     displayColumnsWidth: {
         [anyColumn: string]: number;