slick-table 0.0.1

package/.prettierignore

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

package/.prettierrc

@@ -0,0 +1,22 @@
+{
+	"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/README.md

@@ -0,0 +1,78 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      ...tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      ...tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      ...tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+### Environment
+Node.js 20.19.0
+
+### How to use
+```js
+  <body>
+    <div id="portal-root"></div>
+  </body>
+```

package/dist/entities/portal/index.js

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

package/dist/entities/portal/lib/index.js

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

package/dist/entities/portal/lib/visibility/index.js

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

package/dist/entities/portal/lib/visibility/makeVisible.js

@@ -0,0 +1,9 @@
+export function makeVisible(menu, x, y) {
+    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/dist/entities/portal/model/index.js

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

package/dist/entities/portal/model/portalId.js

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

package/dist/entities/portal/ui/Overlay/Overlay.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Styled from "./Overlay.style";
+export const Overlay = ({ setIsOpened }) => {
+    return (_jsx(Styled.Wrapper, { onClick: () => setIsOpened(false), onContextMenu: (e) => {
+            e.preventDefault();
+            setIsOpened(false);
+        }, "data-testid": "overlay" }));
+};

package/dist/entities/portal/ui/Overlay/Overlay.style.js

@@ -0,0 +1,12 @@
+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/dist/entities/portal/ui/Overlay/index.js

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

package/dist/entities/portal/ui/Portal.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { createPortal } from "react-dom";
+import { PORTAL_ID } from "../model";
+import { Overlay } from "./Overlay";
+import Styled from "./Portal.style";
+export const Portal = ({ children, setIsOpened }) => {
+    const container = document.getElementById("portal-root");
+    if (!container)
+        return null;
+    return createPortal(_jsxs(Fragment, { children: [_jsx(Styled.Content, { id: PORTAL_ID, children: children }), _jsx(Overlay, { setIsOpened: setIsOpened })] }), container);
+};

package/dist/entities/portal/ui/Portal.style.js

@@ -0,0 +1,18 @@
+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/dist/entities/portal/ui/index.js

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

package/dist/features/column-filters/index.js

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

package/dist/features/column-filters/lib/filter/applyFilter.js

@@ -0,0 +1,24 @@
+import { debounce } from "shared/lib/debounce";
+import { eventOpenColumnFilters, headerButtons, } from "shared/lib/slickgrid";
+function setColumnFilter(value) {
+    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/dist/features/column-filters/lib/filter/index.js

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

package/dist/features/column-filters/lib/hooks/index.js

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

package/dist/features/column-filters/lib/hooks/useOpenMenu.js

@@ -0,0 +1,36 @@
+import { useEffect } from "react";
+import { eventOpenColumnFilters, } from "shared/lib/slickgrid";
+import { PORTAL_ID, makeVisible } from "entities/portal";
+import { defaultValue } from "../../model";
+import { firstIn } from "../select";
+export function useOpenMenu(isOpened, setFilterId, setValue) {
+    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/dist/features/column-filters/lib/hooks/useSubscribeToEvent.js

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

package/dist/features/column-filters/lib/index.js

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

package/dist/features/column-filters/lib/props/datePickerProps.js

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

package/dist/features/column-filters/lib/props/index.js

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

package/dist/features/column-filters/lib/select/firstIn.js

@@ -0,0 +1,21 @@
+import { EColumnFilter, EColumnFiltersGroup } from "shared/model/enums";
+export function firstIn(group) {
+    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/dist/features/column-filters/lib/select/index.js

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

package/dist/features/column-filters/model/consts/defaultValue.js

@@ -0,0 +1,4 @@
+export const defaultValue = {
+    1: "",
+    2: "",
+};

package/dist/features/column-filters/model/consts/index.js

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

package/dist/features/column-filters/model/consts/label.js

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

package/dist/features/column-filters/model/index.js

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

package/dist/features/column-filters/model/types/IProps.js

@@ -0,0 +1 @@
+export {};

package/dist/features/column-filters/model/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/features/column-filters/ui/BooleanInput/BooleanInput.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControlLabel } from "@mui/material";
+import { applyFilter } from "../../lib";
+import Styled from "./BooleanInput.style";
+export const BooleanInput = ({ setValue, value }) => {
+    function onClick(newValue) {
+        setValue(newValue);
+        applyFilter(newValue);
+    }
+    return (_jsxs(Styled.FormGroup, { children: [_jsx(FormControlLabel, { control: _jsx(Styled.Checkbox, { checked: !value[1] && !value[2], onClick: () => onClick({ 1: "", 2: "" }), size: "small" }), label: "All" }), _jsx(FormControlLabel, { control: _jsx(Styled.Checkbox, { checked: Boolean(value[1]), onClick: () => onClick({ 1: "true", 2: "" }), size: "small" }), label: "Yes" }), _jsx(FormControlLabel, { control: _jsx(Styled.Checkbox, { checked: Boolean(value[2]), onClick: () => onClick({ 1: "", 2: "true" }), size: "small" }), label: "No" })] }));
+};

package/dist/features/column-filters/ui/BooleanInput/BooleanInput.style.js

@@ -0,0 +1,8 @@
+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/dist/features/column-filters/ui/BooleanInput/index.js

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

package/dist/features/column-filters/ui/ButtonReset/ButtonReset.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { eventOpenColumnFilters, headerButtons, } from "shared/lib/slickgrid";
+import { defaultValue } from "../../model";
+import Styled from "./ButtonReset.style";
+export const ButtonReset = ({ 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 (_jsx(Styled.Button, { disabled: !value[1] && !value[2], onClick: reset, variant: "outlined", size: "small", children: "Reset" }));
+};

package/dist/features/column-filters/ui/ButtonReset/ButtonReset.style.js

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

package/dist/features/column-filters/ui/ButtonReset/index.js

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

package/dist/features/column-filters/ui/ColumnFilters.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { EColumnFilter } from "shared/model/enums";
+import { Portal } from "entities/portal";
+import { useOpenMenu, useSubscribeToEvent } from "../lib";
+import { defaultValue } from "../model";
+import { ButtonReset } from "./ButtonReset";
+import { InputArea } from "./InputArea";
+import { SelectFilter } from "./SelectFilter";
+import Styled from "./ColumnFilters.style";
+export const ColumnFilters = () => {
+    const [value, setValue] = useState(defaultValue);
+    const [filterId, setFilterId] = useState(EColumnFilter.TextContain);
+    const [isOpened, setIsOpened] = useState(false);
+    useSubscribeToEvent(setIsOpened);
+    useOpenMenu(isOpened, setFilterId, setValue);
+    if (!isOpened)
+        return null;
+    return (_jsx(Portal, { setIsOpened: setIsOpened, children: _jsxs(Styled.Wrapper, { children: [_jsx(SelectFilter, { filterId: filterId, setFilterId: setFilterId }), _jsx(InputArea, { filterId: filterId, setValue: setValue, value: value }), _jsx(ButtonReset, { setIsOpened: setIsOpened, setValue: setValue, value: value })] }) }));
+};

package/dist/features/column-filters/ui/ColumnFilters.style.js

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

package/dist/features/column-filters/ui/DateBetween/DateBetween.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { INVALID_DATE } from "shared/model/consts";
+import { EDateFormat } from "shared/model/enums";
+import { WithDatePickerStyles } from "shared/ui/styles";
+import { applyFilter, datePickerProps } from "../../lib";
+import { defaultValue, label } from "../../model";
+export const DateBetween = ({ setValue, value }) => {
+    function onChange1(date) {
+        const dayString = date?.format(EDateFormat.db) || "";
+        const newValue = {
+            ...value,
+            1: dayString === INVALID_DATE ? defaultValue[1] : dayString,
+        };
+        setValue(newValue);
+        applyFilter(newValue);
+    }
+    function onChange2(date) {
+        const dayString = date?.format(EDateFormat.db) || "";
+        const newValue = {
+            ...value,
+            2: dayString === INVALID_DATE ? defaultValue[2] : dayString,
+        };
+        setValue(newValue);
+        applyFilter(newValue);
+    }
+    return (_jsxs(LocalizationProvider, { dateAdapter: AdapterMoment, children: [_jsx(WithDatePickerStyles, { children: _jsx(DatePicker, { label: label.from, onChange: onChange1, ...datePickerProps(value[1]) }) }), _jsx(WithDatePickerStyles, { children: _jsx(DatePicker, { label: label.to, onChange: onChange2, ...datePickerProps(value[2]) }) })] }));
+};

package/dist/features/column-filters/ui/DateBetween/index.js

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

package/dist/features/column-filters/ui/DateInput/DateInput.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { INVALID_DATE } from "shared/model/consts";
+import { EDateFormat } from "shared/model/enums";
+import { WithDatePickerStyles } from "shared/ui/styles";
+import { applyFilter, datePickerProps } from "../../lib";
+import { defaultValue } from "../../model";
+export const DateInput = ({ label, setValue, value }) => {
+    function onChange(date) {
+        const dayString = date?.format(EDateFormat.db) || "";
+        const newValue = {
+            ...value,
+            1: dayString === INVALID_DATE ? defaultValue[1] : dayString,
+        };
+        setValue(newValue);
+        applyFilter(newValue);
+    }
+    return (_jsx(LocalizationProvider, { dateAdapter: AdapterMoment, children: _jsx(WithDatePickerStyles, { children: _jsx(DatePicker, { label: label, onChange: onChange, ...datePickerProps(value[1]) }) }) }));
+};

package/dist/features/column-filters/ui/DateInput/index.js

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

package/dist/features/column-filters/ui/InputArea/InputArea.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { EColumnFilter } from "shared/model/enums";
+import { label } from "../../model";
+import { BooleanInput } from "../BooleanInput";
+import { DateBetween } from "../DateBetween";
+import { DateInput } from "../DateInput";
+import { MultipleSelect } from "../MultipleSelect";
+import { NumberBetween } from "../NumberBetween";
+import { NumberInput } from "../NumberInput";
+import { TextInput } from "../TextInput";
+export const InputArea = ({ filterId, setValue, value }) => {
+    return (_jsxs(Fragment, { children: [filterId === EColumnFilter.Boolean && (_jsx(BooleanInput, { setValue: setValue, value: value })), filterId === EColumnFilter.TextEqual && (_jsx(TextInput, { setValue: setValue, value: value })), filterId === EColumnFilter.TextNotEqual && (_jsx(TextInput, { setValue: setValue, value: value })), filterId === EColumnFilter.TextContain && (_jsx(TextInput, { setValue: setValue, value: value })), filterId === EColumnFilter.TextNotContain && (_jsx(TextInput, { setValue: setValue, value: value })), filterId === EColumnFilter.MultipleSelect && (_jsx(MultipleSelect, { setValue: setValue, value: value })), filterId === EColumnFilter.NumberEqual && (_jsx(NumberInput, { label: label.filter, setValue: setValue, value: value })), filterId === EColumnFilter.NumberFrom && (_jsx(NumberInput, { label: label.from, setValue: setValue, value: value })), filterId === EColumnFilter.NumberTo && (_jsx(NumberInput, { label: label.to, setValue: setValue, value: value })), filterId === EColumnFilter.NumberBetween && (_jsx(NumberBetween, { setValue: setValue, value: value })), filterId === EColumnFilter.DateEqual && (_jsx(DateInput, { label: label.filter, setValue: setValue, value: value })), filterId === EColumnFilter.DateFrom && (_jsx(DateInput, { label: label.from, setValue: setValue, value: value })), filterId === EColumnFilter.DateTo && (_jsx(DateInput, { label: label.to, setValue: setValue, value: value })), filterId === EColumnFilter.DateBetween && (_jsx(DateBetween, { setValue: setValue, value: value }))] }));
+};

package/dist/features/column-filters/ui/InputArea/index.js

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

package/dist/features/column-filters/ui/MultipleSelect/index.js

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

package/dist/features/column-filters/ui/MultipleSelect/lib/index.js

@@ -0,0 +1,2 @@
+export { props } from "./props";
+export { ascending } from "./sorting";

package/dist/features/column-filters/ui/MultipleSelect/lib/props/index.js

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

package/dist/features/column-filters/ui/MultipleSelect/lib/props/props.js

@@ -0,0 +1,29 @@
+import { eventOpenColumnFilters } from "shared/lib/slickgrid";
+const emptyProps = { label: "", options: [] };
+/**
+ * Molds label and options list for multiple select.
+ *
+ * @returns {Object} contains "label" and "options" fields.
+ */
+export function props() {
+    const { columnId, table } = eventOpenColumnFilters;
+    const grid = table?.grid;
+    if (!grid)
+        return emptyProps;
+    const column = grid?.getColumns().find(({ id }) => id === columnId);
+    if (!column)
+        return emptyProps;
+    const label = column.name;
+    const options = [];
+    const { formatter, id } = column;
+    const dataView = grid.getData();
+    const optionsSet = new Set();
+    const items = dataView.getItems();
+    items.forEach((item) => {
+        optionsSet.add(formatter ? formatter(0, 0, item[id], column, null, grid) : item[id]);
+    });
+    for (const option of optionsSet) {
+        options.push(option);
+    }
+    return { label, options };
+}

package/dist/features/column-filters/ui/MultipleSelect/lib/sorting/ascending.js

@@ -0,0 +1,16 @@
+/**
+ * Callback for sorting array elements ascending.
+ *
+ * @param {Number | String} a element of an array.
+ * @param {Number | String} b element of an array.
+ * @returns Sorting result.
+ */
+export function ascending(a, b) {
+    if (typeof a === "string" && typeof b === "string") {
+        return a.localeCompare(b);
+    }
+    else if (typeof a === "number" && typeof b === "number") {
+        return a - b;
+    }
+    return 0;
+}

package/dist/features/column-filters/ui/MultipleSelect/lib/sorting/index.js

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

package/dist/features/column-filters/ui/MultipleSelect/model/IValue.js

@@ -0,0 +1 @@
+export {};

package/dist/features/column-filters/ui/MultipleSelect/model/index.js

@@ -0,0 +1 @@
+export {};

package/dist/features/column-filters/ui/MultipleSelect/ui/MultipleSelect.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, InputLabel, ListItemText, MenuItem, OutlinedInput, Select, } from "@mui/material";
+import { applyFilter } from "../../../lib";
+import { ascending, props } from "../lib";
+import Styled from "./MultipleSelect.style";
+/**
+ * Generates multiple select based on values represented in the column
+ */
+export const MultipleSelect = ({ setValue, value }) => {
+    const selectedValues = JSON.parse(value[1] || '["All"]');
+    const { label, options } = props();
+    const handleChange = (event) => {
+        const targetValue = event.target.value;
+        let newValue;
+        if (targetValue[targetValue.length - 1] === "All" || !targetValue.length) {
+            newValue = { 1: "", 2: "" };
+        }
+        else {
+            if (targetValue.length > 1 && targetValue[0] === "All") {
+                targetValue.shift();
+            }
+            newValue = {
+                ...value,
+                1: JSON.stringify(targetValue),
+            };
+        }
+        setValue(newValue);
+        applyFilter(newValue);
+    };
+    return (_jsxs(FormControl, { size: "small", children: [_jsx(InputLabel, { id: "column-filter-multiple-select-label", children: label }), _jsxs(Select, { labelId: "column-filter-multiple-select-label", id: "column-filter-multiple-select", multiple: true, value: selectedValues, onChange: handleChange, input: _jsx(OutlinedInput, { label: label }), renderValue: (selected) => selected.join(", "), children: [_jsxs(MenuItem, { value: "All", children: [_jsx(Styled.Checkbox, { checked: selectedValues.indexOf("All") > -1 }), _jsx(ListItemText, { primary: "All" })] }, 0), options.sort(ascending).map((option) => (_jsxs(MenuItem, { value: option, children: [_jsx(Styled.Checkbox, { checked: selectedValues.indexOf(option) > -1 }), _jsx(ListItemText, { primary: option })] }, option)))] })] }));
+};