slick-table 1.0.18 → 1.1.1

package/dist/types/shared/lib/slickgrid/lib/sorting/ColumnSorter.d.ts

@@ -6,6 +6,7 @@ export declare class ColumnSorter implements IColumnSorter {
         emptyValue: string;
         dates(a: string, b: string): number;
         numbers(a?: string | number | null, b?: string | number | null): number;
+        stringsNumeric(a?: string | null, b?: string | null): number;
         strings(a?: string, b?: string): number;
         numbersWithSymbols(a?: string, b?: string): number;
     };

package/dist/types/shared/lib/slickgrid/lib/sorting/ColumnSorter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnSorter.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/lib/slickgrid/lib/sorting/ColumnSorter.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,eAAe,EACf,gBAAgB,EAEhB,cAAc,EAEd,MAAM,WAAW,CAAC;AAInB,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAW,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAE1D,qBAAa,YAAa,YAAW,aAAa;IACjD,SAAS,CAAC,IAAI;;;;;;MAAQ;IACtB,OAAO,CAAC,aAAa,CAAgD;IAE9D,eAAe,CAAC,OAAO,EAAE,MAAM,IAMpC,IAAI,cAAc,CAAC,gBAAgB,GAAG,eAAe,CAAC,EACtD,MAAM,gBAAgB,GAAG,eAAe,KACtC,IAAI;IA0ER,SAAS,CAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM;IAIrE,cAAc,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IA6B/C,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM;CAiBjE;AAED,eAAO,MAAM,YAAY,cAAqB,CAAC;AAE/C,UAAU,aAAa;IACtB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,cAAc,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;CACzC"}
+{"version":3,"file":"ColumnSorter.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/lib/slickgrid/lib/sorting/ColumnSorter.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,eAAe,EACf,gBAAgB,EAEhB,cAAc,EAEd,MAAM,WAAW,CAAC;AAInB,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAW,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAE1D,qBAAa,YAAa,YAAW,aAAa;IACjD,SAAS,CAAC,IAAI;;;;;;;MAAQ;IACtB,OAAO,CAAC,aAAa,CAAgD;IAE9D,eAAe,CAAC,OAAO,EAAE,MAAM,IAMpC,IAAI,cAAc,CAAC,gBAAgB,GAAG,eAAe,CAAC,EACtD,MAAM,gBAAgB,GAAG,eAAe,KACtC,IAAI;IA0ER,SAAS,CAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM;IAIrE,cAAc,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IA6B/C,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM;CAoBjE;AAED,eAAO,MAAM,YAAY,cAAqB,CAAC;AAE/C,UAAU,aAAa;IACtB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,cAAc,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;CACzC"}

package/dist/types/shared/lib/sorting/Sort.d.ts

@@ -2,6 +2,7 @@ declare class Sort implements ISort {
     emptyValue: string;
     dates(a: string, b: string): number;
     numbers(a?: string | number | null, b?: string | number | null): number;
+    stringsNumeric(a?: string | null, b?: string | null): number;
     strings(a?: string, b?: string): number;
     numbersWithSymbols(a?: string, b?: string): number;
 }

package/dist/types/shared/lib/sorting/Sort.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sort.d.ts","sourceRoot":"","sources":["../../../../../src/shared/lib/sorting/Sort.ts"],"names":[],"mappings":"AAEA,cAAM,IAAK,YAAW,KAAK;IAC1B,UAAU,SAAc;IACxB,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM;IAKnC,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM;IAGvE,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;IAKvC,kBAAkB,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;CAKlD;AAED,eAAO,MAAM,IAAI,MAAa,CAAC;AAE/B,UAAU,KAAK;IACd,OAAO,IAAI,MAAM,CAAC;IAClB,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC;IACxE,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC"}
+{"version":3,"file":"Sort.d.ts","sourceRoot":"","sources":["../../../../../src/shared/lib/sorting/Sort.ts"],"names":[],"mappings":"AAEA,cAAM,IAAK,YAAW,KAAK;IAC1B,UAAU,SAAc;IACxB,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM;IAKnC,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM;IAGvE,cAAc,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM;IAM5D,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;IAKvC,kBAAkB,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;CAKlD;AAED,eAAO,MAAM,IAAI,MAAa,CAAC;AAE/B,UAAU,KAAK;IACd,OAAO,IAAI,MAAM,CAAC;IAClB,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC;IACxE,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC"}

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

@@ -10,7 +10,9 @@ export declare enum ESortType {
     NUMBER = 2,
     /** sort as number, take formatter into account */
     NUMBER_FORMATTED = 3,
+    /** treats numeric substrings as actual numbers, rather than just characters */
+    TEXT_NUMERIC = 4,
     /** sort as text */
-    TEXT = 4
+    TEXT = 5
 }
 //# sourceMappingURL=ESortType.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ESortType.d.ts","sourceRoot":"","sources":["../../../../../src/shared/model/enums/ESortType.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,oBAAY,SAAS;IACpB,mBAAmB;IACnB,IAAI,IAAI;IACR,yDAAyD;IACzD,MAAM,IAAA;IACN,kDAAkD;IAClD,gBAAgB,IAAA;IAChB,mBAAmB;IACnB,IAAI,IAAA;CACJ"}
+{"version":3,"file":"ESortType.d.ts","sourceRoot":"","sources":["../../../../../src/shared/model/enums/ESortType.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,oBAAY,SAAS;IACpB,mBAAmB;IACnB,IAAI,IAAI;IACR,yDAAyD;IACzD,MAAM,IAAA;IACN,kDAAkD;IAClD,gBAAgB,IAAA;IAChB,+EAA+E;IAC/E,YAAY,IAAA;IACZ,mBAAmB;IACnB,IAAI,IAAA;CACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slick-table",
-  "version": "1.0.18",
+  "version": "1.1.1",
   "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,
+};