elab_components 0.0.0

package/dist/index.esm.js

@@ -0,0 +1,658 @@
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import ReactDOM from 'react-dom/client';
+import { Grid, getSelectedState, GridColumn } from '@progress/kendo-react-grid';
+import styled from 'styled-components';
+import { getter, process } from '@progress/kendo-data-query';
+import { Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';
+import { ExcelExport } from '@progress/kendo-react-excel-export';
+import { Input, Checkbox } from '@progress/kendo-react-inputs';
+import { Button } from '@progress/kendo-react-buttons';
+import { DropDownList } from '@progress/kendo-react-dropdowns';
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$1 = "/** @format */\r\n@import '@progress/kendo-theme-material/dist/all';\r\n\r\nbody {\r\n  margin: 0;\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',\r\n    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',\r\n    'Helvetica Neue', sans-serif;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\ncode {\r\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\r\n    monospace;\r\n}\r\n";
+styleInject(css_248z$1);
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+function __spreadArray(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));
+}
+
+function __makeTemplateObject(cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var css_248z = ".App {\r\n  text-align: center;\r\n}\r\n\r\n.App-logo {\r\n  height: 40vmin;\r\n  pointer-events: none;\r\n}\r\n\r\n@media (prefers-reduced-motion: no-preference) {\r\n  .App-logo {\r\n    animation: App-logo-spin infinite 20s linear;\r\n  }\r\n}\r\n\r\n.App-header {\r\n  background-color: #282c34;\r\n  min-height: 100vh;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: calc(10px + 2vmin);\r\n  color: white;\r\n}\r\n\r\n.App-link {\r\n  color: #61dafb;\r\n}\r\n\r\n@keyframes App-logo-spin {\r\n  from {\r\n    transform: rotate(0deg);\r\n  }\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n";
+styleInject(css_248z);
+
+var StyledButton = styled(Button)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
+var OkButton = function (_a) {
+    var props = __rest(_a, []);
+    return React.createElement(StyledButton, __assign({}, props));
+};
+var templateObject_1$3;
+
+var StyledDropDownList = styled(DropDownList)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject([""], [""])));
+var OkDropDownList = function (_a) {
+    var props = __rest(_a, []);
+    return React.createElement(StyledDropDownList, __assign({}, props));
+};
+var templateObject_1$2;
+
+var StyledInput = styled(Input)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject([""], [""])));
+var OkInput = function (_a) {
+    var props = __rest(_a, []);
+    return React.createElement(StyledInput, __assign({}, props));
+};
+var templateObject_1$1;
+
+/** @format */
+var StyledGrid = styled(Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var OkGrid = function (_a) {
+    var props = __rest(_a, []);
+    var resizable = props.resizable, reorderable = props.reorderable, data = props.data, pageSizeValue = props.pageSizeValue, filterable = props.filterable, style = props.style, sortable = props.sortable, groupable = props.groupable, editField = props.editField, skip = props.skip, take = props.take, detail = props.detail, expandField = props.expandField, dataItemKey = props.dataItemKey, columnConfigs = props.columnConfigs, setSelectedState = props.setSelectedState, selectedState = props.selectedState; props.setPageSizeValue; props.setPage; var columnOption = props.columnOption, setColumnOption = props.setColumnOption, expandChange = props.expandChange, setSearchKeyword = props.setSearchKeyword, searchKeyword = props.searchKeyword, allColumnsField = props.allColumnsField, expandedRows = props.expandedRows;
+    var excelExport = React.useRef(null);
+    var _b = useState([]), newData = _b[0], setNewData = _b[1];
+    var _c = useState(), runQueriesFilter = _c[0]; _c[1];
+    var _d = React.useState(null), editID = _d[0]; _d[1];
+    var isRowExpanded = function (productID) {
+        return expandedRows.includes(productID);
+    };
+    var idGetter = getter(dataItemKey);
+    var filteredProducts = useMemo(function () {
+        var lowerSearchTerm = searchKeyword.toLowerCase();
+        return data
+            .filter(function (product) {
+            return Object.values(product).some(function (value) {
+                if (typeof value === 'object' && value !== null) {
+                    return Object.values(value).some(function (nestedValue) {
+                        return nestedValue.toString().toLowerCase().includes(lowerSearchTerm);
+                    });
+                }
+                return value.toString().toLowerCase().includes(lowerSearchTerm);
+            });
+        })
+            .map(function (product, index) {
+            var _a;
+            return (__assign(__assign({}, product), (_a = { expanded: isRowExpanded(product.id) }, _a['selected'] = selectedState[idGetter(product)], _a.inEdit = product.id === editID, _a['formDataIndex'] = index, _a)));
+        });
+    }, [data, searchKeyword, expandedRows, selectedState, editID]);
+    console.log('filteredProducts', filteredProducts);
+    var _e = React.useState({
+        take: 10,
+        skip: 0,
+        group: [],
+        sort: [],
+        filter: {
+            logic: 'and',
+            filters: [],
+        },
+    }), dataState = _e[0], setDataState = _e[1];
+    var _f = React.useState(columnConfigs), columns = _f[0], setColumns = _f[1];
+    var _g = React.useState(function () {
+        var savedOptions = localStorage.getItem('gridOptions');
+        return savedOptions
+            ? JSON.parse(savedOptions)
+            : {
+                filter: false,
+                groupable: false,
+                filterByQueries: false,
+            };
+    }), gridOptions = _g[0], setGridOptions = _g[1];
+    var _h = React.useState(process(data, dataState)), dataResult = _h[0], setDataResult = _h[1];
+    var onDataStateChange = function (e) {
+        setDataState(e.dataState);
+        setDataResult(process(data, e.dataState));
+    };
+    var onSelectionChange = React.useCallback(function (event) {
+        var newSelectedState = getSelectedState({
+            event: event,
+            selectedState: selectedState,
+            dataItemKey: dataItemKey,
+        });
+        setSelectedState(newSelectedState);
+    }, [selectedState]);
+    var onHeaderSelectionChange = React.useCallback(function (event) {
+        var checkboxElement = event.syntheticEvent.target;
+        var checked = checkboxElement.checked;
+        var newSelectedState = {};
+        event.dataItems.forEach(function (item) {
+            newSelectedState[idGetter(item)] = checked;
+        });
+        setSelectedState(newSelectedState);
+    }, []);
+    var onColumnReorderChange = useCallback(function (e) {
+        console.log('GridColumnReorderEvent', e.columnId);
+        console.log('GridColumnReorderEvent', e.columns);
+        console.log('GridColumnReorderEvent', e.nativeEvent);
+        console.log('GridColumnReorderEvent', e.target);
+        // use a oderIndex
+    }, []);
+    var onItemChange = function (event) {
+        // const editedItemID = event.dataItem;
+    };
+    useEffect(function () {
+        setDataState(function (item) {
+            return __assign(__assign({}, item), { filter: runQueriesFilter });
+        });
+    }, [data, runQueriesFilter]);
+    useEffect(function () {
+        setDataResult(process(data, dataState));
+    }, [data, dataState]);
+    console.log(gridOptions);
+    console.log('dataResult', dataResult);
+    var onFilterChange = function (e) {
+        setSearchKeyword(e.target.value);
+    };
+    var exportExport = function () {
+        if (excelExport.current !== null) {
+            excelExport.current.save(newData);
+        }
+    };
+    var addNew = function () {
+        var newDataItem = {
+            id: '',
+            title: 'string',
+            price: 0,
+            description: 'string',
+            categoryId: 0,
+            images: 'string',
+        };
+        setNewData(__spreadArray([newDataItem], newData, true));
+    };
+    return (React.createElement("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 25,
+            marginTop: '25px',
+            marginLeft: '10px',
+            marginRight: '10px',
+        } },
+        ' ',
+        React.createElement("div", null,
+            React.createElement("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                } },
+                React.createElement(OkInput, { style: {
+                        width: '30%',
+                    }, value: searchKeyword, onChange: function (e) { return onFilterChange(e); }, placeholder: "Filter by keyword" }),
+                React.createElement("div", { style: { marginLeft: 'auto', display: 'flex', gap: '15px' } },
+                    React.createElement(OkButton, { onClick: function () {
+                            return setColumnOption(function (prevState) { return (__assign(__assign({}, prevState), { columnOptionModel: true })); });
+                        }, themeColor: 'primary', type: "button" }, "Column option"),
+                    React.createElement(OkButton, { style: {
+                            width: '120px',
+                        }, title: "Export Excel", themeColor: 'primary', type: "button", onClick: exportExport }, "Export"),
+                    React.createElement(OkButton, { themeColor: 'primary', type: "button" }, "Open in Queries"),
+                    React.createElement(OkButton, { onClick: addNew, themeColor: 'primary', type: "button" }, "Create +"),
+                    React.createElement(OkButton, { onClick: function () {
+                            return setColumnOption(function (prevState) { return (__assign(__assign({}, prevState), { columnConfigsModel: true })); });
+                        }, themeColor: 'primary', type: "button" }, "view option")))),
+        React.createElement(ExcelExport, { data: dataResult, ref: excelExport },
+            React.createElement(StyledGrid, __assign({ onHeaderSelectionChange: function (e) {
+                    return onHeaderSelectionChange(e);
+                }, onSelectionChange: function (e) {
+                    return onSelectionChange(e);
+                }, onColumnReorder: function (e) {
+                    onColumnReorderChange(e);
+                }, skip: skip, onExpandChange: function (e) {
+                    expandChange(e);
+                }, onDataStateChange: onDataStateChange, onItemChange: onItemChange, pageable: {
+                    buttonCount: 4,
+                    pageSizes: [2, 10, 15, 'All'],
+                    pageSizeValue: pageSizeValue,
+                }, filterable: filterable, editField: editField, reorderable: reorderable, groupable: groupable, resizable: resizable, style: style, data: filteredProducts, dataItemKey: dataItemKey, take: take, sortable: sortable, detail: detail, expandField: expandField }, dataState), columns.map(function (col, index) { return (React.createElement(GridColumn, { filterable: true, key: index, editable: true, field: col.field, title: col.title, format: col.format, cell: col.cell, width: col.width, headerSelectionValue: col.headerSelectionValue, editor: col.editor })); }))),
+        columnOption.columnOptionModel && (React.createElement(ColumnAdd, { setColumnOption: setColumnOption, setColumns: setColumns, columns: columns, allColumnsField: allColumnsField, dataResult: dataResult, setDataResult: setDataResult })),
+        columnOption.columnConfigsModel && (React.createElement(GridFeatureEnableHandler, { gridOptions: gridOptions, setGridOptions: setGridOptions, setColumnOption: setColumnOption }))));
+};
+var SortableItem = function (_a) {
+    var filterColumnUnShows = _a.filterColumnUnShows, handleColumnChange = _a.handleColumnChange, handleRemoveColumn = _a.handleRemoveColumn, selectedColumn = _a.selectedColumn, index = _a.index, col = _a.col;
+    return (React.createElement("li", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            marginBottom: '10px',
+        } },
+        React.createElement(OkDropDownList, { style: {
+                backgroundColor: 'white',
+            }, data: filterColumnUnShows !== null && filterColumnUnShows !== void 0 ? filterColumnUnShows : [], dataItemKey: "field", textField: "title", value: selectedColumn[index] || '', onChange: function (event) { return handleColumnChange(event, index, 'existing'); } }),
+        React.createElement("div", { style: {
+                fontSize: '24px',
+                marginRight: '10px',
+                marginLeft: '10px',
+                fontWeight: '700px',
+                color: 'red',
+            }, onClick: function () { return handleRemoveColumn(col.id); } }, "X")));
+};
+var ColumnAdd = function (_a) {
+    var columns = _a.columns, setColumns = _a.setColumns, setColumnOption = _a.setColumnOption, allColumnsField = _a.allColumnsField;
+    var _b = useState([]), selectedColumn = _b[0], setSelectedColumn = _b[1];
+    var handleAddColumn = function () {
+        setSelectedColumn(function (item) {
+            return __spreadArray(__spreadArray([], item, true), [
+                {
+                    field: '',
+                    title: '',
+                    id: item.length + 1,
+                },
+            ], false);
+        });
+    };
+    var handleRemoveColumn = function (field) {
+        setSelectedColumn(selectedColumn.filter(function (col) { return col.id !== field; }));
+    };
+    var handleColumnChange = function (e, index, type) {
+        var newValue = e.target.value;
+        if (type === 'existing') {
+            var newSelectedColumn = __spreadArray([], selectedColumn, true);
+            newSelectedColumn[index] = newValue;
+            setSelectedColumn(newSelectedColumn);
+        }
+    };
+    var handleSaveColumns = function () {
+        var dynamicColumns = selectedColumn.map(function (col) {
+            var dynamicColumn = {};
+            Object.keys(col).forEach(function (key) {
+                dynamicColumn[key] = col[key];
+            });
+            return dynamicColumn;
+        });
+        setColumns(dynamicColumns);
+        setColumnOption(function (prevState) { return (__assign(__assign({}, prevState), { columnOptionModel: false })); });
+    };
+    var filterColumnUnShows = useMemo(function () {
+        return allColumnsField.filter(function (allCol) {
+            return !selectedColumn.some(function (col) { return col.field === allCol.field; });
+        });
+    }, [selectedColumn, allColumnsField]);
+    useEffect(function () {
+        var filteredData = columns.filter(function (item) { return item.title !== 'Actions' && item.id !== 8; });
+        setSelectedColumn(filteredData);
+    }, [columns]);
+    return (React.createElement("div", null,
+        React.createElement(Dialog, { onClose: function () {
+                return setColumnOption(function (prevState) { return (__assign(__assign({}, prevState), { columnOptionModel: false })); });
+            }, width: 500, height: 700, style: {
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'right',
+                width: '100%',
+            }, title: "Column options" },
+            React.createElement("p", null, "Add or remove columns."),
+            React.createElement("div", { style: { marginTop: '20px' } },
+                selectedColumn.map(function (col, index) {
+                    return (React.createElement(SortableItem, { key: col.id, filterColumnUnShows: filterColumnUnShows, handleColumnChange: handleColumnChange, handleRemoveColumn: handleRemoveColumn, selectedColumn: selectedColumn, index: index, col: col }));
+                }),
+                React.createElement(OkButton, { disabled: selectedColumn.length == allColumnsField.length, style: { marginTop: '10px' }, onClick: handleAddColumn }, "+ Add Column")),
+            React.createElement(DialogActionsBar, null,
+                React.createElement(OkButton, { disabled: selectedColumn.some(function (column) {
+                        return column.field === '' && column.title === '';
+                    }), style: { marginTop: '10px' }, onClick: handleSaveColumns, themeColor: "primary" }, "Save"),
+                React.createElement(OkButton, { onClick: function () {
+                        return setColumnOption(function (prevState) { return (__assign(__assign({}, prevState), { columnOptionModel: false })); });
+                    }, style: { marginTop: '10px' } }, "Cancel")))));
+};
+var GridFeatureEnableHandler = function (_a) {
+    var setColumnOption = _a.setColumnOption, gridOptions = _a.gridOptions, setGridOptions = _a.setGridOptions;
+    var handleCheckboxChange = function (option, value) {
+        console.log(option, value);
+        setGridOptions(function (prevState) {
+            var _a;
+            var updatedState = __assign(__assign({}, prevState), (_a = {}, _a[option] = value, _a));
+            localStorage.setItem('gridOptions', JSON.stringify(updatedState));
+            return updatedState;
+        });
+    };
+    var handleCancel = function () {
+        setColumnOption(function (prevState) { return (__assign(__assign({}, prevState), { columnConfigsModel: false })); });
+    };
+    return (React.createElement("div", null,
+        React.createElement(Dialog, { onClose: handleCancel, width: 400, height: 400, title: "Column Settings", className: "k-dialog-wrapper" },
+            React.createElement("div", { style: { padding: '20px' } },
+                React.createElement("p", { style: { fontSize: '14px', color: '#666' } }, "Customize the column settings for the grid by enabling or disabling features below."),
+                React.createElement("div", { style: { marginTop: '20px' } },
+                    React.createElement("div", { className: "k-form-field" },
+                        React.createElement(Checkbox, { size: "large", style: {
+                                fontSize: '24px',
+                            }, label: "Enable Filtering", checked: gridOptions.filter, onChange: function (e) { return handleCheckboxChange('filter', e.value); } })),
+                    React.createElement("div", { className: "k-form-field", style: { marginTop: '10px' } },
+                        React.createElement(Checkbox, { style: {
+                                fontSize: '24px',
+                            }, size: "large", label: "Enable Grouping", checked: gridOptions.groupable, onChange: function (e) {
+                                return handleCheckboxChange('groupable', e.value);
+                            } })),
+                    React.createElement("div", { className: "k-form-field", style: { marginTop: '10px' } },
+                        React.createElement(Checkbox, { size: "large", style: {
+                                fontSize: '24px',
+                            }, label: "Enable Filter by Queries", checked: gridOptions.filterByQueries, onChange: function (e) {
+                                return handleCheckboxChange('filterByQueries', e.value);
+                            } })))))));
+};
+var templateObject_1;
+
+/** @format */
+var DATA_ITEM_KEY = 'id';
+var SELECTED_FIELD = 'selected';
+var initialDataState = {
+    take: 10,
+    skip: 0,
+    group: [{ field: 'UnitsInStock' }, { field: 'ProductName' }],
+};
+var allColumnsField = [
+    { field: 'id', title: 'ID', type: 'text' },
+    { field: 'title', title: 'Title', type: 'text' },
+    { field: 'price', title: 'Price', type: 'number' },
+    { field: 'description', title: 'Description', type: 'text' },
+    { field: 'createdAt', title: 'Creation Date', type: 'date' },
+    { field: 'updatedAt', title: 'Last Updated', type: 'date' },
+];
+var UnitPriceCell = function (props) {
+    var dataItem = props.dataItem, field = props.field;
+    var value = dataItem[field];
+    var style = {
+        backgroundColor: value > 20 ? 'lightgreen' : 'lightcoral',
+    };
+    return React.createElement("td", { style: style }, dataItem.price);
+};
+var DetailComponent = function (props) {
+    var dataItem = props.dataItem;
+    return (React.createElement("section", null,
+        React.createElement("p", null,
+            React.createElement("strong", null, "In Stock:"),
+            " ",
+            dataItem.UnitsInStock,
+            " units"),
+        React.createElement("p", null,
+            React.createElement("strong", null, "On Order:"),
+            " ",
+            dataItem.UnitsOnOrder,
+            " units"),
+        React.createElement("p", null,
+            React.createElement("strong", null, "Reorder Level:"),
+            " ",
+            dataItem.ReorderLevel,
+            " units"),
+        React.createElement("p", null,
+            React.createElement("strong", null, "Discontinued:"),
+            " ",
+            dataItem.Discontinued)));
+};
+var EditButtonCell = function (props) {
+    var dataItem = props.dataItem, onEdit = props.onEdit;
+    return (React.createElement("td", null,
+        React.createElement(OkButton, { onClick: function () { return onEdit(dataItem); }, icon: "edit" }, "Edit")));
+};
+function App() {
+    var _this = this;
+    var _a = useState([]), data = _a[0], setData = _a[1];
+    var handleEdit = function (dataItem) {
+        data.map(function (product) {
+            return product.ProductID === dataItem.ProductID
+                ? __assign(__assign({}, product), { inEdit: true }) : product;
+        });
+    };
+    var checkHeaderSelectionValue = function () { };
+    var apiConfigs = [
+        {
+            id: 1,
+            field: 'id',
+            title: 'ID',
+            editable: false,
+            editor: 'text',
+        },
+        {
+            id: 2,
+            field: 'title',
+            title: 'Title',
+            editable: true,
+            editor: 'text',
+        },
+        {
+            id: 3,
+            field: 'price',
+            title: 'Price',
+            editable: true,
+            editor: 'numeric',
+            cell: UnitPriceCell,
+        },
+        {
+            id: 4,
+            field: 'description',
+            title: 'Description',
+            editor: 'numeric',
+            editable: true,
+            width: '400px',
+        },
+    ];
+    var columnConfigs = __spreadArray(__spreadArray([
+        {
+            id: 8,
+            field: SELECTED_FIELD,
+            title: '',
+            width: '70px',
+            headerSelectionValue: checkHeaderSelectionValue(),
+        }
+    ], apiConfigs, true), [
+        {
+            id: 10,
+            field: '',
+            title: 'Actions',
+            cell: function (props) { return (React.createElement(EditButtonCell, __assign({}, props, { onEdit: handleEdit }))); },
+        },
+    ], false);
+    var _b = useState([]), expandedRows = _b[0], setExpandedRows = _b[1];
+    var _c = useState(''), searchKeyword = _c[0], setSearchKeyword = _c[1];
+    var _d = useState(initialDataState), page = _d[0], setPage = _d[1];
+    var _e = React.useState(), pageSizeValue = _e[0], setPageSizeValue = _e[1];
+    var _f = React.useState({}), selectedState = _f[0], setSelectedState = _f[1];
+    var _g = useState({
+        columnOptionModel: false,
+        columnConfigsModel: false,
+        runQueriesModel: false,
+    }), columnOption = _g[0], setColumnOption = _g[1];
+    var handleExpandChange = function (event) {
+        var dataItem = event.dataItem;
+        var productID = dataItem.id;
+        setExpandedRows(function (prevExpandedRows) {
+            return prevExpandedRows.includes(productID)
+                ? prevExpandedRows.filter(function (id) { return id !== productID; })
+                : __spreadArray(__spreadArray([], prevExpandedRows, true), [productID], false);
+        });
+    };
+    var onHeaderSelectionChange = React.useCallback(function (event) {
+        var checkboxElement = event.syntheticEvent.target;
+        checkboxElement.checked;
+    }, []);
+    var onSelectionChange = function (event) {
+        event.dataItem.id;
+    };
+    useEffect(function () {
+        var fetchData = function () { return __awaiter(_this, void 0, void 0, function () {
+            var response, data_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 3, , 4]);
+                        return [4 /*yield*/, fetch('https://api.escuelajs.co/api/v1/products?limit=0&offset=0')];
+                    case 1:
+                        response = _a.sent();
+                        if (!response.ok) {
+                            throw new Error('Network response was not ok');
+                        }
+                        return [4 /*yield*/, response.json()];
+                    case 2:
+                        data_1 = _a.sent();
+                        setData(data_1);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        _a.sent();
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); };
+        fetchData();
+    }, []);
+    return (React.createElement("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 25,
+            marginTop: '25px',
+            marginLeft: '10px',
+            marginRight: '10px',
+        } },
+        React.createElement(OkGrid, { data: data, columnConfigs: columnConfigs, detailComponent: DetailComponent, expandChange: handleExpandChange, page: page, pageSizeValue: pageSizeValue, setPageSizeValue: setPageSizeValue, setPage: setPage, dataItemKey: DATA_ITEM_KEY, selectedField: SELECTED_FIELD, onHeaderSelectionChange: onHeaderSelectionChange, onSelectionChange: onSelectionChange, expandedRows: expandedRows, selectedState: selectedState, setSelectedState: setSelectedState, columnOption: columnOption, setColumnOption: setColumnOption, apiColumnConfig: apiConfigs, style: {
+                maxHeight: '550px',
+            }, reorderable: false, resizable: false, sortable: {
+                mode: 'single',
+                allowUnsort: true,
+            }, editField: '', filterable: false, groupable: false, searchKeyword: searchKeyword, setSearchKeyword: setSearchKeyword, allColumnsField: allColumnsField })));
+}
+
+/** @format */
+// import reportWebVitals from './reportWebVitals';
+// export {
+//   OkArcGauge,
+//   OkButton,
+//   OkButtonGroup,
+//   OkCalender,
+//   OkChart,
+//   OkDateInput,
+//   OkDateRangePicker,
+//   OkDateTimePicker,
+//   OkDialog,
+//   OkDropDownButton,
+//   OkDropDownList,
+//   OkEditor,
+//   OkGrid,
+//   OkInput,
+//   OkMaskedTextBox,
+//   OkMultiSelect,
+//   OkMultiViewCalendar,
+//   OkNumericTextBox,
+//   OkSplitButton,
+//   OkSwitch,
+//   OkTimePicker,
+//   OkToolbar,
+//   OkTreeView,
+//   OkWindow,
+//   OkDrawer,
+//   OkDrawerContent,
+// };
+var root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(React.createElement(React.StrictMode, null,
+    React.createElement(App, null)));
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}