@steroidsjs/core 2.3.0-beta.5 → 2.3.0-beta.7

package/ui/list/Empty/demo/basic.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Empty_1 = __importDefault(require("../Empty"));
+/**
+ * Basic
+ * @order 1
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Empty_1["default"], null))); });

package/ui/list/Empty/demo/custom-text.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * With custom view
+ * @order 2
+ * @col 6
+ */
+export default _default;

package/ui/list/Empty/demo/custom-text.js

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Empty_1 = __importDefault(require("../Empty"));
+/**
+ * With custom view
+ * @order 2
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Empty_1["default"], { text: '\u041A \u0441\u043E\u0436\u0430\u043B\u0435\u043D\u0438\u044E, \u043D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E', 
+        // @ts-ignore
+        view: function (props) { return (React.createElement("div", { className: 'alert alert-primary', role: 'alert' }, props.text)); } }))); });

package/ui/list/Empty/index.d.ts

@@ -0,0 +1,2 @@
+import Empty from './Empty';
+export default Empty;

package/ui/list/Empty/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var Empty_1 = __importDefault(require("./Empty"));
+exports["default"] = Empty_1["default"];

package/ui/list/Grid/Grid.d.ts

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { IListConfig, ListControlPosition } from '../../../hooks/useList';
+import { IControlItem } from '../../nav/Controls/Controls';
+export interface IGridColumn {
+    /**
+     * Атрибут колонки, по которому происходит поиск нужного свойства в items и нужного поля в SearchForm
+     * @example 'Name'
+     */
+    attribute?: string;
+    /**
+     * Свойства для компонента форматирования
+     * @example {component: DateFormatter, format: 'DD MMMM'}
+     */
+    formatter?: Record<string, any>;
+    /**
+     * Заголовок колонки
+     * @example 'Name'
+     */
+    label?: React.ReactNode;
+    /**
+     * Подсказка
+     * @example 'Some text'
+     */
+    hint?: React.ReactNode;
+    /**
+     * CSS-класс для ячейки с заголовком колонки <th>...</th>
+     */
+    headerClassName?: CssClassName;
+    /**
+     * Скрыть или показать колонку
+     * @example true
+     */
+    visible?: boolean;
+    /**
+     * Компонент для кастомизации отображения заголовка колонки
+     * @example MyCustomView
+     */
+    headerView?: any;
+    /**
+     * Свойства для компонента отображения заголовка колонки
+     */
+    headerProps?: any;
+    /**
+     * Компонент для кастомизации отображения значения в ячейке
+     * @example MyCustomView
+     */
+    valueView?: any;
+    /**
+     * Свойства для компонента отображения значения в ячейке
+     */
+    valueProps?: any;
+    /**
+     * CSS-класс для ячейки со значением
+     */
+    className?: CssClassName;
+    /**
+     * Включить возможность сортировки по данным в колонке
+     * @example true
+     */
+    sortable?: boolean;
+}
+/**
+ * Grid
+ * Компонент для представления данных коллекции в виде таблицы.
+ */
+export interface IGridProps extends IListConfig {
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: any;
+    /**
+     * Коллекция с наименованиями и свойствами колонок в таблице
+     * @example [{label: 'Name', attribute: 'name'}, {label: 'Work', attribute: 'work'}]
+     */
+    columns: (string | IGridColumn)[];
+    /**
+     * Коллекция с элементами управления. Данная коллекция отобразится в колонке рядом с каждой записью в таблице.
+     * Например, кнопки для удаления и детального просмотра записи.
+     * @example [{id: 'delete'}, {id: 'view', position: 'left'}]
+     */
+    controls?: IControlItem[] | ((item: any, primaryKey: string) => IControlItem[]);
+    /**
+     * Нужно ли отображать колонку с порядковым номером элемента? Если да, то для каждого элемента в коллекции items
+     * должно быть задано свойство index
+     */
+    itemsIndexing?: any;
+    [key: string]: any;
+}
+export interface IGridViewProps extends Omit<IGridProps, 'onFetch'> {
+    className: CssClassName;
+    columns: (IGridColumn & {
+        label: any;
+    })[];
+    paginationPosition: ListControlPosition;
+    paginationSizePosition: ListControlPosition;
+    layoutNamesPosition: ListControlPosition;
+    renderList: (children: any) => any;
+    renderEmpty: () => any;
+    renderPagination: () => any;
+    renderPaginationSize: () => any;
+    renderLayoutNames: () => any;
+    renderSearchForm: () => any;
+    renderValue: (item: Record<string, unknown>, column: IGridColumn) => any;
+    onFetch: (params?: Record<string, unknown>) => void;
+    onSort: (value: any) => void;
+}
+export default function Grid(props: IGridProps): JSX.Element;

package/ui/list/Grid/Grid.js

@@ -0,0 +1,127 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var upperFirst_1 = __importDefault(require("lodash-es/upperFirst"));
+var isString_1 = __importDefault(require("lodash-es/isString"));
+var react_1 = require("react");
+var hooks_1 = require("../../../hooks");
+var useList_1 = __importDefault(require("../../../hooks/useList"));
+var ControlsColumn_1 = __importDefault(require("../ControlsColumn"));
+var Format_1 = __importDefault(require("../../format/Format"));
+function Grid(props) {
+    var components = hooks_1.useComponents();
+    var _a = useList_1["default"]({
+        listId: props.listId,
+        primaryKey: props.primaryKey,
+        action: props.action,
+        actionMethod: props.actionMethod,
+        pagination: props.pagination,
+        paginationSize: props.paginationSize,
+        sort: props.sort,
+        layout: props.layout,
+        empty: props.empty,
+        searchForm: props.searchForm,
+        autoDestroy: props.autoDestroy,
+        onFetch: props.onFetch,
+        condition: props.condition,
+        addressBar: props.addressBar,
+        scope: props.scope,
+        query: props.query,
+        model: props.model,
+        searchModel: props.searchModel,
+        items: props.items,
+        initialItems: props.initialItems,
+        initialTotal: props.initialTotal,
+        autoFetchOnFormChanges: props.autoFetchOnFormChanges
+    }), list = _a.list, model = _a.model, searchModel = _a.searchModel, paginationPosition = _a.paginationPosition, paginationSizePosition = _a.paginationSizePosition, layoutNamesPosition = _a.layoutNamesPosition, renderList = _a.renderList, renderEmpty = _a.renderEmpty, renderPagination = _a.renderPagination, renderPaginationSize = _a.renderPaginationSize, renderLayoutNames = _a.renderLayoutNames, renderSearchForm = _a.renderSearchForm, onFetch = _a.onFetch, onSort = _a.onSort;
+    var renderLabel = react_1.useCallback(function (column) {
+        if (column.headerView) {
+            var HeaderView = column.headerView;
+            return (React.createElement(HeaderView, __assign({}, column, column.headerProps, { listId: props.listId })));
+        }
+        if (column.label || column.label === '') {
+            return column.label;
+        }
+        var attributeMeta = []
+            .concat((model === null || model === void 0 ? void 0 : model.attributes) || [])
+            .concat((searchModel === null || searchModel === void 0 ? void 0 : searchModel.attributes) || [])
+            .find(function (item) { return column.attribute && item.attribute === column.attribute; });
+        return attributeMeta ? attributeMeta.label : upperFirst_1["default"](column.attribute);
+    }, [model, props.listId, searchModel]);
+    var renderValue = react_1.useCallback(function (item, column) {
+        // Custom component
+        if (column.valueView) {
+            var ValueView = column.valueView;
+            return (React.createElement(ValueView, __assign({}, column, column.valueProps, { listId: props.listId, primaryKey: props.primaryKey, item: item })));
+        }
+        return React.createElement(Format_1["default"], __assign({ item: item, model: props.model }, column, (column.formatter || {})));
+    }, [props.listId, props.model, props.primaryKey]);
+    // Columns
+    var columns = react_1.useMemo(function () { return []
+        .concat({
+        label: __('№'),
+        valueView: function (_a) {
+            var item = _a.item;
+            return item.index + 1;
+        },
+        visible: !!props.itemsIndexing
+    })
+        .concat(props.columns)
+        .concat({
+        valueView: ControlsColumn_1["default"],
+        valueProps: {
+            controls: props.controls
+        },
+        visible: !!props.controls
+    })
+        .map(function (column) { return (isString_1["default"](column) ? { attribute: column } : column); })
+        .filter(function (column) { return column.visible !== false; })
+        .map(function (column) { return (__assign(__assign({}, column), { label: renderLabel(column) })); }); }, [props.columns, props.controls, props.itemsIndexing, renderLabel]);
+    return components.ui.renderView(props.view || 'list.GridView', __assign(__assign({}, props), { paginationPosition: paginationPosition,
+        paginationSizePosition: paginationSizePosition,
+        layoutNamesPosition: layoutNamesPosition,
+        renderList: renderList,
+        renderEmpty: renderEmpty,
+        renderPagination: renderPagination,
+        renderPaginationSize: renderPaginationSize,
+        renderLayoutNames: renderLayoutNames,
+        renderSearchForm: renderSearchForm,
+        renderValue: renderValue,
+        columns: columns,
+        onFetch: onFetch,
+        onSort: onSort, items: (list === null || list === void 0 ? void 0 : list.items) || [] }));
+}
+exports["default"] = Grid;

package/ui/list/Grid/demo/basic.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export declare const items: {
+    id: number;
+    name: string;
+    secondName: string;
+    work: string;
+}[];
+export declare const columns: {
+    label: string;
+    attribute: string;
+}[];
+declare const _default: () => JSX.Element;
+/**
+ * Basic
+ * @order 1
+ * @col 8
+ */
+export default _default;

package/ui/list/Grid/demo/basic.js

@@ -0,0 +1,68 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.columns = exports.items = void 0;
+var React = __importStar(require("react"));
+var Grid_1 = __importDefault(require("../Grid"));
+exports.items = [
+    {
+        id: 1,
+        name: 'Ivan',
+        secondName: 'Ivanov',
+        work: 'development'
+    },
+    {
+        id: 2,
+        name: 'Petr',
+        secondName: 'Petrov',
+        work: 'manager'
+    },
+    {
+        id: 3,
+        name: 'Jhon',
+        secondName: 'Doe',
+        work: 'designer'
+    },
+];
+exports.columns = [
+    {
+        label: 'Name',
+        attribute: 'name'
+    },
+    {
+        label: 'Second name',
+        attribute: 'secondName'
+    },
+    {
+        label: 'Work',
+        attribute: 'work'
+    },
+];
+/**
+ * Basic
+ * @order 1
+ * @col 8
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Grid_1["default"], { listId: 'GridBasicDemo', items: exports.items, columns: exports.columns }))); });

package/ui/list/Grid/demo/controls.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Grid with controls
+ * @order 9
+ * @col 8
+ */
+export default _default;

package/ui/list/Grid/demo/controls.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Grid_1 = __importDefault(require("../Grid"));
+var basic_1 = require("./basic");
+/**
+ * Grid with controls
+ * @order 9
+ * @col 8
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Grid_1["default"], { listId: 'GridControlsDemo', items: basic_1.items, columns: basic_1.columns, controls: [{
+                id: 'delete',
+                onClick: function (e) {
+                    e.preventDefault();
+                    alert("It's deleted");
+                }
+            }] }))); });

package/ui/list/Grid/demo/empty.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Grid with empty data
+ * @order 2
+ * @col 4
+ */
+export default _default;

package/ui/list/Grid/demo/empty.js

@@ -0,0 +1,34 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var Grid_1 = __importDefault(require("../Grid"));
+var React = __importStar(require("react"));
+var basic_1 = require("./basic");
+/**
+ * Grid with empty data
+ * @order 2
+ * @col 4
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Grid_1["default"], { listId: 'GridEmptyDemo', items: [], columns: basic_1.columns, empty: 'Empty data' }))); });

package/ui/list/Grid/demo/formatter.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Grid with DateFormatter (format: 'DD MMMM')
+ * @order 7
+ * @col 6
+ */
+export default _default;

package/ui/list/Grid/demo/formatter.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Grid_1 = __importDefault(require("../Grid"));
+var DateFormatter_1 = __importDefault(require("../../../format/DateFormatter"));
+/**
+ * Grid with DateFormatter (format: 'DD MMMM')
+ * @order 7
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Grid_1["default"], { listId: 'GridFormatterDemo', items: [
+            {
+                id: 1,
+                date: '2021-09-11',
+                route: 'Krasnoyarsk - Moscow'
+            },
+            {
+                id: 2,
+                date: '2021-09-15',
+                route: 'Krasnoyarsk - Krasnodar'
+            },
+            {
+                id: 3,
+                date: '2021-09-20',
+                route: 'Krasnoyarsk - Tomsk'
+            },
+        ], columns: [
+            {
+                attribute: 'route',
+                label: 'Route'
+            },
+            {
+                attribute: 'date',
+                label: 'Date',
+                formatter: {
+                    component: DateFormatter_1["default"],
+                    format: 'DD MMMM'
+                }
+            },
+        ] }))); });

package/ui/list/Grid/demo/indexing.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Grid with indexing items
+ * @order 8
+ * @col 8
+ */
+export default _default;

package/ui/list/Grid/demo/indexing.js

@@ -0,0 +1,48 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Grid_1 = __importDefault(require("../Grid"));
+var basic_1 = require("./basic");
+/**
+ * Grid with indexing items
+ * @order 8
+ * @col 8
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Grid_1["default"], { listId: 'GridIndexingDemo', items: basic_1.items.map(function (item, index) { return (__assign(__assign({}, item), { index: index })); }), columns: basic_1.columns, itemsIndexing: true, paginationSize: {
+            defaultValue: 2,
+            sizes: [2, 3, 4]
+        }, pagination: true }))); });

package/ui/list/Grid/demo/inner-search-form.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const searchForm: {
+    layout: string;
+    fields: {
+        label: string;
+        attribute: string;
+        component: import("../../../form/Field/fieldWrapper").FieldWrapperComponent<import("../../../form/InputField/InputField").IInputFieldProps>;
+    }[];
+};
+declare const _default: () => JSX.Element;
+/**
+ * Grid with inner search form
+ * @order 5
+ * @col 8
+ */
+export default _default;