slick-table 1.0.17 → 1.1.0

package/dist/types/shared/lib/slickgrid/lib/editors/Autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../../src/shared/lib/slickgrid/lib/editors/Autocomplete/Autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,MAAM,EACN,eAAe,EACf,sBAAsB,EAEtB,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,8BAAsB,YAAa,YAAW,MAAM;IACnD,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IAC9C,SAAS,CAAC,YAAY,SAAM;IAC5B,SAAS,CAAC,YAAY,SAAM;IAC5B,SAAS,CAAC,EAAE,SAAkB;IAC9B,SAAS,CAAC,KAAK,EAAE,gBAAgB,CAAmC;IAC7D,cAAc,EAAE,MAAM,EAAE,CAA6C;IAC5E,SAAS,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAChC,SAAS,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAE5B,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAGvC,YAAY,IAAI,IAAI;IAKpB,OAAO,IAAI,IAAI;IAMf,KAAK,IAAI,IAAI;IAGb,IAAI,IAAI,IAAI;IAWZ,cAAc,IAAI,OAAO;IAMzB,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI;IAOhC,WAAW,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAiBvC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IACzC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IACpC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA2BrC,YAAY,CAAC,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,GAAG,IAAI;IAKvD,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAW5C,cAAc,IAAI,MAAM;IAGxB,SAAS,CAAC,IAAI,EAAE,gBAAgB,CAAC,cAAc,CAAC,GAAG,IAAI;IASvD,QAAQ,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAC1C,QAAQ,IAAI,sBAAsB;CAelC"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../../src/shared/lib/slickgrid/lib/editors/Autocomplete/Autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,MAAM,EACN,eAAe,EACf,sBAAsB,EAEtB,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,8BAAsB,YAAa,YAAW,MAAM;IACnD,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IAC9C,SAAS,CAAC,YAAY,SAAM;IAC5B,SAAS,CAAC,YAAY,SAAM;IAC5B,SAAS,CAAC,EAAE,SAAkB;IAC9B,SAAS,CAAC,KAAK,EAAE,gBAAgB,CAAmC;IAC7D,cAAc,EAAE,MAAM,EAAE,CAA6C;IAC5E,SAAS,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAChC,SAAS,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAE5B,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAGvC,YAAY,IAAI,IAAI;IAKpB,OAAO,IAAI,IAAI;IAMf,KAAK,IAAI,IAAI;IAGb,IAAI,IAAI,IAAI;IAWZ,cAAc,IAAI,OAAO;IAMzB,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI;IAOhC,WAAW,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAiBvC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IACzC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IACpC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA8BrC,YAAY,CAAC,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,GAAG,IAAI;IAKvD,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAW5C,cAAc,IAAI,MAAM;IAGxB,SAAS,CAAC,IAAI,EAAE,gBAAgB,CAAC,cAAc,CAAC,GAAG,IAAI;IASvD,QAAQ,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAC1C,QAAQ,IAAI,sBAAsB;CAelC"}

package/dist/types/shared/model/enums/EKey.d.ts

@@ -4,6 +4,7 @@ export declare enum EKey {
     ArrowRight = "ArrowRight",
     ArrowUp = "ArrowUp",
     Control = "Control",
-    Enter = "Enter"
+    Enter = "Enter",
+    Tab = "Tab"
 }
 //# sourceMappingURL=EKey.d.ts.map

package/dist/types/shared/model/enums/EKey.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EKey.d.ts","sourceRoot":"","sources":["../../../../../src/shared/model/enums/EKey.ts"],"names":[],"mappings":"AAAA,oBAAY,IAAI;IACf,SAAS,cAAc;IACvB,SAAS,cAAc;IACvB,UAAU,eAAe;IACzB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,KAAK,UAAU;CACf"}
+{"version":3,"file":"EKey.d.ts","sourceRoot":"","sources":["../../../../../src/shared/model/enums/EKey.ts"],"names":[],"mappings":"AAAA,oBAAY,IAAI;IACf,SAAS,cAAc;IACvB,SAAS,cAAc;IACvB,UAAU,eAAe;IACzB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,GAAG,QAAQ;CACX"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slick-table",
-  "version": "1.0.17",
+  "version": "1.1.0",
   "description": "Enhanced version of SlickGrid library",
   "private": false,
   "type": "module",
@@ -16,7 +16,8 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "author": "Alexandr Chazov",
   "license": "ISC",
@@ -35,7 +36,11 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "pack": "npm pack --dry-run",
+    "version:patch": "npm version patch",
+    "version:minor": "npm version minor",
+    "version:major": "npm version major"
   },
   "peerDependencies": {
     "@mui/material": "^6.1.6",

package/src/App.tsx

@@ -0,0 +1,9 @@
+import "pikaday/css/pikaday.css";
+
+import { Main } from "pages/main";
+
+function App() {
+	return <Main />;
+}
+
+export default App;

package/src/app/styles/global.scss

@@ -0,0 +1,31 @@
+:root {
+	box-sizing: border-box;
+}
+
+*,
+::before,
+::after {
+	box-sizing: inherit;
+}
+
+body {
+	--primary-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+	'Helvetica Neue', sans-serif;
+	margin: 0;
+	font-family: var(--primary-font-family);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+code {
+	font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+@keyframes rotation {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

package/src/app/styles/slickgrid.scss

@@ -0,0 +1,13 @@
+@use 'slickgrid/dist/styles/sass/slick-alpine-theme' as *;
+@use 'slickgrid/dist/styles/sass/slick.cellmenu' as *;
+@use 'slickgrid/dist/styles/sass/slick.columnpicker' as *;
+@use 'slickgrid/dist/styles/sass/slick.contextmenu' as *;
+@use 'slickgrid/dist/styles/sass/slick.customtooltip' as *;
+@use 'slickgrid/dist/styles/sass/slick.draggablegrouping' as *;
+@use 'slickgrid/dist/styles/sass/slick.grid' as *;
+@use 'slickgrid/dist/styles/sass/slick.gridmenu' as *;
+@use 'slickgrid/dist/styles/sass/slick.headerbuttons' as *;
+@use 'slickgrid/dist/styles/sass/slick.headermenu' as *;
+@use 'slickgrid/dist/styles/sass/slick.pager' as *;
+@use 'slickgrid/dist/styles/sass/slick.rowdetailview' as *;
+@use 'slickgrid/dist/styles/sass/slick-icons' as *;

package/src/app/types/index.d.ts

@@ -0,0 +1,9 @@
+import Sortable from "sortablejs";
+
+export {};
+
+declare global {
+	interface Window {
+		Sortable: typeof Sortable;
+	}
+}

package/src/entities/popup/index.ts

@@ -0,0 +1,2 @@
+export { makeVisible } from "./lib";
+export { Overlay, Popup } from "./ui";

package/src/entities/popup/lib/index.ts

@@ -0,0 +1 @@
+export { makeVisible } from "./visibility";

package/src/entities/popup/lib/visibility/index.ts

@@ -0,0 +1 @@
+export { makeVisible } from "./makeVisible";

package/src/entities/popup/lib/visibility/makeVisible.ts

@@ -0,0 +1,9 @@
+export function makeVisible(menu: HTMLElement, x: number, y: number): void {
+	const { scrollWidth } = document.documentElement;
+	const { left, right } = menu.getBoundingClientRect();
+	const menuWidth = right - left;
+	const outOfScreen = x + right >= scrollWidth;
+	menu.style.left = `${outOfScreen ? x - menuWidth : x}px`;
+	menu.style.top = `${y}px`;
+	menu.style.visibility = "visible";
+}

package/src/entities/popup/ui/Overlay/Overlay.style.ts

@@ -0,0 +1,14 @@
+import { Box, styled } from "@mui/material";
+
+const Wrapper = styled(Box)({
+	position: "fixed",
+	top: "0",
+	left: "0",
+	right: "0",
+	bottom: "0",
+	zIndex: "2",
+});
+
+export default {
+	Wrapper,
+};

package/src/entities/popup/ui/Overlay/Overlay.test.tsx

@@ -0,0 +1,19 @@
+import { fireEvent, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Overlay } from "./Overlay";
+
+describe("Overlay", () => {
+	it("should call setIsOpened with false on click or right-click", async () => {
+		const user = userEvent.setup();
+		const setIsOpened = jest.fn();
+		const { getByTestId } = render(<Overlay setIsOpened={setIsOpened} />);
+		const div = getByTestId("overlay");
+		expect(div).toBeInTheDocument();
+		await user.click(div);
+		expect(setIsOpened).toHaveBeenCalledWith(false);
+		fireEvent.contextMenu(div);
+		expect(setIsOpened).toHaveBeenCalledWith(false);
+		expect(setIsOpened).toHaveBeenCalledTimes(2);
+	});
+});

package/src/entities/popup/ui/Overlay/Overlay.tsx

@@ -0,0 +1,20 @@
+import { Dispatch, FC, SetStateAction } from "react";
+
+import Styled from "./Overlay.style";
+
+export const Overlay: FC<IProps> = ({ setIsOpened }) => {
+	return (
+		<Styled.Wrapper
+			onClick={() => setIsOpened(false)}
+			onContextMenu={(e) => {
+				e.preventDefault();
+				setIsOpened(false);
+			}}
+			data-testid="overlay"
+		></Styled.Wrapper>
+	);
+};
+
+interface IProps {
+	setIsOpened: Dispatch<SetStateAction<boolean>>;
+}

package/src/entities/popup/ui/Overlay/index.ts

@@ -0,0 +1 @@
+export { Overlay } from "./Overlay";

package/src/entities/popup/ui/Popup.style.ts

@@ -0,0 +1,17 @@
+import { Box, styled } from "@mui/material";
+
+const Wrapper = styled(Box)({
+	visibility: "hidden",
+	borderRadius: "5px",
+	backgroundColor: "#FFFFFF",
+	boxShadow: "1px 1px 1px 1px gray",
+	padding: "0.5em",
+	position: "absolute",
+	zIndex: 10,
+	userSelect: "none",
+	fontSize: "inherit",
+	top: 0,
+	left: 0,
+});
+
+export default { Wrapper };

package/src/entities/popup/ui/Popup.tsx

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from "react";
+
+import Styled from "./Popup.style";
+
+export const Popup: FC<IProps> = ({ children, id }) => {
+	return <Styled.Wrapper id={id}>{children}</Styled.Wrapper>;
+};
+
+interface IProps {
+	children: ReactNode;
+	id: string;
+}

package/src/entities/popup/ui/index.ts

@@ -0,0 +1,2 @@
+export { Overlay } from "./Overlay";
+export { Popup } from "./Popup";

package/src/entities/skeleton/Skeleton.style.ts

@@ -0,0 +1,10 @@
+import { Skeleton, styled } from "@mui/material";
+
+const StyledSkeleton = styled(Skeleton)({
+	width: "100%",
+	borderRadius: "10px",
+});
+
+export default {
+	Skeleton: StyledSkeleton,
+};

package/src/entities/skeleton/Skeleton.tsx

@@ -0,0 +1,11 @@
+import { FC } from "react";
+
+import Styled from "./Skeleton.style";
+
+export const Skeleton: FC<IProps> = ({ height = "calc(100% - 1em)" }) => {
+	return <Styled.Skeleton variant="rectangular" height={height} />;
+};
+
+interface IProps {
+	height?: string;
+}

package/src/entities/skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton } from "./Skeleton";

package/src/features/column-filters/index.ts

@@ -0,0 +1 @@
+export { ColumnFilters } from "./ui";

package/src/features/column-filters/lib/filter/applyFilter.ts

@@ -0,0 +1,25 @@
+import { debounce } from "shared/lib/debounce";
+import { eventOpenColumnFilters, headerButtons } from "shared/lib/slickgrid";
+import { IColumnFilterValue } from "shared/model/types";
+
+function setColumnFilter(value: IColumnFilterValue) {
+	const { columnId, table } = eventOpenColumnFilters;
+	if (!columnId || !table) return;
+	const args = table.filter.args;
+	if (!args.columnFilters) return;
+	table.filter.args = {
+		...args,
+		columnFilters: {
+			...args.columnFilters,
+			[columnId]: {
+				...args.columnFilters[columnId],
+				value,
+			},
+		},
+	};
+	value[1] || value[2]
+		? headerButtons.highlightColumn(table, columnId)
+		: headerButtons.resetColumn(table, columnId);
+}
+
+export const applyFilter = debounce(setColumnFilter);

package/src/features/column-filters/lib/filter/index.ts

@@ -0,0 +1 @@
+export { applyFilter } from "./applyFilter";

package/src/features/column-filters/lib/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useOpenMenu } from "./useOpenMenu";
+export { useSubscribeToEvent } from "./useSubscribeToEvent";

package/src/features/column-filters/lib/hooks/useOpenMenu.ts

@@ -0,0 +1,43 @@
+import { Dispatch, SetStateAction, useEffect } from "react";
+
+import { eventOpenColumnFilters } from "shared/lib/slickgrid";
+import { EColumnFilter } from "shared/model/enums";
+import { IColumnFilterValue } from "shared/model/types";
+
+import { makeVisible } from "entities/popup";
+
+import { COLUMN_FILTERS, defaultValue } from "../../model";
+import { firstIn } from "../select";
+
+export function useOpenMenu(
+	isOpened: boolean,
+	setFilterId: Dispatch<SetStateAction<EColumnFilter>>,
+	setValue: Dispatch<SetStateAction<IColumnFilterValue>>,
+) {
+	useEffect(() => {
+		if (!isOpened) return;
+		const menu = document.getElementById(COLUMN_FILTERS);
+		if (!menu) return;
+		const { columnId, group, table, x, y } = eventOpenColumnFilters;
+		const grid = table?.grid;
+		if (!grid) return;
+		const args = table.filter.args;
+		makeVisible(menu, x, y);
+		const { filterId, value } = args.columnFilters?.[columnId] || {};
+		const initialFilterId = filterId || firstIn(group);
+		const initialValue = value || defaultValue;
+		table.filter.args = {
+			...args,
+			columnFilters: {
+				...args.columnFilters,
+				[columnId]: {
+					filterId: initialFilterId,
+					group,
+					value: initialValue,
+				},
+			},
+		};
+		setFilterId(initialFilterId);
+		setValue(initialValue);
+	}, [isOpened]);
+}

package/src/features/column-filters/lib/hooks/useSubscribeToEvent.ts

@@ -0,0 +1,17 @@
+import { Dispatch, SetStateAction, useEffect } from "react";
+
+import { eventOpenColumnFilters } from "shared/lib/slickgrid";
+
+export function useSubscribeToEvent(
+	setIsOpened: Dispatch<SetStateAction<boolean>>,
+) {
+	useEffect(() => {
+		function callback() {
+			setIsOpened(true);
+		}
+		eventOpenColumnFilters.subscribe(callback);
+		return () => {
+			eventOpenColumnFilters.unsubscribe(callback);
+		};
+	}, []);
+}

package/src/features/column-filters/lib/index.ts

@@ -0,0 +1,4 @@
+export { applyFilter } from "./filter";
+export { useOpenMenu, useSubscribeToEvent } from "./hooks";
+export { datePickerProps } from "./props";
+export { firstIn } from "./select";

package/src/features/column-filters/lib/props/datePickerProps.tsx

@@ -0,0 +1,11 @@
+import moment from "moment";
+
+import { dateFormats } from "shared/model/consts";
+import { EDateFormat } from "shared/model/enums";
+
+export function datePickerProps(value: string) {
+	return {
+		format: EDateFormat.ui,
+		value: value ? moment(value, dateFormats) : null,
+	};
+}

package/src/features/column-filters/lib/props/index.ts

@@ -0,0 +1 @@
+export { datePickerProps } from "./datePickerProps";

package/src/features/column-filters/lib/select/firstIn.ts

@@ -0,0 +1,22 @@
+import { EColumnFilter, EColumnFiltersGroup } from "shared/model/enums";
+
+export function firstIn(group: EColumnFiltersGroup): EColumnFilter {
+	switch (group) {
+		case EColumnFiltersGroup.Boolean: {
+			return EColumnFilter.Boolean;
+		}
+		case EColumnFiltersGroup.Date: {
+			return EColumnFilter.DateEqual;
+		}
+		case EColumnFiltersGroup.MultipleSelect: {
+			return EColumnFilter.MultipleSelect;
+		}
+		case EColumnFiltersGroup.Number:
+		case EColumnFiltersGroup.NumberFormatted: {
+			return EColumnFilter.NumberEqual;
+		}
+		case EColumnFiltersGroup.Text: {
+			return EColumnFilter.TextContain;
+		}
+	}
+}

package/src/features/column-filters/lib/select/index.ts

@@ -0,0 +1 @@
+export { firstIn } from "./firstIn";

package/src/features/column-filters/model/consts/defaultValue.ts

@@ -0,0 +1,6 @@
+import { IColumnFilterValue } from "shared/model/types";
+
+export const defaultValue: IColumnFilterValue = {
+	1: "",
+	2: "",
+};

package/src/features/column-filters/model/consts/id.ts

@@ -0,0 +1 @@
+export const COLUMN_FILTERS = "column_filters";

package/src/features/column-filters/model/consts/index.ts

@@ -0,0 +1,3 @@
+export { defaultValue } from "./defaultValue";
+export { COLUMN_FILTERS } from "./id";
+export { label } from "./label";

package/src/features/column-filters/model/consts/label.ts

@@ -0,0 +1,5 @@
+export const label = {
+	filter: "🔎︎ Filter...",
+	from: "🔎︎ From...",
+	to: "🔎︎ To...",
+};

package/src/features/column-filters/model/index.ts

@@ -0,0 +1,2 @@
+export { COLUMN_FILTERS, defaultValue, label } from "./consts";
+export { type IProps } from "./types";

package/src/features/column-filters/model/types/IProps.ts

@@ -0,0 +1,9 @@
+import { Dispatch, SetStateAction } from "react";
+
+import { IColumnFilterValue } from "shared/model/types";
+
+export interface IProps {
+	label: string;
+	setValue: Dispatch<SetStateAction<IColumnFilterValue>>;
+	value: IColumnFilterValue;
+}

package/src/features/column-filters/model/types/index.ts

@@ -0,0 +1 @@
+export { type IProps } from "./IProps";

package/src/features/column-filters/ui/BooleanInput/BooleanInput.style.ts

@@ -0,0 +1,10 @@
+import { Checkbox, FormGroup, styled } from "@mui/material";
+
+const CheckboxStyled = styled(Checkbox)({
+	padding: 0,
+});
+const FormGroupStyled = styled(FormGroup)({
+	margin: "0.5em 0 0 1em",
+});
+
+export default { Checkbox: CheckboxStyled, FormGroup: FormGroupStyled };

package/src/features/column-filters/ui/BooleanInput/BooleanInput.tsx

@@ -0,0 +1,53 @@
+import { FormControlLabel } from "@mui/material";
+import { FC } from "react";
+
+import { IColumnFilterValue } from "shared/model/types";
+
+import { applyFilter } from "../../lib";
+import { IProps } from "../../model";
+
+import Styled from "./BooleanInput.style";
+
+export const BooleanInput: FC<Props> = ({ setValue, value }) => {
+	function onClick(newValue: IColumnFilterValue) {
+		setValue(newValue);
+		applyFilter(newValue);
+	}
+
+	return (
+		<Styled.FormGroup>
+			<FormControlLabel
+				control={
+					<Styled.Checkbox
+						checked={!value[1] && !value[2]}
+						onClick={() => onClick({ 1: "", 2: "" })}
+						size="small"
+					/>
+				}
+				label={"All"}
+			/>
+			<FormControlLabel
+				control={
+					<Styled.Checkbox
+						checked={Boolean(value[1])}
+						onClick={() => onClick({ 1: "true", 2: "" })}
+						size="small"
+					/>
+				}
+				label={"Yes"}
+			/>
+			<FormControlLabel
+				control={
+					<Styled.Checkbox
+						checked={Boolean(value[2])}
+						onClick={() => onClick({ 1: "", 2: "true" })}
+						size="small"
+					/>
+				}
+				label={"No"}
+			/>
+		</Styled.FormGroup>
+	);
+};
+
+type Props = Omit<IProps, "label">;

package/src/features/column-filters/ui/BooleanInput/index.ts

@@ -0,0 +1 @@
+export { BooleanInput } from "./BooleanInput";

package/src/features/column-filters/ui/ButtonReset/ButtonReset.style.ts

@@ -0,0 +1,10 @@
+import { Button, styled } from "@mui/material";
+
+const ButtonStyled = styled(Button)({
+	width: "5em",
+	alignSelf: "flex-end",
+});
+
+export default {
+	Button: ButtonStyled,
+};

package/src/features/column-filters/ui/ButtonReset/ButtonReset.tsx

@@ -0,0 +1,39 @@
+import { Dispatch, FC, SetStateAction } from "react";
+
+import { eventOpenColumnFilters, headerButtons } from "shared/lib/slickgrid";
+import { IColumnFilterValue } from "shared/model/types";
+
+import { defaultValue } from "../../model";
+
+import Styled from "./ButtonReset.style";
+
+export const ButtonReset: FC<IProps> = ({ setIsOpened, setValue, value }) => {
+	function reset() {
+		const { columnId, table } = eventOpenColumnFilters;
+		if (!table) return;
+		const grid = table.grid;
+		if (!grid) return;
+		const args = table.filter.args;
+		delete args.columnFilters?.[columnId];
+		table.filter.args = args;
+		headerButtons.resetColumn(table, columnId);
+		setValue(defaultValue);
+		setIsOpened(false);
+	}
+	return (
+		<Styled.Button
+			disabled={!value[1] && !value[2]}
+			onClick={reset}
+			variant={"outlined"}
+			size={"small"}
+		>
+			Reset
+		</Styled.Button>
+	);
+};
+
+interface IProps {
+	setIsOpened: Dispatch<SetStateAction<boolean>>;
+	setValue: Dispatch<SetStateAction<IColumnFilterValue>>;
+	value: IColumnFilterValue;
+}

package/src/features/column-filters/ui/ButtonReset/index.ts

@@ -0,0 +1 @@
+export { ButtonReset } from "./ButtonReset";

package/src/features/column-filters/ui/ColumnFilters.style.ts

@@ -0,0 +1,12 @@
+import { Box, styled } from "@mui/material";
+
+const Wrapper = styled(Box)({
+	display: "flex",
+	flexDirection: "column",
+	rowGap: "0.5em",
+	width: "12em",
+});
+
+export default {
+	Wrapper,
+};

package/src/features/column-filters/ui/ColumnFilters.tsx

@@ -0,0 +1,44 @@
+import { FC, Fragment, useState } from "react";
+
+import { EColumnFilter } from "shared/model/enums";
+import { IColumnFilterValue } from "shared/model/types";
+
+import { Overlay, Popup } from "entities/popup";
+
+import { useOpenMenu, useSubscribeToEvent } from "../lib";
+import { COLUMN_FILTERS, defaultValue } from "../model";
+import { ButtonReset } from "./ButtonReset";
+import { InputArea } from "./InputArea";
+import { SelectFilter } from "./SelectFilter";
+
+import Styled from "./ColumnFilters.style";
+
+export const ColumnFilters: FC = () => {
+	const [value, setValue] = useState<IColumnFilterValue>(defaultValue);
+	const [filterId, setFilterId] = useState<EColumnFilter>(
+		EColumnFilter.TextContain,
+	);
+	const [isOpened, setIsOpened] = useState(false);
+
+	useSubscribeToEvent(setIsOpened);
+	useOpenMenu(isOpened, setFilterId, setValue);
+
+	if (!isOpened) return null;
+
+	return (
+		<Fragment>
+			<Overlay setIsOpened={setIsOpened} />
+			<Popup id={COLUMN_FILTERS}>
+				<Styled.Wrapper>
+					<SelectFilter filterId={filterId} setFilterId={setFilterId} />
+					<InputArea filterId={filterId} setValue={setValue} value={value} />
+					<ButtonReset
+						setIsOpened={setIsOpened}
+						setValue={setValue}
+						value={value}
+					/>
+				</Styled.Wrapper>
+			</Popup>
+		</Fragment>
+	);
+};