@steroidsjs/core 2.1.0-beta.10 → 2.1.0-beta.14

package/components/StoreComponent.js

@@ -59,7 +59,7 @@ var StoreComponent = /** @class */ (function () {
                     : history_1.createBrowserHistory;
             this.history = createHistory(__assign(__assign({}, get_1["default"](initialState, 'config.store.history', {})), config.history));
             // Add '?' for fix connected-react-router
-            if (process.env.IS_SSR && !this.history.location.search && process.env.PLATFORM !== 'mobile') {
+            if (process.env.IS_SSR && !this.history.location.search) {
                 this.history.location.search = '?';
             }
             this._routerReducer = connected_react_router_1.connectRouter(this.history);

package/hoc/file.d.ts

@@ -18,6 +18,7 @@ export interface IFileHocOutput {
     files?: any[];
     onBrowse?: any;
     onRemove?: any;
+    onAdd?: any;
 }
 declare const _default: () => any;
 export default _default;

package/hooks/useAbsolutePositioning.d.ts

@@ -10,6 +10,11 @@ interface IStyleObj {
  */
 declare type Position = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | string;
 export interface IAbsolutePositioningInputProps {
+    /**
+     * Включает "умное" позиционирование - если компонент не может быть помещен в промежуток между целевым компонентом
+     * и краем viewport, тогда он будет показан в противоположном направлении от заданного в свойстве position.
+     */
+    autoPositioning?: boolean;
     /**
      * Дочерние элементы
      */

package/hooks/useAbsolutePositioning.js

@@ -12,11 +12,11 @@ function useAbsolutePositioning(props) {
     }), style = _d[0], setStyle = _d[1];
     var timerRef = react_1.useRef(null);
     var calculateAbsolutePosition = react_1.useCallback(function (newPosition, childRef, componentSize) {
-        if (newPosition === void 0) { newPosition = 'pos'; }
         var newStyle = { left: null, right: null, top: null };
         var _a = childRef.getBoundingClientRect(), top = _a.top, right = _a.right, left = _a.left, width = _a.width, height = _a.height;
         var parentDimensions = { top: top, right: right, left: left, width: width, height: height };
         parentDimensions.top += window.scrollY;
+        var useAutoPositioning = props.autoPositioning;
         // eslint-disable-next-line default-case
         switch (newPosition) {
             case 'top':
@@ -24,7 +24,7 @@ function useAbsolutePositioning(props) {
             case 'topRight':
                 // Проверка - выходит ли tooltip за верхний край страницы?
                 // Если да - меняем позицию на bottom
-                if ((parentDimensions.top - window.scrollY) <= Math.round(componentSize.height + props.gap)) {
+                if (useAutoPositioning && ((parentDimensions.top - window.scrollY) <= Math.round(componentSize.height + props.gap))) {
                     newStyle.top = parentDimensions.top + parentDimensions.height;
                     newPosition = newPosition.replace('top', 'bottom');
                 }
@@ -35,9 +35,9 @@ function useAbsolutePositioning(props) {
             case 'bottom':
             case 'bottomLeft':
             case 'bottomRight':
-                /// Проверка - выходит ли tooltip за нижний край страницы?
+                // Проверка - выходит ли tooltip за нижний край страницы?
                 // Если да - меняем позицию на top
-                if ((window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY))
+                if (useAutoPositioning && ((window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY)))
                     <= Math.round(componentSize.height + props.gap)) {
                     newStyle.top = parentDimensions.top - componentSize.height;
                     newPosition = newPosition.replace('bottom', 'top');
@@ -51,7 +51,7 @@ function useAbsolutePositioning(props) {
             case 'leftBottom':
                 // Проверка - выходит ли tooltip за левый край страницы?
                 // Если да - меняем позицию на right
-                if (parentDimensions.left <= Math.round(componentSize.width + props.gap)) {
+                if (useAutoPositioning && (parentDimensions.left <= Math.round(componentSize.width + props.gap))) {
                     newStyle.left = parentDimensions.right;
                     newPosition = newPosition.replace('left', 'right');
                 }
@@ -64,7 +64,7 @@ function useAbsolutePositioning(props) {
             case 'rightBottom':
                 // Проверка - выходит ли tooltip за правый край страницы?
                 // Если да - меняем позицию на left
-                if (document.body.clientWidth - parentDimensions.right <= Math.round(componentSize.width + props.gap)) {
+                if (useAutoPositioning && (document.body.clientWidth - parentDimensions.right <= Math.round(componentSize.width + props.gap))) {
                     newStyle.left = parentDimensions.left - componentSize.width;
                     newPosition = newPosition.replace('right', 'left');
                 }

package/hooks/useFile.js

@@ -39,6 +39,7 @@ function generateBackendUrl(props) {
     });
 }
 function useFile(props) {
+    console.log(props.imagesOnly);
     var uploader = useInitial_1["default"](function () { return new fileup_core_1["default"](__assign(__assign({ dropArea: {}, backendUrl: generateBackendUrl(props) }, props.uploader), { form: __assign(__assign({}, (props.uploader && props.uploader.form)), { multiple: props.multiple }) })); });
     /**
      * Force component update when file status or progress changes
@@ -178,18 +179,29 @@ function useFile(props) {
     /**
      * Remove selected file from uploader
      * @param {File} fileToRemove
-     * @private
      */
     var onRemove = function (fileToRemove) {
         uploader.queue.remove([fileToRemove]);
         forceUpdate();
     };
     var files = [].concat(uploader.queue.getFiles());
+    /**
+     * Add file to uploader
+     * @param {File} newFile
+     */
+    var onAdd = function (newFile) {
+        if (!props.multiple) {
+            uploader.queue.remove(files);
+        }
+        uploader.queue.add([newFile]);
+        forceUpdate();
+    };
     return {
         uploader: uploader,
         files: files,
         onBrowse: onBrowse,
-        onRemove: onRemove
+        onRemove: onRemove,
+        onAdd: onAdd
     };
 }
 exports["default"] = useFile;

package/package.json

@@ -1,84 +1,85 @@
 {
-  "name": "@steroidsjs/core",
-  "version": "2.1.0-beta.10",
-  "description": "",
-  "author": "Vladimir Kozhin <hello@kozhindev.com>",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/steroids/react"
-  },
-  "main": "dist/index.ts",
-  "types": "dist/index.d.ts",
-  "exports": {
-    "./": "./dist"
-  },
-  "license": "MIT",
-  "homepage": "https://github.com/steroids/react",
-  "bugs": {
-    "url": "https://github.com/steroids/react/issues"
-  },
-  "scripts": {
-    "docs": "typedoc --ignoreCompilerErrors --json typedoc.json .",
-    "test": "jest",
-    "build": "tsc && cp ./{package.json,LICENSE,README.md} dist/ && cp src/index.d.ts dist/"
-  },
-  "dependencies": {
-    "axios": "^0.21.1",
-    "connected-react-router": "^6.9.1",
-    "domready": "^1.0.8",
-    "dot-prop-immutable": "^2.1.0",
-    "fileup-core": "^1.2.0",
-    "history": "^4.10.1",
-    "intl-messageformat": "^2.2.0",
-    "js-cookie": "^2.2.1",
-    "load-js": "^3.0.3",
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
-    "moment": "^2.29.1",
-    "path-to-regexp": "^1.7.0",
-    "qs": "^6.9.4",
-    "query-string": "^6.14.0",
-    "react": "^17.0.2",
-    "react-click-outside": "^3.0.1",
-    "react-day-picker": "^7.4.8",
-    "react-dom": "^17.0.2",
-    "react-grid-gallery": "^0.4.8",
-    "react-input-mask": "^3.0.0-alpha.2",
-    "react-redux": "^7.1.1",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "react-use": "^17.1.0",
-    "redux": "^4.0.4",
-    "redux-mock-store": "^1.5.4"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.13.14",
-    "@babel/core": "^7.13.15",
-    "@babel/preset-env": "^7.13.15",
-    "@babel/preset-react": "^7.13.13",
-    "@babel/preset-typescript": "^7.13.0",
-    "@types/enzyme": "^3.10.8",
-    "@types/jest": "^26.0.22",
-    "@types/markdown-to-jsx": "^6.11.3",
-    "@types/reach__router": "^1.3.7",
-    "@types/react": "=17.0.3",
-    "@types/react-color": "^3.0.4",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/react-syntax-highlighter": "^13.5.0",
-    "@types/webpack-env": "^1.16.0",
-    "@typescript-eslint/eslint-plugin": "^4.15.0",
-    "@typescript-eslint/parser": "^4.15.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
-    "enzyme": "^3.11.0",
-    "eslint": "^7.20.0",
-    "eslint-config-airbnb": "18.2.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^1.7.0",
-    "jest": "^26.6.3",
-    "jest-enzyme": "^7.1.2",
-    "ts-jest": "^26.5.1",
-    "typescript": "^4.1.3"
-  }
+	"name": "@steroidsjs/core",
+	"version": "2.1.0-beta.14",
+	"description": "",
+	"author": "Vladimir Kozhin <hello@kozhindev.com>",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/steroids/react"
+	},
+	"main": "dist/index.ts",
+	"types": "dist/index.d.ts",
+	"exports": {
+		"./": "./dist"
+	},
+	"license": "MIT",
+	"homepage": "https://github.com/steroids/react",
+	"bugs": {
+		"url": "https://github.com/steroids/react/issues"
+	},
+	"scripts": {
+		"docs": "typedoc --ignoreCompilerErrors --json typedoc.json .",
+		"test": "jest",
+		"build": "tsc && cp ./{package.json,LICENSE,README.md} dist/ && cp src/index.d.ts dist/"
+	},
+	"dependencies": {
+		"axios": "^0.21.1",
+		"connected-react-router": "^6.9.1",
+		"domready": "^1.0.8",
+		"dot-prop-immutable": "^2.1.0",
+		"fileup-core": "^1.2.0",
+		"history": "^4.10.1",
+		"intl-messageformat": "^2.2.0",
+		"js-cookie": "^2.2.1",
+		"load-js": "^3.0.3",
+		"lodash": "^4.17.21",
+		"lodash-es": "^4.17.21",
+		"moment": "^2.29.1",
+		"path-to-regexp": "^1.7.0",
+		"qs": "^6.9.4",
+		"query-string": "^6.14.0",
+		"react": "^17.0.2",
+		"react-click-outside": "^3.0.1",
+		"react-day-picker": "^7.4.8",
+		"react-dom": "^17.0.2",
+		"react-grid-gallery": "^0.4.8",
+		"react-image-crop": "^9.0.2",
+		"react-input-mask": "^3.0.0-alpha.2",
+		"react-redux": "^7.1.1",
+		"react-router": "^5.2.0",
+		"react-router-dom": "^5.2.0",
+		"react-use": "^17.1.0",
+		"redux": "^4.0.4",
+		"redux-mock-store": "^1.5.4"
+	},
+	"devDependencies": {
+		"@babel/cli": "^7.13.14",
+		"@babel/core": "^7.13.15",
+		"@babel/preset-env": "^7.13.15",
+		"@babel/preset-react": "^7.13.13",
+		"@babel/preset-typescript": "^7.13.0",
+		"@types/enzyme": "^3.10.8",
+		"@types/enzyme-adapter-react-16": "^1.0.6",
+		"@types/jest": "^26.0.22",
+		"@types/markdown-to-jsx": "^6.11.3",
+		"@types/reach__router": "^1.3.7",
+		"@types/react": "=17.0.3",
+		"@types/react-color": "^3.0.4",
+		"@types/react-syntax-highlighter": "^13.5.0",
+		"@types/webpack-env": "^1.16.0",
+		"@typescript-eslint/eslint-plugin": "^4.15.0",
+		"@typescript-eslint/parser": "^4.15.0",
+		"@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
+		"enzyme": "^3.11.0",
+		"eslint": "^7.20.0",
+		"eslint-config-airbnb": "18.2.1",
+		"eslint-plugin-import": "^2.22.1",
+		"eslint-plugin-jsx-a11y": "^6.4.1",
+		"eslint-plugin-react": "^7.21.5",
+		"eslint-plugin-react-hooks": "^1.7.0",
+		"jest": "^26.6.3",
+		"jest-enzyme": "^7.1.2",
+		"ts-jest": "^26.5.1",
+		"typescript": "^4.1.3"
+	}
 }

package/reducers/index.js

@@ -38,4 +38,4 @@ exports["default"] = (function (asyncReducers) { return redux_1.combineReducers(
     list: list_1["default"],
     notifications: notifications_1["default"],
     modal: modal_1["default"],
-    screen: screen_1["default"] }, asyncReducers), { router: function (state, action) { return router_1["default"](asyncReducers.router(state, action), action); } })); });
+    screen: screen_1["default"] }, asyncReducers), { router: function (state, action) { return router_1["default"](asyncReducers.router ? asyncReducers.router(state, action) : {}, action); } })); });

package/ui/content/Detail/Detail.d.ts

@@ -0,0 +1,102 @@
+import React from 'react';
+import { IDetailItemProps } from './DetailItem';
+import { IControlItem } from '../../nav/Controls/Controls';
+/**
+ * Detail
+ * Представление данных в виде таблицы, в которой поля группируются по принципу "ключ-значение".
+ */
+export declare enum DetailLayoutEnum {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
+export interface IDetailMedia {
+    /**
+     * Максимальная ширина таблицы в px
+     * @example 600
+     */
+    breakpoint: number;
+    /**
+     * Количество колонок, которое будет применяться, начиная от указанной ширины и меньше
+     * @example 2
+     */
+    column: number;
+}
+export interface IDetailResponsive {
+    /**
+     * Перестраивать таблицу при ресайзе
+     */
+    enable?: boolean;
+    /**
+     * Брейкпоинты
+     */
+    media: IDetailMedia[];
+}
+export interface IDetailProps {
+    /**
+     * Размер ячеек в таблице
+     * @example 'sm'
+     */
+    size?: Size;
+    /**
+     * Вариант расположения ячеек "ключ-значение"
+     * @example 'horizontal'
+     */
+    layout?: DetailLayoutEnum;
+    /**
+     * Перестраивать таблицу при ресайзе
+     * @example {enable: true, media: [{breakpoint: 600, column: 2}]}
+     */
+    responsive?: boolean | IDetailResponsive;
+    /**
+     * Максимальное количество колонок
+     * @example 3
+     */
+    column?: number;
+    /**
+     * Заголовок таблицы
+     * @example 'User info'
+     */
+    title?: string | React.ReactNode;
+    /**
+     * Контролы, которые нужно расположить рядом с таблицей
+     * @example [{label: __(('Edit')), onClick: () => props.onClick()}]
+     */
+    controls?: IControlItem[];
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView;
+    /**
+     * Дополнительный CSS-класс для таблицы
+     */
+    className?: string;
+    /**
+     * Дочерние компоненты
+     */
+    children: React.ReactNode | React.ReactNode[];
+    [key: string]: any;
+}
+export interface IDetailItemOutputProps extends IDetailItemProps {
+    colspan: number;
+    value: IDetailItemProps['children'];
+}
+export interface IDetailViewProps extends IDetailProps {
+    rows: IDetailItemOutputProps[][];
+    resizedNodeRef?: (node: HTMLElement) => void;
+}
+export declare const constants: Readonly<{
+    MAX_COLUMN: number;
+    CELLS_IN_COLUMN: number;
+    TABLE_HEAD_COLSPAN: number;
+}>;
+declare function Detail(props: IDetailProps): JSX.Element;
+declare namespace Detail {
+    var defaultProps: {
+        size: string;
+        layout: DetailLayoutEnum;
+        column: number;
+        responsive: boolean;
+    };
+}
+export default Detail;

package/ui/content/Detail/Detail.js

@@ -0,0 +1,155 @@
+"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;
+exports.constants = exports.DetailLayoutEnum = void 0;
+var react_1 = __importStar(require("react"));
+var isArray_1 = __importDefault(require("lodash/isArray"));
+var orderBy_1 = __importDefault(require("lodash/orderBy"));
+var hooks_1 = require("../../../hooks");
+var DetailItem_1 = __importDefault(require("./DetailItem"));
+/**
+ * Detail
+ * Представление данных в виде таблицы, в которой поля группируются по принципу "ключ-значение".
+ */
+var DetailLayoutEnum;
+(function (DetailLayoutEnum) {
+    DetailLayoutEnum["Horizontal"] = "horizontal";
+    DetailLayoutEnum["Vertical"] = "vertical";
+})(DetailLayoutEnum = exports.DetailLayoutEnum || (exports.DetailLayoutEnum = {}));
+exports.constants = Object.freeze({
+    MAX_COLUMN: 3,
+    CELLS_IN_COLUMN: 2,
+    TABLE_HEAD_COLSPAN: 1
+});
+var getDetailItems = function (children) { return (react_1["default"].Children.toArray(children)
+    .filter(function (child) { var _a; return ((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName) === DetailItem_1["default"].displayName; })); };
+var normalizeSpan = function (span, column) { return (span > column)
+    ? column
+    : (span || 1); };
+var createRows = function (detailItems, column, layout) {
+    var result = [];
+    var freeColumns = column;
+    var rowIndex = 0;
+    result[rowIndex] = [];
+    detailItems.forEach(function (detailItem, index) {
+        if (!freeColumns) {
+            freeColumns = column;
+            rowIndex += 1;
+            result[rowIndex] = [];
+        }
+        var isLastDetailItem = index === (detailItems.length - 1);
+        var span = normalizeSpan(detailItem.props.span, column);
+        var nextSpan = null;
+        if (!isLastDetailItem) {
+            nextSpan = normalizeSpan(detailItems[index + 1].props.span, column);
+        }
+        freeColumns -= span;
+        if (isLastDetailItem || nextSpan > freeColumns) {
+            span += freeColumns;
+            freeColumns = 0;
+        }
+        result[rowIndex].push(__assign(__assign({}, detailItem.props), { colspan: layout === DetailLayoutEnum.Horizontal
+                ? span * exports.constants.CELLS_IN_COLUMN - exports.constants.TABLE_HEAD_COLSPAN
+                : span, value: detailItem }));
+    });
+    return result;
+};
+var normalizeResponsiveProps = function (props) { return (typeof props === 'boolean'
+    ? {
+        enable: props,
+        media: [
+            {
+                breakpoint: 500,
+                column: 1
+            },
+            {
+                breakpoint: 700,
+                column: 2
+            },
+            {
+                breakpoint: 1000,
+                column: 3
+            },
+        ]
+    }
+    : __assign(__assign({ enable: true }, props), { media: orderBy_1["default"](props.media, ['breakpoint'], ['asc']) })); };
+function Detail(props) {
+    var components = hooks_1.useComponents();
+    var detailItems = react_1.useMemo(function () { return getDetailItems(props.children); }, [props.children]);
+    var responsiveProps = react_1.useMemo(function () { return normalizeResponsiveProps(props.responsive); }, [props.responsive]);
+    var _a = react_1.useState(props.column || exports.constants.MAX_COLUMN), column = _a[0], setColumn = _a[1];
+    var _b = react_1.useState(createRows(detailItems, column, props.layout)), rows = _b[0], setRows = _b[1];
+    // Add responsive option
+    var resizeObserver = react_1.useRef(new ResizeObserver(function (entries) {
+        entries.forEach(function (entry) {
+            if (!entry.borderBoxSize) {
+                return;
+            }
+            var inlineSize = (isArray_1["default"](entry.borderBoxSize)
+                ? entry.borderBoxSize[0]
+                : entry.borderBoxSize).inlineSize;
+            // eslint-disable-next-line no-restricted-syntax
+            for (var _i = 0, _a = responsiveProps.media; _i < _a.length; _i++) {
+                var mediaItem = _a[_i];
+                if (inlineSize < mediaItem.breakpoint) {
+                    setColumn(mediaItem.column);
+                    return;
+                }
+            }
+            setColumn(props.column || exports.constants.MAX_COLUMN);
+        });
+    }));
+    var resizedNodeRef = react_1["default"].useCallback(function (node) {
+        if (!resizeObserver.current) {
+            return;
+        }
+        if (node !== null) {
+            resizeObserver.current.observe(node);
+            return;
+        }
+        resizeObserver.current.disconnect();
+    }, [resizeObserver]);
+    react_1.useEffect(function () {
+        setRows(createRows(detailItems, column, props.layout));
+    }, [column, detailItems, props.layout]);
+    return components.ui.renderView(props.view || 'content.DetailView', __assign(__assign(__assign({}, props), { rows: rows }), (responsiveProps.enable ? { resizedNodeRef: resizedNodeRef } : {})));
+}
+exports["default"] = Detail;
+Detail.defaultProps = {
+    size: 'sm',
+    layout: DetailLayoutEnum.Horizontal,
+    column: exports.constants.MAX_COLUMN,
+    responsive: true
+};

package/ui/content/Detail/DetailItem.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+/**
+ * DetailItem
+ * Элемент "ключ-значение" в таблице Detail
+ */
+export interface IDetailItemProps {
+    /**
+     * Наименование
+     * @example 'Product'
+     */
+    label: string | number | React.ReactNode;
+    /**
+     * Значение
+     * @example 'Cloud Database'
+     */
+    children: React.ReactNode;
+    /**
+     * Количество колонок, которое занимает элемент
+     * @example 3
+     */
+    span?: number;
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView;
+    /**
+     * Дополнительный CSS-класс для ячейки с наименованием
+     */
+    labelClassName?: string;
+    /**
+     * Дополнительный CSS-класс для ячейки со значением
+     */
+    contentClassName?: string;
+}
+declare function DetailItem(props: IDetailItemProps): JSX.Element;
+declare namespace DetailItem {
+    var defaultProps: {
+        span: number;
+    };
+    var displayName: string;
+}
+export default DetailItem;

package/ui/content/Detail/DetailItem.js

@@ -0,0 +1,10 @@
+"use strict";
+exports.__esModule = true;
+function DetailItem(props) {
+    return props.children;
+}
+exports["default"] = DetailItem;
+DetailItem.defaultProps = {
+    span: 1
+};
+DetailItem.displayName = 'DetailItem';

package/ui/content/Detail/demo/basic.d.ts

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