@akinon/akifilter 0.3.1 → 0.4.0

package/dist/{components → cjs/components}/AppliedFilters/AppliedFilterItem.d.ts

@@ -1,3 +1,4 @@
+import './styles.css';
 import React from 'react';
 import type { FilterState } from '../FilterContext';
 type AppliedFilterItemProps = {

package/dist/cjs/components/AppliedFilters/AppliedFilterItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppliedFilterItem.d.ts","sourceRoot":"","sources":["../../../../src/components/AppliedFilters/AppliedFilterItem.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAKtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAMpD,KAAK,sBAAsB,GAAG;IAC5B,cAAc,EAAE;QACd,MAAM;QACN,CACI,WAAW,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAC,GACrC,WAAW,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAC,EAAE,CAC1C;KACF,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,iBAAiB,uBAE3B,sBAAsB,6BA8FxB,CAAC"}

package/dist/cjs/components/AppliedFilters/AppliedFilterItem.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppliedFilterItem = void 0;
+require("./styles.css");
+const icons_1 = require("@akinon/icons");
+const ui_space_1 = require("@akinon/ui-space");
+const ui_typography_1 = require("@akinon/ui-typography");
+const react_1 = require("react");
+const FilterContext_1 = require("../FilterContext");
+const lodash_1 = require("lodash");
+const AppliedFilterItem = ({ filterKeyValue }) => {
+    const [filterKey, filterValue] = filterKeyValue;
+    const { state: { applicableFilters, appliedFilters }, dispatch, conditionalFiltersSchema } = (0, FilterContext_1.useFilterContext)();
+    // find filterItem for placeholder, etc from filterKey
+    const filterItem = [
+        ...applicableFilters,
+        ...(conditionalFiltersSchema || [])
+    ].find(i => i.key === filterKey);
+    if (!filterItem) {
+        console.warn(`filterItem with key ${filterKey} not found`);
+        return null;
+    }
+    // TODO getModifiedFilterValue doesn't need filterValue. It can obtain it from filterItem
+    // TODO explain why you need to modify the filter value
+    // const modifiedFilterValue = getModifiedFilterValue({
+    //   filterItem,
+    //   filterValue
+    // });
+    // const shouldShowActiveFilter =
+    //   !isEmpty(filterItem) && !isEmpty(modifiedFilterValue);
+    const handleRemoveFilter = (removedFilterKey) => {
+        // TODO write test for below comment
+        // you should mark the key as undefined instead of deleting it for antd form item to pick up the change
+        const newFilters = Object.assign(Object.assign({}, appliedFilters), { [removedFilterKey]: undefined });
+        dispatch({
+            type: 'SET_APPLIED_FILTERS',
+            payload: { appliedFilters: newFilters }
+        });
+    };
+    const inputField = filterItem;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ui_space_1.Space, { key: filterKey, align: "center", className: "active-filter-item" },
+            react_1.default.createElement(ui_typography_1.Text, { className: "active-filter-item__label" }, inputField === null || inputField === void 0 ? void 0 :
+                inputField.placeholder,
+                ":"),
+            react_1.default.createElement(ui_typography_1.Text, { className: "active-filter-item__value" }, (0, lodash_1.isBoolean)(filterValue)
+                ? filterValue.toString()
+                : (0, lodash_1.isArray)(filterValue)
+                    ? filterValue.join(', ')
+                    : filterValue),
+            react_1.default.createElement(icons_1.Icon, { icon: "close", size: 20, className: "active-filter-item__remove-filter-icon", onClick: () => handleRemoveFilter(filterKey) }))));
+};
+exports.AppliedFilterItem = AppliedFilterItem;

package/dist/cjs/components/AppliedFilters/common.d.ts

@@ -0,0 +1,6 @@
+export declare const isFileObject: (value: any) => boolean;
+export declare const getModifiedFilterValue: ({ filterItem, filterValue }: {
+    filterItem: any;
+    filterValue: any['value'];
+}) => any;
+//# sourceMappingURL=common.d.ts.map

package/dist/cjs/components/AppliedFilters/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/components/AppliedFilters/common.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,UAAW,GAAG,YAAuC,CAAC;AAE/E,eAAO,MAAM,sBAAsB;gBAIrB,GAAG;iBACF,GAAG,CAAC,OAAO,CAAC;SA+B1B,CAAC"}

package/dist/cjs/components/AppliedFilters/common.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getModifiedFilterValue = exports.isFileObject = void 0;
+const ui_tree_select_1 = require("@akinon/ui-tree-select");
+const constants_1 = require("../../constants");
+const utils_1 = require("../../utils");
+const isFileObject = (value) => (value === null || value === void 0 ? void 0 : value.originFileObj) !== undefined;
+exports.isFileObject = isFileObject;
+const getModifiedFilterValue = ({ filterItem, filterValue }) => {
+    var _a, _b, _c;
+    switch (filterItem === null || filterItem === void 0 ? void 0 : filterItem.widget) {
+        case 'select':
+            if (((_a = filterItem === null || filterItem === void 0 ? void 0 : filterItem.widgetProps) === null || _a === void 0 ? void 0 : _a.mode) === 'multiple') {
+                return filterValue === null || filterValue === void 0 ? void 0 : filterValue.map((value) => {
+                    const optionObject = filterItem.options.find((option) => option.value === value);
+                    return (optionObject === null || optionObject === void 0 ? void 0 : optionObject.label) || value;
+                }).join(', ');
+            }
+            const optionObject = filterItem.options.find((option) => option.value === filterValue);
+            return (optionObject === null || optionObject === void 0 ? void 0 : optionObject.label) || filterValue;
+        case 'date-picker':
+            return filterValue === null || filterValue === void 0 ? void 0 : filterValue.format(constants_1.overallDateFormat);
+        case 'checkbox-group':
+            return filterValue === null || filterValue === void 0 ? void 0 : filterValue.map(() => 'Yes').join(', ');
+        case ui_tree_select_1.TreeSelect:
+            const tree = (_b = filterItem === null || filterItem === void 0 ? void 0 : filterItem.widgetProps) === null || _b === void 0 ? void 0 : _b.treeData;
+            const label = (_c = (0, utils_1.getTreeNodeByValue)({ tree, nodeValue: filterValue })) === null || _c === void 0 ? void 0 : _c.value;
+            return label || filterValue;
+        default:
+            return filterValue;
+    }
+};
+exports.getModifiedFilterValue = getModifiedFilterValue;

package/dist/{components → cjs/components}/AppliedFilters/index.d.ts

@@ -1,3 +1,4 @@
+import './styles.css';
 import React from 'react';
 export declare const AppliedFilters: () => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/AppliedFilters/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/AppliedFilters/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAMtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,cAAc,yBAyC1B,CAAC"}

package/dist/cjs/components/AppliedFilters/index.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppliedFilters = void 0;
+require("./styles.css");
+const icons_1 = require("@akinon/icons");
+const ui_layout_1 = require("@akinon/ui-layout");
+const ui_space_1 = require("@akinon/ui-space");
+const ui_typography_1 = require("@akinon/ui-typography");
+const react_1 = require("react");
+const FilterContext_1 = require("../FilterContext");
+const AppliedFilterItem_1 = require("./AppliedFilterItem");
+const AppliedFilters = () => {
+    var _a;
+    const { state: { appliedFilters }, dispatch } = (0, FilterContext_1.useFilterContext)();
+    const handleOnResetFilters = () => {
+        dispatch({ type: 'SET_APPLIED_FILTERS', payload: { appliedFilters: {} } });
+    };
+    return (react_1.default.createElement(ui_layout_1.Row, { align: "middle", className: "applied_filters" },
+        react_1.default.createElement(ui_layout_1.Col, { className: "applied_filters__list" },
+            react_1.default.createElement(ui_space_1.Space, null,
+                react_1.default.createElement(ui_typography_1.Text, { className: "applied_filters__label" }, "Active filters:"),
+                react_1.default.createElement(ui_space_1.Space, { className: "applied_filters__items", "data-testid": "appliedFilters" }, (_a = Object.entries(appliedFilters)) === null || _a === void 0 ? void 0 : _a.map(([filterKey, filterValue], i) => filterValue !== undefined && (react_1.default.createElement(AppliedFilterItem_1.AppliedFilterItem, { filterKeyValue: [filterKey, filterValue], key: i })))))),
+        react_1.default.createElement(ui_layout_1.Col, { className: "applied_filters__clear-filters" },
+            react_1.default.createElement(icons_1.Icon, { icon: "bin", size: 35, className: "applied_filters__reset-filters-icon", onClick: handleOnResetFilters }))));
+};
+exports.AppliedFilters = AppliedFilters;

package/dist/cjs/components/AppliedFilters/styles.css

@@ -0,0 +1,65 @@
+.akinon-filter .applied_filters {
+  padding: 5px 6px;
+  background-color: #2b344c;
+  border-radius: 5px;
+}
+
+.applied_filters .applied_filters__list {
+  flex: 1;
+  background-color: #1e1e2d;
+  padding: 6px 16px;
+  border-radius: 3px;
+}
+
+.applied_filters .applied_filters__label.akinon-typography {
+  color: white;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.applied_filters .applied_filters__reset-filters-icon {
+  cursor: pointer;
+  color: white;
+  font-size: 20px;
+  padding: 6px;
+  margin: 6px;
+}
+
+.applied_filters .applied_filters__items {
+  flex-wrap: wrap;
+}
+
+.akinon-filter .active-filter-item {
+  font-size: 14px;
+  background-color: white;
+  padding: 1px 4px;
+  border-radius: 3px;
+  line-height: 1rem;
+}
+
+.active-filter-item .akinon-space-item {
+  display: flex;
+  justify-content: center;
+}
+
+.active-filter-item .active-filter-item__label.akinon-typography,
+.active-filter-item .active-filter-item__value.akinon-typography {
+  color: #4a4a4a;
+}
+
+.active-filter-item .active-filter-item__label.akinon-typography {
+  font-weight: 600;
+}
+
+.active-filter-item .active-filter-item__value.akinon-typography {
+  font-weight: 500;
+}
+
+.active-filter-item .active-filter-item__remove-filter-icon {
+  cursor: pointer;
+  background-color: #4482ff;
+  color: white;
+  font-size: 5px;
+  padding: 5px;
+  border-radius: 99px;
+}

package/dist/cjs/components/ConditionalFilters/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionalFilters/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,kBAAkB,gCAyC9B,CAAC"}

package/dist/cjs/components/ConditionalFilters/index.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConditionalFilters = void 0;
+const akiform_builder_1 = require("@akinon/akiform-builder");
+const ui_typography_1 = require("@akinon/ui-typography");
+const react_1 = require("react");
+const FilterContext_1 = require("../FilterContext");
+const ConditionalFilters = () => {
+    const { dispatch, state, conditionalFiltersSchema } = (0, FilterContext_1.useFilterContext)();
+    const { appliedFilters } = state;
+    const [formResetCount, setFormResetCount] = react_1.default.useState(0);
+    // reset form state when conditionalFiltersSchema changes
+    react_1.default.useEffect(() => {
+        setFormResetCount(formResetCount + 1);
+    }, [conditionalFiltersSchema]);
+    // second form created just to reset antd form state when conditionalFiltersSchema changes.
+    const handleFormChange = (allValues) => {
+        dispatch({
+            type: 'SET_APPLIED_FILTERS',
+            payload: {
+                appliedFilters: Object.assign(Object.assign({}, appliedFilters), allValues)
+            }
+        });
+    };
+    if (!conditionalFiltersSchema)
+        return null;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ui_typography_1.Paragraph, { className: "akinon-filter__header" }, "COMMON PARAMETER FILTERS"),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(akiform_builder_1.FormBuilderWatch, { builderFields: conditionalFiltersSchema, handleChange: handleFormChange, key: formResetCount, isDebounced: true }))));
+};
+exports.ConditionalFilters = ConditionalFilters;

package/dist/cjs/components/FilterContext/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/FilterContext/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAiB,QAAQ,EAAyB,MAAM,OAAO,CAAC;AAI9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGzC,MAAM,MAAM,WAAW,GAAG;IAExB,QAAQ,EAAE,MAAM,CAAC;IAEjB,cAAc,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;KAAE,CAAC;IAEzE,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAE/B,YAAY,EAAE,MAAM,EAAE,CAAC;IAEvB,yBAAyB,EAAE,MAAM,CAAC;CACnC,CAAC;AAQF,MAAM,MAAM,YAAY,GACpB;IACE,IAAI,EAAE,qBAAqB,CAAC;IAC5B,OAAO,EAAE;QAAE,cAAc,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAA;KAAE,CAAC;CAC5D,GACD;IACE,IAAI,EAAE,wBAAwB,CAAC;IAC/B,OAAO,EAAE;QAAE,iBAAiB,EAAE,WAAW,CAAC,mBAAmB,CAAC,CAAA;KAAE,CAAC;CAClE,GACD;IACE,IAAI,EAAE,mBAAmB,CAAC;IAC1B,OAAO,EAAE;QAAE,YAAY,EAAE,WAAW,CAAC,cAAc,CAAC,CAAA;KAAE,CAAC;CACxD,CAAC;AAEN,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;IACjC,wBAAwB,EAAE,WAAW,CAAC,0BAA0B,CAAC,CAAC;CACnE,CAAC;AAEF,KAAK,0BAA0B,GAAG,WAAW,GAAG;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,4FAM/B,0BAA0B,sBA2F5B,CAAC;AAEF,wBAAgB,gBAAgB,kBAM/B"}

package/dist/cjs/components/FilterContext/index.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFilterContext = exports.FilterContextProvider = void 0;
+const react_1 = require("react");
+const react_router_dom_1 = require("react-router-dom");
+const use_immer_1 = require("use-immer");
+const utils_1 = require("../../utils");
+const FilterContext = (0, react_1.createContext)(undefined);
+/**
+ * FilterContextProvider manages both filter context and antd form state.
+ * Reason for not separating antd form state from filter context is that antd
+ * form state is tightly coupled with filter context state.
+ */
+const FilterContextProvider = ({ children, filterSchema, customMainPath, useAppliedFilters, conditionalFiltersSchema }) => {
+    const { pathname } = (0, react_router_dom_1.useLocation)();
+    const mainPath = customMainPath
+        ? customMainPath
+        : (0, utils_1.getPathFragments)(pathname).mainPath;
+    if (!mainPath) {
+        throw new Error('mainPath is not defined');
+    }
+    // load appliedFilters from local storage
+    const localAppliedFilters = JSON.parse(localStorage.getItem(`appliedFilters-${mainPath}`) || '{}');
+    // get applied filters from parent component
+    const parentAppliedFilters = useAppliedFilters[0];
+    // load shownFilters from local storage
+    const localShownFilters = JSON.parse(localStorage.getItem(`shownFilters-${mainPath}`) || '[]');
+    const initialState = {
+        mainPath,
+        // if parentAppliedFilters is not empty, use it. Otherwise, use localAppliedFilters. don't merge them to prevent conflicts since you want parent to have the control
+        appliedFilters: Object.keys(parentAppliedFilters).length > 0
+            ? parentAppliedFilters
+            : localAppliedFilters,
+        applicableFilters: filterSchema,
+        // if localShownFilters is not defined, only show first 8 filters
+        shownFilters: localShownFilters.length
+            ? localShownFilters
+            : filterSchema.map(filter => filter.key).slice(0, 8),
+        recreateShownFiltersCount: 0
+    };
+    const [state, dispatch] = (0, use_immer_1.useImmerReducer)((draft, action) => {
+        switch (action.type) {
+            case 'SET_APPLIED_FILTERS':
+                // console.log('SET_APPLIED_FILTERS', action.payload.appliedFilters);
+                draft.appliedFilters = action.payload.appliedFilters;
+                return;
+            case 'SET_APPLICABLE_FILTERS':
+                // console.log('SET_APPLICABLE_FILTERS');
+                draft.applicableFilters = action.payload.applicableFilters;
+                return;
+            case 'SET_SHOWN_FILTERS':
+                // console.log('SET_SHOWN_FILTERS', action.payload.shownFilters);
+                draft.shownFilters = action.payload.shownFilters;
+                draft.recreateShownFiltersCount = draft.recreateShownFiltersCount + 1;
+                return;
+        }
+    }, initialState);
+    (0, react_1.useEffect)(() => {
+        // send applied filters to parent component
+        useAppliedFilters[1](state.appliedFilters);
+        // save current appliedFilters to local storage to persist them
+        localStorage.setItem(`appliedFilters-${mainPath}`, JSON.stringify(state.appliedFilters));
+    }, [state.appliedFilters]);
+    // save current shownFilters to local storage to persist them
+    (0, react_1.useEffect)(() => {
+        localStorage.setItem(`shownFilters-${mainPath}`, JSON.stringify(state.shownFilters));
+    }, [state.shownFilters]);
+    (0, react_1.useEffect)(() => {
+        dispatch({
+            type: 'SET_APPLICABLE_FILTERS',
+            payload: { applicableFilters: filterSchema }
+        });
+    }, [filterSchema]);
+    // console.log('form state', state);
+    return (react_1.default.createElement(FilterContext.Provider, { value: { state, dispatch, conditionalFiltersSchema } }, children));
+};
+exports.FilterContextProvider = FilterContextProvider;
+function useFilterContext() {
+    const context = (0, react_1.useContext)(FilterContext);
+    if (context === undefined) {
+        throw new Error('useFilterContext must be used within a FilterProvider');
+    }
+    return context;
+}
+exports.useFilterContext = useFilterContext;

package/dist/{components → cjs/components}/SelectShownFilters/index.d.ts

@@ -1,3 +1,4 @@
+import './styles.css';
 import React from 'react';
 /**
  * Via this component, user can select which filters to show in the UI from applicableFilters.

package/dist/cjs/components/SelectShownFilters/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectShownFilters/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AActB,OAAO,KAAmB,MAAM,OAAO,CAAC;AAWxC;;GAEG;AACH,eAAO,MAAM,kBAAkB,yBA+J9B,CAAC"}

package/dist/cjs/components/SelectShownFilters/index.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectShownFilters = void 0;
+require("./styles.css");
+const akiform_builder_1 = require("@akinon/akiform-builder");
+const icons_1 = require("@akinon/icons");
+const ui_input_1 = require("@akinon/ui-input");
+const ui_pagination_1 = require("@akinon/ui-pagination");
+const ui_divider_1 = require("@akinon/ui-divider");
+const ui_modal_1 = require("@akinon/ui-modal");
+const ui_space_1 = require("@akinon/ui-space");
+const react_1 = require("react");
+const FilterContext_1 = require("../FilterContext");
+// import {
+//   getModalFormInitialValues,
+//   getModalFormMeta,
+//   transformFiltersFormMetaFieldsToModalFormMetaFields
+// } from './common';
+// import useOnModalCancel from './hooks/useOnModalCancel';
+// TODO includeFileFilter
+/**
+ * Via this component, user can select which filters to show in the UI from applicableFilters.
+ */
+const SelectShownFilters = () => {
+    const [search, setSearch] = (0, react_1.useState)('');
+    const [pagination, setPagination] = (0, react_1.useState)({
+        current: 1,
+        pageSize: 60
+    });
+    const { state, dispatch } = (0, FilterContext_1.useFilterContext)();
+    const { applicableFilters, shownFilters } = state;
+    // create checkbox form item for each filter, which will determine whether to show it or not
+    const modalFormItems = [];
+    applicableFilters.forEach((filter) => {
+        var _a;
+        if (search &&
+            !((_a = filter.placeholder) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(search.toLowerCase())) &&
+            !filter.label.toLowerCase().includes(search.toLowerCase())) {
+            return;
+        }
+        modalFormItems.push({
+            key: filter.key,
+            label: filter.placeholder || filter.label || filter.key,
+            type: 'checkbox',
+            value: shownFilters.includes(filter.key),
+            props: {
+                labelRightAligned: true
+            }
+        });
+    });
+    const modalFormItemsPaginated = modalFormItems.slice((pagination.current - 1) * pagination.pageSize, pagination.current * pagination.pageSize);
+    // export const transformFiltersFormMetaFieldsToModalFormMetaFields = (filtersFormMetaFields) =>
+    // filtersFormMetaFields.map((metaField) => ({
+    //   key: metaField.key,
+    //   widget: WidgetType.CHECKBOX,
+    //   children: metaField.placeholder,
+    // }));
+    const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
+    // const onModalCancel = useOnModalCancel({
+    //   setCurrentFiltersFormMeta,
+    //   modalForm,
+    //   setIsModalOpen,
+    //   staticFiltersFormMetaFields,
+    //   dynamicFiltersFormMetaFields
+    // });
+    // const modalFormInitialValues = getModalFormInitialValues(
+    //   currentFiltersFormMeta
+    // );
+    // const modalFormMetaFields =
+    //   transformFiltersFormMetaFieldsToModalFormMetaFields([
+    //     ...staticFiltersFormMetaFields,
+    //     ...dynamicFiltersFormMetaFields
+    //   ]);
+    const handleOpenModalIconClick = () => {
+        setIsModalOpen(true);
+    };
+    const onModalCancel = () => {
+        setIsModalOpen(false);
+    };
+    const handleModalFormValuesChange = (allValues) => {
+        // select true values from allValues
+        const shownFilters = Object.keys(allValues).filter(key => allValues[key] === true);
+        dispatch({
+            type: 'SET_SHOWN_FILTERS',
+            payload: { shownFilters }
+        });
+    };
+    // const addFileToFilters = selectFile => {
+    //   setFilters({
+    //     pagePath: mainPath,
+    //     filters: { ...pageFilters, filter_file: selectFile.file }
+    //   });
+    // };
+    return (react_1.default.createElement(ui_space_1.Space, { className: "filter-options" },
+        react_1.default.createElement("div", { className: "filter-options__item", onClick: handleOpenModalIconClick },
+            react_1.default.createElement(icons_1.Icon, { icon: "filter" })),
+        react_1.default.createElement(ui_modal_1.Modal, { className: "filter-options__modal", onCancel: onModalCancel, open: isModalOpen, destroyOnClose: true, footer: null, width: '80%', "data-testid": "filter-options-modal" },
+            react_1.default.createElement("div", { className: "filter-options__modal-header" },
+                react_1.default.createElement("div", { className: "filter-options__modal-header-banner" }),
+                react_1.default.createElement("h1", { className: "filter-options__modal-header-title" }, "Select Shown Filters")),
+            react_1.default.createElement(ui_divider_1.Divider, null),
+            react_1.default.createElement("div", { className: "filter-options__modal-control" },
+                react_1.default.createElement(ui_input_1.Input, { placeholder: "Search", onChange: e => setSearch(e.target.value), className: "filter-options__modal-search" }),
+                react_1.default.createElement("div", { className: "filter-options__modal-pagination" },
+                    react_1.default.createElement(ui_pagination_1.Pagination, { current: pagination.current, pageSize: pagination.pageSize, total: modalFormItems.length, onChange: (page, pageSize) => {
+                            setPagination({ current: page, pageSize });
+                        }, showSizeChanger: false, simple: true }))),
+            react_1.default.createElement("div", { className: "filter-options__modal-form" },
+                react_1.default.createElement(akiform_builder_1.FormBuilderWatch, { builderFields: modalFormItemsPaginated, handleChange: handleModalFormValuesChange, isDebounced: false })))));
+};
+exports.SelectShownFilters = SelectShownFilters;

package/dist/cjs/components/SelectShownFilters/styles.css

@@ -0,0 +1,99 @@
+.filter-options .filter-options__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  width: 36px;
+  background-color: #4482ff;
+  color: var(--color-neutral-50);
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.filter-options .filter-options__filter-modal-open-icon {
+  color: white;
+  font-size: 23px;
+}
+
+.filter-options .filter-options__modal-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.filter-options .filter-options__modal-header-banner {
+  position: absolute;
+  left: 0;
+  width: 4px;
+  height: 16px;
+  background-color: #ff5163;
+  left: -22px;
+}
+
+.filter-options .filter-options__modal-header-title {
+  font-size: 20px;
+  color: white;
+  font-weight: 500;
+  margin: 0;
+}
+
+.filter-options .filter-options__modal-divider.akinon-divider-horizontal {
+  background-color: #363d51;
+  width: calc(100% + 44px);
+  margin: 15px;
+  margin-left: -22px;
+}
+
+.filter-options .filter-options__modal-control {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.filter-options .filter-options__modal-search {
+  width: 250px;
+}
+
+.filter-options .filter-options__modal-form.akinon-form {
+  margin: 32px 44px 0;
+}
+
+.filter-options .filter-options__export-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.filter-options .filter-options__export-icon {
+  color: white;
+}
+
+.filter-options .filter-options__export-label.akinon-typography {
+  text-transform: uppercase;
+  color: white;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 14px;
+}
+
+.filter-options__modal.akinon-modal .akinon-checkbox-wrapper {
+  color: white;
+}
+
+.filter-options__modal.akinon-modal
+  .akinon-checkbox-checked
+  .akinon-checkbox-inner {
+  background-color: #6c7ebe;
+  border-color: #6c7ebe;
+
+  &:hover {
+    border-color: #6c7ebe;
+  }
+}
+
+.filter-options__modal-form .akinon-form {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+}

package/dist/cjs/components/ShownFilters/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ShownFilters/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,YAAY,yBAkExB,CAAC"}

package/dist/cjs/components/ShownFilters/index.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShownFilters = void 0;
+const akiform_builder_1 = require("@akinon/akiform-builder");
+const ui_typography_1 = require("@akinon/ui-typography");
+const dayjs_1 = require("dayjs");
+const react_1 = require("react");
+const FilterContext_1 = require("../FilterContext");
+const ShownFilters = () => {
+    const { state, dispatch } = (0, FilterContext_1.useFilterContext)();
+    const { applicableFilters, shownFilters, appliedFilters, recreateShownFiltersCount } = state;
+    // derive form items from applicableFilters and shownFilters
+    const shownApplicableFilters = applicableFilters.filter(filter => shownFilters.includes(filter.key));
+    // create form items from shownApplicableFilters and appliedFilters.
+    // the shownApplicableFilters determines the schema of the form items and
+    // appliedFilters determines the values of the form items
+    const formItems = shownApplicableFilters.map(filter => {
+        return Object.assign(Object.assign({}, filter), { value: appliedFilters[filter.key], props: Object.assign(Object.assign({}, ((filter === null || filter === void 0 ? void 0 : filter.props) || {})), { labelRightAligned: true }) });
+    });
+    // remove the label from the form items since label is not used in design
+    formItems.forEach(item => {
+        if (item.type === 'checkbox')
+            return;
+        delete item.label;
+    });
+    const handleChange = (changedValues) => {
+        // for datepicker values, convert them to string
+        Object.keys(changedValues).forEach(key => {
+            if (changedValues[key] &&
+                typeof changedValues[key].isValid === 'function' &&
+                typeof changedValues[key].format === 'function') {
+                changedValues[key] = (0, dayjs_1.default)(changedValues[key]).format('YYYY-MM-DD');
+            }
+        });
+        dispatch({
+            type: 'SET_APPLIED_FILTERS',
+            payload: {
+                appliedFilters: changedValues
+            }
+        });
+    };
+    return (react_1.default.createElement("div", { className: "shown-filters", "data-testid": "shown-filters" },
+        react_1.default.createElement(ui_typography_1.Paragraph, { className: "akinon-filter__header" }, "MAIN FILTERS"),
+        react_1.default.createElement(akiform_builder_1.FormBuilderWatch, { key: recreateShownFiltersCount, builderFields: formItems, handleChange: handleChange, isDebounced: true })));
+};
+exports.ShownFilters = ShownFilters;

package/dist/cjs/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC"}

package/dist/cjs/components/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AppliedFilters"), exports);
+__exportStar(require("./ConditionalFilters"), exports);
+__exportStar(require("./FilterContext"), exports);
+__exportStar(require("./SelectShownFilters"), exports);
+__exportStar(require("./ShownFilters"), exports);

package/dist/cjs/constants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/constants/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,eAAe,CAAC;AAC9C,eAAO,MAAM,sBAAsB,eAAe,CAAC;AACnD,eAAO,MAAM,iBAAiB,UAAU,CAAC;AACzC,eAAO,MAAM,4BAA4B,aAAa,CAAC;AACvD,eAAO,MAAM,6BAA6B,eAAe,CAAC;AAC1D,eAAO,MAAM,sBAAsB,WAAW,CAAC;AAC/C,eAAO,MAAM,yBAAyB,QAAQ,CAAC;AAC/C,eAAO,MAAM,iBAAiB,YAAY,CAAC;AAC3C,eAAO,MAAM,wBAAwB,iBAAiB,CAAC;AACvD,eAAO,MAAM,iBAAiB,wBAAwB,CAAC;AACvD,eAAO,MAAM,0BAA0B,4BAA4B,CAAC;AACpE,eAAO,MAAM,0BAA0B,+BAA+B,CAAC;AAEvE,eAAO,MAAM,0BAA0B,wBAA8D,CAAC;AACtG,eAAO,MAAM,qBAAqB,qBAA8C,CAAC;AACjF,eAAO,MAAM,yBAAyB;;;;;;;CAOrC,CAAC;AAEF,eAAO,MAAM,iCAAiC,sBAAwD,CAAC;AACvG,eAAO,MAAM,cAAc,qBAAmD,CAAC;AAE/E,eAAO,MAAM,cAAc,WAAW,CAAC;AACvC,eAAO,MAAM,eAAe,QAAQ,CAAC;AAErC,eAAO,MAAM,eAAe,4CAA4C,CAAC;AAEzE,eAAO,MAAM,oBAAoB,QAAQ,CAAC;AAE1C,eAAO,MAAM,sBAAsB,yBAAyB,CAAC;AAE7D,eAAO,MAAM,gBAAgB,sBAAsB,CAAC;AAEpD,eAAO,MAAM,cAAc,mBAAmB,CAAC;AAE/C,eAAO,MAAM,gBAAgB,eAAe,CAAC;AAE7C,eAAO,MAAM,uBAAuB,QAA+B,CAAC;AAEpE,eAAO,MAAM,iBAAiB,yBAAyB,CAAC;AAExD,eAAO,MAAM,gBAAgB,UAAU,CAAC;AAExC,eAAO,MAAM,0BAA0B,yBAAyB,CAAC;AAEjE,eAAO,MAAM,oBAAoB;;;;CAIhC,CAAC;AAEF,eAAO,MAAM,UAAU,eAAe,CAAC;AAEvC,eAAO,MAAM,aAAa,OAAO,CAAC;AAElC,eAAO,MAAM,UAAU;;;;;CAKtB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;CAK9B,CAAC"}