slick-table 0.0.16 → 0.0.18

package/package.json

@@ -1,27 +1,22 @@
 {
   "name": "slick-table",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "Enhanced version of SlickGrid library",
   "private": false,
   "type": "module",
   "main": "dist/index.cjs.js",
+  "module": "./dist/index.es.js",
   "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/types/index.d.ts",
-        "default": "./dist/index.es.js"
-      },
-      "require": {
-        "types": "./dist/types/index.d.ts",
-        "default": "./dist/index.cjs.js"
-      }
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
     },
     "./package.json": "./package.json"
   },
+  "files": ["dist"],
   "author": "Alexandr Chazov",
   "license": "ISC",
-  "module": "./dist/index.cjs.js",
   "homepage": "https://github.com/AlexandrChazov/slickgrid-react#readme",
   "repository": {
     "type": "git",

package/.prettierignore

@@ -1,2 +0,0 @@
-/**
-!/src

package/.prettierrc

@@ -1,22 +0,0 @@
-{
-	"trailingComma": "all",
-	"useTabs": true,
-	"semi": true,
-	"singleQuote": false,
-	"bracketSpacing": true,
-	"arrowParens": "always",
-	"endOfLine": "lf",
-	"importOrder": [
-		"^shared\/[a-zA-Z](.*)$",
-		"^entities\/[a-zA-Z](.*)$",
-		"^features\/[a-zA-Z](.*)$",
-		"^widgets\/[a-zA-Z](.*)$",
-		"^pages\/[a-zA-Z](.*)$",
-		"^app\/[a-zA-Z](.*)$",
-		"(^(.\\/)|^(..\\/)+).*(?<!\\.style)$",
-		"^.*\\.style$"
-	],
-	"importOrderSeparation": true,
-	"importOrderSortSpecifiers": true,
-	"plugins": ["@trivago/prettier-plugin-sort-imports"]
-}

package/eslint.config.js

@@ -1,23 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { globalIgnores } from 'eslint/config'
-
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-])

package/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Slickgrid</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <div id="portal-root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/src/App.tsx

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

package/src/app/styles/global.scss

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

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

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

package/src/entities/portal/index.ts

@@ -1,3 +0,0 @@
-export { makeVisible } from "./lib";
-export { PORTAL_ID } from "./model";
-export { Portal } from "./ui";

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

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

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

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

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

@@ -1,9 +0,0 @@
-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/portal/model/index.ts

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

package/src/entities/portal/model/portalId.ts

@@ -1 +0,0 @@
-export const PORTAL_ID = "portal-container";

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

@@ -1,14 +0,0 @@
-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/portal/ui/Overlay/Overlay.test.tsx

@@ -1,19 +0,0 @@
-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/portal/ui/Overlay/Overlay.tsx

@@ -1,20 +0,0 @@
-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/portal/ui/Overlay/index.ts

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

package/src/entities/portal/ui/Portal.style.ts

@@ -1,20 +0,0 @@
-import { Box, styled } from "@mui/material";
-
-const Content = styled(Box)(({ theme }) => ({
-	visibility: "hidden",
-	color: theme.palette.text.primary,
-	backgroundColor: theme.palette.background.default,
-	borderRadius: "5px",
-	boxShadow: "1px 1px 1px 1px gray",
-	padding: "0.5em",
-	position: "absolute",
-	zIndex: 10,
-	userSelect: "none",
-	fontSize: "inherit",
-	top: 0,
-	left: 0,
-}));
-
-export default {
-	Content,
-};

package/src/entities/portal/ui/Portal.test.tsx

@@ -1,48 +0,0 @@
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { FC } from "react";
-
-import { Portal } from "./Portal";
-
-const Child: FC = () => {
-	return <div data-testid={"child-component"}></div>;
-};
-
-describe("Portal", () => {
-	const setIsOpened = jest.fn();
-	const portalRoot = document.createElement("div");
-	portalRoot.id = "portal-root";
-	document.body.appendChild(portalRoot);
-
-	afterAll(() => {
-		jest.clearAllMocks();
-	});
-
-	it("should render children and overlay in the portal", async () => {
-		const user = userEvent.setup();
-		const { getByTestId } = render(
-			<Portal setIsOpened={setIsOpened}>
-				<Child />
-			</Portal>,
-		);
-		const child = getByTestId("child-component");
-		const overlay = getByTestId("overlay");
-		expect(child).toBeInTheDocument();
-		expect(overlay).toBeInTheDocument();
-		await user.click(child);
-		expect(setIsOpened).not.toHaveBeenCalled();
-		await user.click(overlay);
-		expect(setIsOpened).toHaveBeenCalledWith(false);
-	});
-
-	it("shouldn't be rendered", () => {
-		document.body.removeChild(portalRoot);
-		const { queryByTestId } = render(
-			<Portal setIsOpened={setIsOpened}>
-				<Child />
-			</Portal>,
-		);
-		expect(queryByTestId("child-component")).not.toBeInTheDocument();
-		expect(queryByTestId("overlay")).not.toBeInTheDocument();
-	});
-});

package/src/entities/portal/ui/Portal.tsx

@@ -1,26 +0,0 @@
-import { Dispatch, FC, Fragment, ReactNode, SetStateAction } from "react";
-import { createPortal } from "react-dom";
-
-import { PORTAL_ID } from "../model";
-import { Overlay } from "./Overlay";
-
-import Styled from "./Portal.style";
-
-export const Portal: FC<IProps> = ({ children, setIsOpened }) => {
-	const container = document.getElementById("portal-root");
-
-	if (!container) return null;
-
-	return createPortal(
-		<Fragment>
-			<Styled.Content id={PORTAL_ID}>{children}</Styled.Content>
-			<Overlay setIsOpened={setIsOpened} />
-		</Fragment>,
-		container,
-	);
-};
-
-interface IProps {
-	children: ReactNode;
-	setIsOpened: Dispatch<SetStateAction<boolean>>;
-}

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

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

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

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

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

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

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

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

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

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

@@ -1,43 +0,0 @@
-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 { PORTAL_ID, makeVisible } from "entities/portal";
-
-import { 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(PORTAL_ID);
-		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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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