@mailstep/design-system 0.8.30 → 0.8.31-beta.2

package/ui/Blocks/CommonGrid/storybook/components/EnumCellExample.js

@@ -1,22 +1,16 @@
-import { EnumInCell } from "../../components/gridCells/EnumInCell.js";
-import { jsx } from "react/jsx-runtime";
-//#region packages/ui/Blocks/CommonGrid/storybook/components/EnumCellExample.tsx
-const packagingTypeAppearance = {
-	"option A": "neutralSubtle",
-	"option B": "orangeSubtle",
-	"option C": "greenSubtle"
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EnumInCell } from '../../components/gridCells/EnumInCell';
+var packagingTypeAppearance = {
+    'option A': 'neutralSubtle',
+    'option B': 'orangeSubtle',
+    'option C': 'greenSubtle'
 };
-const PackagingTypeTrans = {
-	"option A": () => "option A",
-	"option B": () => "option B",
-	"option C": () => "option C"
+var PackagingTypeTrans = {
+    'option A': function () { return 'option A'; },
+    'option B': function () { return 'option B'; },
+    'option C': function () { return 'option C'; }
 };
-const EnumCellExample = ({ rowData }) => {
-	return /* @__PURE__ */ jsx(EnumInCell, {
-		value: rowData.enumColumn,
-		enumObj: PackagingTypeTrans,
-		appearanceMap: packagingTypeAppearance
-	});
+export var EnumCellExample = function (_a) {
+    var rowData = _a.rowData;
+    return _jsx(EnumInCell, { value: rowData.enumColumn, enumObj: PackagingTypeTrans, appearanceMap: packagingTypeAppearance });
 };
-//#endregion
-export { EnumCellExample };

package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { LinguiContainer } from '../../../../utils/LinguiContainer';
+import withReduxActions from '../../HoC/withReduxActions';
+import { useAddFilter } from '../../hooks/useAddFilter';
+import { ExtraControlButtonPosition } from '../../types';
+import { onRowEditClick, onRowReadClick, onRowAction, onRowClick, onBatchAction } from '../utils/actions';
+import { columnDefinitions, enumColumn, columnDefinitionsWithSticky } from '../utils/columnDefinition';
+import { ReduxGrid, createRandomData, enumValues, gridDummyActions, onAsyncLoadFilterOptions } from '../utils/utils';
+import withRedux from '../utils/withRedux';
+var FilterSetter = function (_a) {
+    var gridActions = _a.gridActions;
+    var handleAddFilter = useAddFilter(gridActions === null || gridActions === void 0 ? void 0 : gridActions.addFilter);
+    React.useEffect(function () {
+        handleAddFilter(enumValues[1], enumColumn);
+    }, []);
+    return null;
+};
+var getRowsPerPage = function (height) { return 13; };
+var ConnectedFilterSetter = withReduxActions('testGrid')(FilterSetter);
+var extraControlButtons = [
+    {
+        position: ExtraControlButtonPosition.TopRight,
+        label: 'Create',
+        onClick: alert
+    },
+    {
+        position: ExtraControlButtonPosition.TopRight,
+        label: 'Print',
+        onSelect: function (value) {
+            console.log(value);
+        },
+        options: [
+            { label: 'CSV', value: 'CSV' },
+            { label: 'ODS', value: 'ODS' },
+            { label: 'XLSX', value: 'XLSX' }
+        ]
+    },
+    {
+        position: ExtraControlButtonPosition.TopRight,
+        label: 'Allocate',
+        onSelect: function (value) {
+            console.log(value);
+        },
+        options: [
+            { label: 'Allocate all', value: 'all' },
+            { label: 'Allocate selected', value: 'selected' }
+        ]
+    }
+];
+var comparators = {
+    text: [
+        { label: 'yellow', value: 'Yell' },
+        { label: 'blue', value: 'Blue' }
+    ],
+    number: [
+        { label: 'eq', value: 'equal' },
+        { label: 'gt', value: 'greater' },
+        { label: 'between', value: 'between' }
+    ]
+};
+export default {
+    title: 'Blocks/CommonGrid',
+    decorators: [withRedux]
+};
+export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName" })] })); };
+ComplexWithPaginationAndRedux.story = {
+    name: 'Complex, with pagination and redux'
+};
+export var ComplexWithReload = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName", onReload: function () {
+                console.log('reload');
+            } })] })); };
+ComplexWithReload.story = {
+    name: 'Complex, with reload button'
+};
+export var ComplexWithTooManyResults = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName", allowSortingOnlyUnderTotalRows: [10, 10] })] })); };
+ComplexWithTooManyResults.story = {
+    name: 'Complex, with too many results'
+};
+export var ComplexWithCheckbox = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName", actionColumnDefinition: {
+                flexBasis: 40,
+                forceCheckboxes: true,
+                addRowNumbers: false,
+                canRowEdit: false,
+                canRowRead: false
+            } })] })); };
+ComplexWithCheckbox.story = {
+    name: 'Complex, with checkbox'
+};
+export var ComplexWithEditButton = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName", actionColumnDefinition: {
+                flexBasis: 70,
+                forceCheckboxes: true,
+                addRowNumbers: false,
+                canRowEdit: true,
+                canRowRead: false
+            } })] })); };
+ComplexWithEditButton.story = {
+    name: 'Complex, with edit button'
+};
+export var ComplexWithStickyColumn = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitionsWithSticky, rowsData: createRandomData(10), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridNameSticky" })] })); };
+ComplexWithStickyColumn.story = {
+    name: 'Complex, with sticky column'
+};

package/ui/Blocks/CommonGrid/storybook/stories/default.stories.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CommonGrid from '../../CommonGridContainer';
+import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
+import { columnDefinitions } from '../utils/columnDefinition';
+import withTheme from '../utils/withTheme';
+import withRouter from '../utils/withRouter';
+import withRedux from '../utils/withRedux';
+import { LinguiContainer } from '../../../../utils/LinguiContainer';
+export default {
+    title: 'Blocks/CommonGrid',
+    decorators: [withTheme, withRouter, withRedux]
+};
+export var Default = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridActions: gridDummyActions, gridSelectors: gridSelectors }) }));
+};

package/ui/Blocks/CommonGrid/storybook/stories/gridStates.stories.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LinguiContainer } from '../../../../utils/LinguiContainer';
+import CommonGrid from '../../CommonGridContainer';
+import { columnDefinitions } from '../utils/columnDefinition';
+import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
+export default {
+    title: 'Blocks/CommonGrid'
+};
+export var LoadingState = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridSelectors: gridSelectors, gridActions: gridDummyActions, isLoading: true }) })); };
+export var ErrorState = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridSelectors: gridSelectors, gridActions: gridDummyActions, errorMessage: "error message" }) })); };
+export var WarningSortState = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridSelectors: gridSelectors, gridActions: gridDummyActions, totalRowsCount: 10, allowSortingOnlyUnderTotalRows: [5, 20] }) })); };
+export var TerminatedSortState = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridSelectors: gridSelectors, gridActions: gridDummyActions, totalRowsCount: 100, allowSortingOnlyUnderTotalRows: [5, 20] }) })); };

package/ui/Blocks/CommonGrid/storybook/stories/manyColumnsNoScrollLayout.stories.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CommonGrid from '../../CommonGridContainer';
+import { createOversizedRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
+import { oversizedColumnDefinition } from '../utils/columnDefinition';
+import { LinguiContainer } from '../../../../utils/LinguiContainer';
+export default {
+    title: 'Blocks/CommonGrid'
+};
+export var ManyColumnsNoScrollLayout = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, columnLayout: "no-scroll", gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
+ManyColumnsNoScrollLayout.story = {
+    name: 'many columns no-scroll layout'
+};

package/ui/Blocks/CommonGrid/storybook/stories/manyColumnsNormalLayout.stories.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CommonGrid from '../../CommonGridContainer';
+import { createOversizedRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
+import { oversizedColumnDefinition } from '../utils/columnDefinition';
+import { LinguiContainer } from '../../../../utils/LinguiContainer';
+export default {
+    title: 'Blocks/CommonGrid'
+};
+export var ManyColumnsNormalLayoutANoControls = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
+ManyColumnsNormalLayoutANoControls.story = {
+    name: 'many columns normal layout a no controls'
+};

package/ui/Blocks/CommonGrid/storybook/stories/styledCommonGrid.stories.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReduxGrid, createRandomData, gridSelectors, gridDummyActions, extraControlButtons } from '../utils/utils';
+import { onRowAction } from '../utils/actions';
+import { columnDefinitions } from '../utils/columnDefinition';
+import withTheme from '../utils/withTheme';
+import withRouter from '../utils/withRouter';
+import withRedux from '../utils/withRedux';
+import { LinguiContainer } from '../../../../utils/LinguiContainer';
+export default {
+    title: 'Blocks/CommonGrid',
+    decorators: [withTheme, withRouter, withRedux]
+};
+export var Styled = function () {
+    return (_jsx(LinguiContainer, { children: _jsx("div", { className: "styled", children: _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridActions: gridDummyActions, gridSelectors: gridSelectors, extraControlButtons: extraControlButtons }) }) }));
+};

package/ui/Blocks/CommonGrid/storybook/stories/withCustomGridActions.stories.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CommonGrid from '../../CommonGridContainer';
+import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
+import { columnDefinitions } from '../utils/columnDefinition';
+import { onRowAction } from '../utils/actions';
+import { LinguiContainer } from '../../../../utils/LinguiContainer';
+export default {
+    title: 'Blocks/CommonGrid'
+};
+export var WithCustomGridActions = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridSelectors: gridSelectors, gridActions: gridDummyActions }) }));
+};
+WithCustomGridActions.story = {
+    name: 'With custom grid actions'
+};

package/ui/Blocks/CommonGrid/storybook/stories/withForcedCheckboxes.stories.d.ts

@@ -1,4 +1,5 @@
 import { ActionColumn } from '../../types';
+
 export declare const ActionColumnCheckboxes: ActionColumn;
 declare const _default: {
     title: string;

package/ui/Blocks/CommonGrid/storybook/stories/withForcedCheckboxes.stories.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LinguiContainer } from '../../../../utils/LinguiContainer';
+import { onRowEditClick, onRowReadClick, onRowAction } from '../utils/actions';
+import { columnDefinitions } from '../utils/columnDefinition';
+import { ReduxGrid, createRandomData } from '../utils/utils';
+import withRedux from '../utils/withRedux';
+export var ActionColumnCheckboxes = {
+    flexBasis: 160,
+    forceCheckboxes: true
+};
+var components = {
+    ColumnTitle: function (_a) {
+        var title = _a.title, isSortable = _a.isSortable;
+        return _jsx("div", { children: "".concat(title, " is ").concat(isSortable ? '' : 'NOT', " sortable") });
+    }
+};
+export default {
+    title: 'Blocks/CommonGrid',
+    decorators: [withRedux],
+    excludeStories: ['ActionColumnCheckboxes']
+};
+export var WithForcedCheckboxesAndCustomTitle = function () { return (_jsx(LinguiContainer, { children: _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnCheckboxes, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, components: components }) })); };
+WithForcedCheckboxesAndCustomTitle.story = {
+    name: 'With forced checkboxes and custom title'
+};

package/ui/Blocks/CommonGrid/storybook/stories/withQuickFilter.stories.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CommonGrid from '../../CommonGridContainer';
+import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
+import { columnDefinitions } from '../utils/columnDefinition';
+import withTheme from '../utils/withTheme';
+import withRouter from '../utils/withRouter';
+import withRedux from '../utils/withRedux';
+import { LinguiContainer } from '../../../../utils/LinguiContainer';
+export default {
+    title: '@Blocks/CommonGrid',
+    decorators: [withTheme, withRouter, withRedux]
+};
+export var WithQuickFilter = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridActions: gridDummyActions, gridSelectors: gridSelectors, quickFilter: "numberColumn" }) }));
+};
+WithQuickFilter.story = {
+    name: 'with quick filter'
+};

package/ui/Blocks/CommonGrid/storybook/utils/actions.js

@@ -1,10 +1,7 @@
-//#region packages/ui/Blocks/CommonGrid/storybook/utils/actions.ts
-const onRowEditClick = (id, props) => console.log("onRowEditClick", id, props);
-const onRowReadClick = (id, props) => console.log("onRowReadClick", id, props);
-const onRowAction = (id, field, value) => console.log("onRowAction", id, field, value);
-const onRowClick = (id, field, value) => console.log("onRowClick", id, field);
-const onBatchAction = (action, affectedRows) => {
-	console.log("onBatchAction called", action, affectedRows);
+export var onRowEditClick = function (id, props) { return console.log('onRowEditClick', id, props); };
+export var onRowReadClick = function (id, props) { return console.log('onRowReadClick', id, props); };
+export var onRowAction = function (id, field, value) { return console.log('onRowAction', id, field, value); };
+export var onRowClick = function (id, field, value) { return console.log('onRowClick', id, field); };
+export var onBatchAction = function (action, affectedRows) {
+    console.log('onBatchAction called', action, affectedRows);
 };
-//#endregion
-export { onBatchAction, onRowAction, onRowClick, onRowEditClick, onRowReadClick };

package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.d.ts

@@ -1,4 +1,5 @@
-import type { ColumnDefinition } from '../../types';
+import { ColumnDefinition } from '../../types';
+
 export declare const oversizedArrayColumns = 25;
 export declare const oversizedColumnDefinition: {
     name: string;

package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js

@@ -1,125 +1,128 @@
-import { ComplexCell } from "../components/ComplexCell.js";
-import { EnumCellExample } from "../components/EnumCellExample.js";
-import { enumValues } from "./utils.js";
-//#region packages/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.tsx
-const oversizedArrayColumns = 25;
-const oversizedColumnDefinition = new Array(25).fill(null).map((unused, index) => ({
-	name: `column_${index}`,
-	title: `column_${index}`,
-	flexBasis: 120
-}));
-const enumColumn = {
-	name: "enumColumn",
-	title: "Enum Column",
-	flexBasis: 160,
-	filterOptions: enumValues.map((v) => ({
-		value: v,
-		label: v
-	})),
-	filterExtraProps: {
-		isMulti: true,
-		checkAllButton: true
-	},
-	filtering: true,
-	sorting: false,
-	cellComponent: EnumCellExample
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
-const columnDefinitions = [
-	{
-		name: "hiddenColumn",
-		title: "Hidden column",
-		flexBasis: 160,
-		filtering: true,
-		sorting: true,
-		defaultHidden: true
-	},
-	{
-		name: "textColumn",
-		title: "Text column",
-		flexBasis: 160,
-		filtering: true,
-		sorting: true
-	},
-	enumColumn,
-	{
-		name: "enumColumnAsync",
-		title: "Enum Column Async",
-		flexBasis: 160,
-		filterExtraProps: {
-			isMulti: true,
-			checkAllButton: true
-		},
-		filtering: true,
-		sorting: true,
-		asyncLoadKey: "enumColumnAsync"
-	},
-	{
-		name: "numberColumn",
-		title: "Number Column",
-		flexBasis: 160,
-		filtering: true,
-		filteringType: "number",
-		filterExtraProps: { decimals: 2 },
-		sorting: true
-	},
-	{
-		name: "numberFloatColumn",
-		title: "Number Float Column",
-		flexBasis: 160,
-		filtering: true,
-		filteringType: "number",
-		sorting: true,
-		filterExtraProps: { isFloat: true }
-	},
-	{
-		name: "dateColumn",
-		title: "Date Column",
-		flexBasis: 160,
-		filtering: true,
-		filteringType: "date",
-		sorting: true,
-		filterExtraProps: { filterTime: true }
-	},
-	{
-		name: "boolColumn",
-		title: "Bool Column",
-		flexBasis: 160,
-		filtering: true,
-		filteringType: "flag",
-		sorting: true,
-		formatRowValue: (row) => {
-			return row.boolColumn ? "Yes" : "No";
-		}
-	},
-	{
-		name: "advancedColumn",
-		title: "Advanced Column",
-		flexBasis: 160,
-		formatRowValue: (row) => {
-			return `${row.numberColumn / 4 * row.textColumn.length}`;
-		}
-	},
-	{
-		name: "complexColumn",
-		title: "Complex Column",
-		flexBasis: 350,
-		cellComponent: ComplexCell
-	},
-	{
-		name: "alwaysOffColumn",
-		title: "Always Off Column",
-		flexBasis: 0,
-		alwaysOff: true
-	}
+import { ComplexCell } from '../components/ComplexCell';
+import { EnumCellExample } from '../components/EnumCellExample';
+import { enumValues } from './utils';
+export var oversizedArrayColumns = 25;
+export var oversizedColumnDefinition = new Array(oversizedArrayColumns).fill(null).map(function (unused, index) { return ({
+    name: "column_".concat(index),
+    title: "column_".concat(index),
+    flexBasis: 120
+}); });
+export var enumColumn = {
+    name: 'enumColumn',
+    title: 'Enum Column',
+    flexBasis: 160,
+    filterOptions: enumValues.map(function (v) { return ({ value: v, label: v }); }),
+    filterExtraProps: { isMulti: true, checkAllButton: true },
+    filtering: true,
+    sorting: false,
+    cellComponent: EnumCellExample
+};
+export var columnDefinitions = [
+    {
+        name: 'hiddenColumn',
+        title: 'Hidden column',
+        flexBasis: 160,
+        filtering: true,
+        sorting: true,
+        defaultHidden: true
+    },
+    {
+        name: 'textColumn',
+        title: 'Text column',
+        flexBasis: 160,
+        filtering: true,
+        sorting: true
+    },
+    enumColumn,
+    {
+        name: 'enumColumnAsync',
+        title: 'Enum Column Async',
+        flexBasis: 160,
+        filterExtraProps: { isMulti: true, checkAllButton: true },
+        filtering: true,
+        sorting: true,
+        asyncLoadKey: 'enumColumnAsync'
+    },
+    {
+        name: 'numberColumn',
+        title: 'Number Column',
+        flexBasis: 160,
+        filtering: true,
+        filteringType: 'number',
+        filterExtraProps: {
+            decimals: 2
+        },
+        sorting: true
+    },
+    {
+        name: 'numberFloatColumn',
+        title: 'Number Float Column',
+        flexBasis: 160,
+        filtering: true,
+        filteringType: 'number',
+        sorting: true,
+        filterExtraProps: {
+            isFloat: true
+        }
+    },
+    {
+        name: 'dateColumn',
+        title: 'Date Column',
+        flexBasis: 160,
+        filtering: true,
+        filteringType: 'date',
+        sorting: true,
+        filterExtraProps: {
+            filterTime: true
+        }
+    },
+    {
+        name: 'boolColumn',
+        title: 'Bool Column',
+        flexBasis: 160,
+        filtering: true,
+        filteringType: 'flag',
+        sorting: true,
+        formatRowValue: function (row) {
+            return row.boolColumn ? 'Yes' : 'No';
+        }
+    },
+    {
+        name: 'advancedColumn',
+        title: 'Advanced Column',
+        flexBasis: 160,
+        formatRowValue: function (row) {
+            return "".concat((row.numberColumn / 4) * row.textColumn.length);
+        }
+    },
+    {
+        name: 'complexColumn',
+        title: 'Complex Column',
+        flexBasis: 350,
+        cellComponent: ComplexCell
+    },
+    {
+        name: 'alwaysOffColumn',
+        title: 'Always Off Column',
+        flexBasis: 0,
+        alwaysOff: true
+    }
 ];
-const stickyColumn = {
-	name: "stickyColumn",
-	title: "Sticky Column",
-	flexBasis: 160,
-	alwaysOn: true,
-	sticky: true,
-	stickTo: "right"
+export var stickyColumn = {
+    name: 'stickyColumn',
+    title: 'Sticky Column',
+    flexBasis: 160,
+    alwaysOn: true,
+    sticky: true,
+    stickTo: 'right'
 };
-const columnDefinitionsWithSticky = [...columnDefinitions, stickyColumn];
-//#endregion
-export { columnDefinitions, columnDefinitionsWithSticky, enumColumn, oversizedArrayColumns, oversizedColumnDefinition, stickyColumn };
+export var columnDefinitionsWithSticky = __spreadArray(__spreadArray([], columnDefinitions, true), [stickyColumn], false);

package/ui/Blocks/CommonGrid/storybook/utils/utils.d.ts

@@ -1,5 +1,6 @@
-import type { FC } from 'react';
-import { type GridActionsType, rowClassSymbol, type ExtraControlButton } from '../../types';
+import { FC } from 'react';
+import { GridActionsType, rowClassSymbol, ExtraControlButton } from '../../types';
+
 export declare const enumValues: string[];
 export declare const oversizedArrayColumns = 25;
 export declare const gridSelectors: {};