@steroidsjs/core 2.3.0-beta.7 → 3.0.0-beta.10

package/ui/content/Detail/demo/responsive.js

@@ -1,71 +1,75 @@
-"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 Detail_1 = __importDefault(require("../Detail"));
-var DetailItem_1 = __importDefault(require("../DetailItem"));
-/**
- * When the screen width resizes, the number of columns changes
- * @order 4
- * @col 8
- */
-exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement(Detail_1["default"], { column: 4, responsive: {
-            media: [
-                {
-                    breakpoint: 500,
-                    column: 1
-                },
-                {
-                    breakpoint: 700,
-                    column: 2
-                },
-                {
-                    breakpoint: 900,
-                    column: 3
-                },
-            ]
-        } },
-        React.createElement(DetailItem_1["default"], { label: "Product" }, "Cloud Database"),
-        React.createElement(DetailItem_1["default"], { label: "Billing Mode" }, "Prepaid"),
-        React.createElement(DetailItem_1["default"], { label: "Automatic Renewal" }, "YES"),
-        React.createElement(DetailItem_1["default"], { label: "Order time" }, "2018-04-24  18:00:00"),
-        React.createElement(DetailItem_1["default"], { label: "Usage Time", span: 2 }, "2018-04-24  18:00:00"),
-        React.createElement(DetailItem_1["default"], { label: "Status", span: 3 }, "Running"),
-        React.createElement(DetailItem_1["default"], { label: "Negotaited Amount" }, "$80.00"),
-        React.createElement(DetailItem_1["default"], { label: "Discount" }, "$20.00"),
-        React.createElement(DetailItem_1["default"], { label: "Official Receipts" }, "$60.00"),
-        React.createElement(DetailItem_1["default"], { label: "Config Info" },
-            "Data disk type: MongoDB",
-            React.createElement("br", null),
-            "Database version: 3.4",
-            React.createElement("br", null),
-            "Package: dds.mongo.mid",
-            React.createElement("br", null),
-            "Storage space: 10 GB",
-            React.createElement("br", null),
-            "Replication factor: 3",
-            React.createElement("br", null),
-            "Region: East China 1",
-            React.createElement("br", null))))); });
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __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 Detail_1 = __importDefault(require("../Detail"));
+var DetailItem_1 = __importDefault(require("../DetailItem"));
+/**
+ * When the screen width resizes, the number of columns changes
+ * @order 4
+ * @col 8
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Detail_1["default"], { column: 4, responsive: {
+            media: [
+                {
+                    breakpoint: 500,
+                    column: 1
+                },
+                {
+                    breakpoint: 700,
+                    column: 2
+                },
+                {
+                    breakpoint: 900,
+                    column: 3
+                },
+            ]
+        } },
+        React.createElement(DetailItem_1["default"], { label: "Product" }, "Cloud Database"),
+        React.createElement(DetailItem_1["default"], { label: "Billing Mode" }, "Prepaid"),
+        React.createElement(DetailItem_1["default"], { label: "Automatic Renewal" }, "YES"),
+        React.createElement(DetailItem_1["default"], { label: "Order time" }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Usage Time", span: 2 }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Status", span: 3 }, "Running"),
+        React.createElement(DetailItem_1["default"], { label: "Negotaited Amount" }, "$80.00"),
+        React.createElement(DetailItem_1["default"], { label: "Discount" }, "$20.00"),
+        React.createElement(DetailItem_1["default"], { label: "Official Receipts" }, "$60.00"),
+        React.createElement(DetailItem_1["default"], { label: "Config Info" },
+            "Data disk type: MongoDB",
+            React.createElement("br", null),
+            "Database version: 3.4",
+            React.createElement("br", null),
+            "Package: dds.mongo.mid",
+            React.createElement("br", null),
+            "Storage space: 10 GB",
+            React.createElement("br", null),
+            "Replication factor: 3",
+            React.createElement("br", null),
+            "Region: East China 1",
+            React.createElement("br", null))))); });

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-declare const _default: () => JSX.Element;
-/**
- * Table with different cell's sizes
- * @order 2
- * @col 8
- */
-export default _default;
+/// <reference types="react" />
+/**
+ * Table with different cell's sizes
+ * @order 2
+ * @col 8
+ */
+declare const _default: () => JSX.Element;
+export default _default;

package/ui/content/Detail/demo/sizes.js

@@ -1,61 +1,65 @@
-"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 Detail_1 = __importDefault(require("../Detail"));
-var DetailItem_1 = __importDefault(require("../DetailItem"));
-var sizes = {
-    sm: 'Small',
-    md: 'Middle',
-    lg: 'Large'
-};
-/**
- * Table with different cell's sizes
- * @order 2
- * @col 8
- */
-exports["default"] = (function () { return (React.createElement(React.Fragment, null, Object.keys(sizes).map(function (size) { return (React.createElement("div", { style: { marginBottom: '30px' }, key: size },
-    React.createElement(Detail_1["default"], { title: sizes[size], size: size, responsive: false },
-        React.createElement(DetailItem_1["default"], { label: "Product" }, "Cloud Database"),
-        React.createElement(DetailItem_1["default"], { label: "Billing Mode" }, "Prepaid"),
-        React.createElement(DetailItem_1["default"], { label: "Automatic Renewal" }, "YES"),
-        React.createElement(DetailItem_1["default"], { label: "Order time" }, "2018-04-24  18:00:00"),
-        React.createElement(DetailItem_1["default"], { label: "Usage Time", span: 2 }, "2018-04-24  18:00:00"),
-        React.createElement(DetailItem_1["default"], { label: "Status", span: 3 }, "Running"),
-        React.createElement(DetailItem_1["default"], { label: "Negotaited Amount" }, "$80.00"),
-        React.createElement(DetailItem_1["default"], { label: "Discount" }, "$20.00"),
-        React.createElement(DetailItem_1["default"], { label: "Official Receipts" }, "$60.00"),
-        React.createElement(DetailItem_1["default"], { label: "Config Info" },
-            "Data disk type: MongoDB",
-            React.createElement("br", null),
-            "Database version: 3.4",
-            React.createElement("br", null),
-            "Package: dds.mongo.mid",
-            React.createElement("br", null),
-            "Storage space: 10 GB",
-            React.createElement("br", null),
-            "Replication factor: 3",
-            React.createElement("br", null),
-            "Region: East China 1",
-            React.createElement("br", null))))); }))); });
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __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 Detail_1 = __importDefault(require("../Detail"));
+var DetailItem_1 = __importDefault(require("../DetailItem"));
+var sizes = {
+    sm: 'Small',
+    md: 'Middle',
+    lg: 'Large'
+};
+/**
+ * Table with different cell's sizes
+ * @order 2
+ * @col 8
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null, Object.keys(sizes).map(function (size) { return (React.createElement("div", { style: { marginBottom: '30px' }, key: size },
+    React.createElement(Detail_1["default"], { title: sizes[size], size: size, responsive: false },
+        React.createElement(DetailItem_1["default"], { label: "Product" }, "Cloud Database"),
+        React.createElement(DetailItem_1["default"], { label: "Billing Mode" }, "Prepaid"),
+        React.createElement(DetailItem_1["default"], { label: "Automatic Renewal" }, "YES"),
+        React.createElement(DetailItem_1["default"], { label: "Order time" }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Usage Time", span: 2 }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Status", span: 3 }, "Running"),
+        React.createElement(DetailItem_1["default"], { label: "Negotaited Amount" }, "$80.00"),
+        React.createElement(DetailItem_1["default"], { label: "Discount" }, "$20.00"),
+        React.createElement(DetailItem_1["default"], { label: "Official Receipts" }, "$60.00"),
+        React.createElement(DetailItem_1["default"], { label: "Config Info" },
+            "Data disk type: MongoDB",
+            React.createElement("br", null),
+            "Database version: 3.4",
+            React.createElement("br", null),
+            "Package: dds.mongo.mid",
+            React.createElement("br", null),
+            "Storage space: 10 GB",
+            React.createElement("br", null),
+            "Replication factor: 3",
+            React.createElement("br", null),
+            "Region: East China 1",
+            React.createElement("br", null))))); }))); });

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

@@ -1,3 +1,3 @@
-import Detail from './Detail';
-import DetailItem from './DetailItem';
-export { Detail, DetailItem };
+import Detail from './Detail';
+import DetailItem from './DetailItem';
+export { Detail, DetailItem };

package/ui/content/Detail/index.js

@@ -1,10 +1,10 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-exports.DetailItem = exports.Detail = void 0;
-var Detail_1 = __importDefault(require("./Detail"));
-exports.Detail = Detail_1["default"];
-var DetailItem_1 = __importDefault(require("./DetailItem"));
-exports.DetailItem = DetailItem_1["default"];
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.DetailItem = exports.Detail = void 0;
+var Detail_1 = __importDefault(require("./Detail"));
+exports.Detail = Detail_1["default"];
+var DetailItem_1 = __importDefault(require("./DetailItem"));
+exports.DetailItem = DetailItem_1["default"];

package/ui/content/DropDown/DropDown.d.ts

@@ -1,45 +1,45 @@
-import * as React from 'react';
-import { IAbsolutePositioningInputProps, IAbsolutePositioningOutputProps } from '../../../hooks/useAbsolutePositioning';
-export interface IDropDownProps extends IAbsolutePositioningInputProps {
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
-    /**
-     * Содержимое DropDown (компонент или jsx-код)
-     * @example () => Component
-     */
-    content?: () => React.ReactNode;
-    /**
-     * Переопределение view React компонента для кастомизациии отображения
-     * @example MyCustomView
-     */
-    view?: any;
-    /**
-     * В каком случае закрывать DropDown. По-умолчанию - `click-away`
-     * @example click-any
-     */
-    closeMode?: 'click-away' | 'click-any';
-}
-export interface IDropDownViewProps extends IDropDownProps, IAbsolutePositioningOutputProps {
-    /**
-     * Рассчет абсолютной позиции
-     */
-    calculatePosition: (componentSize: ClientRect) => void;
-    /**
-     * Ссылка на view
-     */
-    forwardedRef: any;
-}
-declare function DropDown(props: IDropDownProps): JSX.Element;
-declare namespace DropDown {
-    var defaultProps: {
-        autoPositioning: boolean;
-        componentDestroyDelay: number;
-        defaultVisible: boolean;
-        gap: number;
-        position: string;
-        closeMode: string;
-    };
-}
-export default DropDown;
+import * as React from 'react';
+import { IAbsolutePositioningInputProps, IAbsolutePositioningOutputProps } from '../../../hooks/useAbsolutePositioning';
+export interface IDropDownProps extends IAbsolutePositioningInputProps {
+    /**
+     * Дополнительный CSS-класс
+     */
+    className?: CssClassName;
+    /**
+     * Содержимое DropDown (компонент или jsx-код)
+     * @example () => Component
+     */
+    content?: () => React.ReactNode;
+    /**
+     * Переопределение view React компонента для кастомизациии отображения
+     * @example MyCustomView
+     */
+    view?: any;
+    /**
+     * В каком случае закрывать DropDown. По-умолчанию - `click-away`
+     * @example click-any
+     */
+    closeMode?: 'click-away' | 'click-any';
+}
+export interface IDropDownViewProps extends IDropDownProps, IAbsolutePositioningOutputProps {
+    /**
+     * Рассчет абсолютной позиции
+     */
+    calculatePosition: (componentSize: ClientRect) => void;
+    /**
+     * Ссылка на view
+     */
+    forwardedRef: any;
+}
+declare function DropDown(props: IDropDownProps): JSX.Element;
+declare namespace DropDown {
+    var defaultProps: {
+        autoPositioning: boolean;
+        componentDestroyDelay: number;
+        defaultVisible: boolean;
+        gap: number;
+        position: string;
+        closeMode: string;
+    };
+}
+export default DropDown;

package/ui/content/DropDown/DropDown.js

@@ -1,91 +1,95 @@
-"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 react_1 = require("react");
-var react_use_1 = require("react-use");
-var hooks_1 = require("../../../hooks");
-var TooltipPortalInner_1 = __importDefault(require("../../layout/Tooltip/TooltipPortalInner"));
-var useAbsolutePositioning_1 = __importDefault(require("../../../hooks/useAbsolutePositioning"));
-function DropDown(props) {
-    var components = hooks_1.useComponents();
-    var _a = useAbsolutePositioning_1["default"](props), isComponentExist = _a.isComponentExist, isComponentVisible = _a.isComponentVisible, calculateAbsolutePosition = _a.calculateAbsolutePosition, onShow = _a.onShow, onHide = _a.onHide, position = _a.position, style = _a.style;
-    var childRef = react_1.useRef(null);
-    var isManualControl = props.visible !== undefined;
-    // Outside click -> close
-    var forwardedRef = react_1.useRef(null);
-    react_use_1.useClickAway(forwardedRef, function (event) {
-        if (props.closeMode === 'click-away') {
-            if (isManualControl) {
-                if (!childRef.current.contains(event.target) && props.onClose) {
-                    props.onClose();
-                }
-            }
-            else {
-                onHide();
-            }
-        }
-    }, ['mousedown', 'touchstart']);
-    // Any click -> close
-    var onAnyClick = react_1.useCallback(function () {
-        if (isComponentExist && isComponentVisible && props.closeMode === 'click-any') {
-            onHide();
-        }
-    }, [isComponentExist, isComponentVisible, onHide, props.closeMode]);
-    react_use_1.useEvent('mousedown', onAnyClick);
-    react_use_1.useEvent('touchstart', onAnyClick);
-    var calculatePosition = react_1.useCallback(function (componentSize) {
-        calculateAbsolutePosition(position, childRef.current, componentSize);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    var DropDownView = components.ui.getView(props.view || 'content.DropDownView');
-    var childrenElement = typeof props.children === 'object'
-        ? React.Children.only(props.children)
-        : undefined;
-    var resultProps = {
-        ref: childRef
-    };
-    if (!isManualControl) {
-        resultProps.onClick = function () {
-            onShow();
-        };
-    }
-    return (React.createElement(React.Fragment, null,
-        childrenElement
-            ? React.cloneElement(childrenElement, resultProps)
-            : (React.createElement("span", null, props.children)),
-        isComponentExist && (
-        // TODO Change Portal to global
-        React.createElement(TooltipPortalInner_1["default"], null,
-            React.createElement(DropDownView, { className: props.className, forwardedRef: forwardedRef, content: props.content, position: position, style: style, calculatePosition: calculatePosition, isComponentVisible: isComponentVisible, onClose: onHide })))));
-}
-DropDown.defaultProps = {
-    autoPositioning: false,
-    componentDestroyDelay: 300,
-    defaultVisible: false,
-    gap: 15,
-    position: 'bottom',
-    closeMode: 'click-away'
-};
-exports["default"] = DropDown;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __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 react_1 = require("react");
+var react_use_1 = require("react-use");
+var hooks_1 = require("../../../hooks");
+var TooltipPortalInner_1 = __importDefault(require("../../layout/Tooltip/TooltipPortalInner"));
+var useAbsolutePositioning_1 = __importDefault(require("../../../hooks/useAbsolutePositioning"));
+function DropDown(props) {
+    var components = (0, hooks_1.useComponents)();
+    var _a = (0, useAbsolutePositioning_1["default"])(props), isComponentExist = _a.isComponentExist, isComponentVisible = _a.isComponentVisible, calculateAbsolutePosition = _a.calculateAbsolutePosition, onShow = _a.onShow, onHide = _a.onHide, position = _a.position, style = _a.style;
+    var childRef = (0, react_1.useRef)(null);
+    var isManualControl = props.visible !== undefined;
+    // Outside click -> close
+    var forwardedRef = (0, react_1.useRef)(null);
+    (0, react_use_1.useClickAway)(forwardedRef, function (event) {
+        if (props.closeMode === 'click-away') {
+            if (isManualControl) {
+                if (!childRef.current.contains(event.target) && props.onClose) {
+                    props.onClose();
+                }
+            }
+            else {
+                onHide();
+            }
+        }
+    }, ['mousedown', 'touchstart']);
+    // Any click -> close
+    var onAnyClick = (0, react_1.useCallback)(function () {
+        if (isComponentExist && isComponentVisible && props.closeMode === 'click-any') {
+            onHide();
+        }
+    }, [isComponentExist, isComponentVisible, onHide, props.closeMode]);
+    (0, react_use_1.useEvent)('mousedown', onAnyClick);
+    (0, react_use_1.useEvent)('touchstart', onAnyClick);
+    var calculatePosition = (0, react_1.useCallback)(function (componentSize) {
+        calculateAbsolutePosition(position, childRef.current, componentSize);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var DropDownView = components.ui.getView(props.view || 'content.DropDownView');
+    var childrenElement = typeof props.children === 'object'
+        ? React.Children.only(props.children)
+        : undefined;
+    var resultProps = {
+        ref: childRef
+    };
+    if (!isManualControl) {
+        resultProps.onClick = function () {
+            onShow();
+        };
+    }
+    return (React.createElement(React.Fragment, null,
+        childrenElement
+            ? React.cloneElement(childrenElement, resultProps)
+            : (React.createElement("span", null, props.children)),
+        isComponentExist && (
+        // TODO Change Portal to global
+        React.createElement(TooltipPortalInner_1["default"], null,
+            React.createElement(DropDownView, { className: props.className, forwardedRef: forwardedRef, content: props.content, position: position, style: style, calculatePosition: calculatePosition, isComponentVisible: isComponentVisible, onClose: onHide })))));
+}
+DropDown.defaultProps = {
+    autoPositioning: false,
+    componentDestroyDelay: 300,
+    defaultVisible: false,
+    gap: 15,
+    position: 'bottom',
+    closeMode: 'click-away'
+};
+exports["default"] = DropDown;

package/ui/content/DropDown/index.d.ts

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