linear-react-components-ui 1.1.0-beta.3 → 1.1.0-beta.5

package/lib/assets/styles/dialog.scss

@@ -66,11 +66,17 @@
           }
         }
         .close-button {
-          color: #777;
-          cursor: pointer;
-          font-size: 16px;
-          text-shadow: 0 1px 0 $default-color;
           margin-left: auto;
+          line-height: 0;
+          cursor: pointer;
+          > svg {
+            fill: #252424;
+            pointer-events: fill;
+            transition: 0.2s fill;
+            &:hover {
+              fill: rgba(0, 0, 0, 0.164);
+            }
+          }
         }
       }
       .footer {

package/lib/assets/styles/drawers.scss

@@ -94,6 +94,8 @@
       }
       .right {
         margin-left: 2px;
+        display: flex;
+        align-items: center;
         &.modal-title {
           color: #4e4c4c;
           font-weight: 600;
@@ -101,12 +103,13 @@
       }
       .closebutton {
         cursor: pointer;
-        float: right;
-        font-size: 16px;
-        text-shadow: 0 1px 0 $default-color;
-        margin-right: 5px;
-        &:hover {
-          color: rgba(0, 0, 0, 0.164);
+        > svg {
+          fill: #252424;
+          pointer-events: fill;
+          transition: 0.2s fill;
+          &:hover {
+            fill: rgba(0, 0, 0, 0.164);
+          }
         }
       }
     }

package/lib/assets/styles/tabs.scss

@@ -1,5 +1,7 @@
 @import "colors.scss";
 
+$dropdown-width: 38px;
+
 %tab-closepanel {
   background-color: transparent;
   border: 0;
@@ -11,7 +13,6 @@
   visibility: hidden;
   transition: all 0.2s ease-in-out;
   border-radius: 4px;
-
   &:after {
     content: "×";
     font-size: 20px;
@@ -19,10 +20,8 @@
     color: $font-color-soft;
     transition: all 0.2s ease-in-out;
   }
-
   &:hover {
     background-color: $color-light-dark;
-
     &:after {
       color: $font-color-second;
     }
@@ -30,20 +29,18 @@
 }
 
 %tab-component-menus {
+  -webkit-box-shadow: 0px -1px 0px $component-border-color inset;
+  -moz-box-shadow: 0px -1px 0px $component-border-color inset;
+  box-shadow: 0px -1px 0px $component-border-color inset;
   .menu {
-    -webkit-box-shadow: 0px -1px 0px $component-border-color inset;
-    -moz-box-shadow: 0px -1px 0px $component-border-color inset;
-    box-shadow: 0px -1px 0px $component-border-color inset;
     display: flex;
-    flex-wrap: nowrap;
-    justify-content: center;
     flex: 1;
+    overflow: hidden;
 
     &.-firsttabident>.menuitem:first-child {
       margin-left: 15px;
     }
   }
-
   .menu>.menuitem {
     border-bottom: 0;
     border-radius: 5px 5px 0px 0px;
@@ -55,10 +52,10 @@
     margin-right: 1px;
     padding: 0;
     width: auto;
+    min-width: 100px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-
     &.selected {
       border: 1px solid $component-border-color;
       background: $font-color-second;
@@ -66,9 +63,7 @@
       border-top: 2px solid $component-selected-color;
       box-shadow: 0;
       font-weight: bold;
-      /* z-index: 2; */
     }
-
     &.selected>.closepanel,
     &:hover>.closepanel {
       visibility: visible;
@@ -103,18 +98,28 @@
   height: 100%;
   overflow: auto;
   @extend %tab-component-menus;
-
   >.menucontainer {
-    display: flex;
-    flex-wrap: nowrap;
     width: 100%;
+    display: flex;
     min-height: 35px;
     overflow: hidden;
     @extend %tab-component-menus;
-
     >.dropdownbutton {
       border-bottom: 1px solid $component-border-color;
-      padding: 0 0.8rem;
+      padding: 0;
+      width: $dropdown-width;
+      visibility: hidden;
+      pointer-events: none;
+      opacity: 0;
+      &.show {
+        visibility: visible;
+        pointer-events: all;
+        opacity: 1;
+      }
+      > svg {
+        margin: 0;
+        float: none;
+      }
     }
   }
 

package/lib/dialog/base/Header.js

@@ -18,7 +18,9 @@ var getCloseButton = function getCloseButton(handleClose) {
     onClick: handleClose,
     role: "button",
     tabIndex: 0
-  }, "X");
+  }, /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+    name: "cancel2"
+  }));
 };
 var getIcon = function getIcon(titleIcon, icon) {
   if (icon) {

package/lib/dialog/base/index.js

@@ -32,7 +32,8 @@ var BaseDialog = function BaseDialog(props) {
     openProp = props.open,
     onOpenChange = props.onOpenChange,
     _props$zIndex = props.zIndex,
-    zIndex = _props$zIndex === void 0 ? 0 : _props$zIndex;
+    zIndex = _props$zIndex === void 0 ? 0 : _props$zIndex,
+    handlerClose = props.handlerClose;
   var _useContext = (0, _react.useContext)(_form.FormDialogContext),
     headerRef = _useContext.headerRef;
   var wrapperEl = (0, _react.useRef)(null);
@@ -52,6 +53,7 @@ var BaseDialog = function BaseDialog(props) {
     if (openProp !== undefined && onOpenChange) {
       onOpenChange(false);
     } else {
+      if (handlerClose) handlerClose();
       onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
       setOpen(false);
     }
@@ -134,15 +136,17 @@ var BaseDialog = function BaseDialog(props) {
     };
   }, [open, closeOnEsc]);
   (0, _react.useEffect)(function () {
-    document.addEventListener('mousedown', onMouseDown);
-    document.addEventListener('mouseup', onMouseUp);
-    if (isDragging) document.addEventListener('mousemove', onMouseMove);
+    if (open) {
+      document.addEventListener('mousedown', onMouseDown);
+      document.addEventListener('mouseup', onMouseUp);
+      if (isDragging) document.addEventListener('mousemove', onMouseMove);
+    }
     return function () {
       document.removeEventListener('mousedown', onMouseDown);
       document.removeEventListener('mouseup', onMouseUp);
       document.removeEventListener('mousemove', onMouseMove);
     };
-  }, [isDragging]);
+  }, [isDragging, open]);
   if (!open) return null;
   return /*#__PURE__*/_react["default"].createElement(DialogContext.Provider, {
     value: {

package/lib/dialog/types.d.ts

@@ -29,6 +29,7 @@ interface IBaseProps {
     zIndex?: number | string;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    handlerClose?: () => void;
 }
 interface IFormProps extends Omit<IBaseProps, 'textAlign' | 'zIndex' | 'wrapperClassName'> {
     buttons?: JSX.Element[];
@@ -38,7 +39,6 @@ interface IFormProps extends Omit<IBaseProps, 'textAlign' | 'zIndex' | 'wrapperC
     isWaiting?: boolean;
     icon?: JSX.Element;
     content?: ReactNode;
-    handlerClose?: () => void;
 }
 interface ICommonDialogProps {
     onConfirmClick?: () => void;

package/lib/drawer/Header.js

@@ -16,10 +16,11 @@ var getCloseButton = function getCloseButton(handlerClose) {
     "data-testid": "header-closebutton",
     className: "closebutton",
     onClick: handlerClose,
-    onKeyPress: undefined,
     role: "button",
     tabIndex: 0
-  }, "X");
+  }, /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+    name: "cancel2"
+  }));
 };
 var getIcon = function getIcon(titleIcon, icon) {
   if (titleIcon || icon) {

package/lib/index.d.ts

@@ -7,7 +7,7 @@ export { default as List } from './list/index.js';
 export { default as Radio } from './radio/index.js';
 export { default as Tab } from './tabs/index.js';
 export { default as Dialog } from './dialog/base/index.js';
-import './types-exUmt06D.js';
+import './panel/types.js';
 import 'react';
 import './@types/PermissionAttr.js';
 import './internals/colorStyles.js';

package/lib/panel/Content.d.ts

@@ -1,4 +1,4 @@
-import { a as IPanelContentProps } from '../types-exUmt06D.js';
+import { IPanelContentProps } from './types.js';
 import 'react';
 import '../@types/PermissionAttr.js';
 import '../internals/colorStyles.js';

package/lib/panel/DangerPanel.d.ts

@@ -1,4 +1,4 @@
-import { I as IPanelProps } from '../types-exUmt06D.js';
+import { IPanelProps } from './types.js';
 import 'react';
 import '../@types/PermissionAttr.js';
 import '../internals/colorStyles.js';

package/lib/panel/Default.d.ts

@@ -1,4 +1,4 @@
-import { I as IPanelProps } from '../types-exUmt06D.js';
+import { IPanelProps } from './types.js';
 import 'react';
 import '../@types/PermissionAttr.js';
 import '../internals/colorStyles.js';

package/lib/panel/Header.d.ts

@@ -1,4 +1,4 @@
-import { b as IPanelHeaderProps } from '../types-exUmt06D.js';
+import { IPanelHeaderProps } from './types.js';
 import 'react';
 import '../@types/PermissionAttr.js';
 import '../internals/colorStyles.js';

package/lib/panel/InfoPanel.d.ts

@@ -1,4 +1,4 @@
-import { I as IPanelProps } from '../types-exUmt06D.js';
+import { IPanelProps } from './types.js';
 import 'react';
 import '../@types/PermissionAttr.js';
 import '../internals/colorStyles.js';

package/lib/panel/PrimaryPanel.d.ts

@@ -1,4 +1,4 @@
-import { I as IPanelProps } from '../types-exUmt06D.js';
+import { IPanelProps } from './types.js';
 import 'react';
 import '../@types/PermissionAttr.js';
 import '../internals/colorStyles.js';

package/lib/panel/SuccessPanel.d.ts

@@ -1,4 +1,4 @@
-import { I as IPanelProps } from '../types-exUmt06D.js';
+import { IPanelProps } from './types.js';
 import 'react';
 import '../@types/PermissionAttr.js';
 import '../internals/colorStyles.js';

package/lib/panel/ToolBar.d.ts

@@ -1,4 +1,4 @@
-import { I as IPanelProps } from '../types-exUmt06D.js';
+import { IPanelProps } from './types.js';
 import 'react';
 import '../@types/PermissionAttr.js';
 import '../internals/colorStyles.js';

package/lib/panel/WarningPanel.d.ts

@@ -1,4 +1,4 @@
-import { I as IPanelProps } from '../types-exUmt06D.js';
+import { IPanelProps } from './types.js';
 import 'react';
 import '../@types/PermissionAttr.js';
 import '../internals/colorStyles.js';

package/lib/panel/helpers.d.ts

@@ -1,6 +1,11 @@
-import 'react';
-export { P as default, g as getCurrentThreshold, n as numberAroundZeroAndOne } from '../types-exUmt06D.js';
+import React__default from 'react';
+import { ContextProps } from './types.js';
 import '../@types/PermissionAttr.js';
 import '../internals/colorStyles.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
+
+declare function getCurrentThreshold(scrollableElement: HTMLDivElement, scrollThreshold: number): number;
+declare const PanelContext: React__default.Context<ContextProps>;
+
+export { PanelContext as default, getCurrentThreshold };

package/lib/panel/helpers.js

@@ -5,21 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 exports.getCurrentThreshold = getCurrentThreshold;
-exports.numberAroundZeroAndOne = numberAroundZeroAndOne;
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function numberAroundZeroAndOne(_ref) {
-  var props = _ref.props,
-    propName = _ref.propName,
-    componentName = _ref.componentName;
-  if (props[propName]) {
-    var value = props[propName];
-    if (typeof value === 'number') {
-      return value >= 0 && value <= 1 ? value : new Error("invalid value of ".concat(propName, " in ").concat(componentName, " component, is not between 0 and 1"));
-    }
-  }
-  return null;
-}
 function getCurrentThreshold(scrollableElement, scrollThreshold) {
   var MIN_THRESHOLD = 0;
   var MAX_THRESHOLD = 1;

package/lib/panel/index.d.ts

@@ -6,7 +6,7 @@ export { default as SuccessPanel } from './SuccessPanel.js';
 export { default as InfoPanel } from './InfoPanel.js';
 export { default as PanelHeader } from './Header.js';
 export { default as PanelContent } from './Content.js';
-import '../types-exUmt06D.js';
+import './types.js';
 import 'react';
 import '../@types/PermissionAttr.js';
 import '../internals/colorStyles.js';

package/lib/panel/types.d.ts

@@ -1,6 +1,47 @@
-import 'react';
-export { A as AsyncFunc, C as ContextProps, F as Func, a as IPanelContentProps, b as IPanelHeaderProps, I as IPanelProps, c as IParameterFunction } from '../types-exUmt06D.js';
-import '../@types/PermissionAttr.js';
-import '../internals/colorStyles.js';
-import '../@types/Icon.js';
+import { ComponentPropsWithoutRef, ReactNode, ReactElement } from 'react';
+import { PermissionAttr } from '../@types/PermissionAttr.js';
+import ColorStyles from '../internals/colorStyles.js';
+import { IconNames } from '../@types/Icon.js';
 import '../icons/helper.js';
+
+type Func = () => void;
+type AsyncFunc = () => Promise<void>;
+interface IPanelProps extends Omit<ComponentPropsWithoutRef<'div'>, 'className'> {
+    customClass?: string;
+    startOpened?: boolean;
+    toggleable?: boolean;
+    children?: ReactNode;
+    colorStyle?: typeof ColorStyles | string;
+    gridCols?: string;
+    title?: string;
+    onEndReached?: Func | AsyncFunc;
+    onEndReachedThreshold?: number;
+    permissionAttr?: PermissionAttr | PermissionAttr[];
+}
+interface IPanelContentProps extends Omit<ComponentPropsWithoutRef<'div'>, 'className'> {
+    customClass?: string;
+}
+interface IPanelHeaderProps extends Omit<ComponentPropsWithoutRef<'div'>, 'className'> {
+    title?: string;
+    icon?: ReactElement;
+    titleIcon?: IconNames;
+    customClass?: string;
+    styleForTitle?: object;
+    customClassForTitle?: string;
+    headerColored?: boolean;
+}
+type ContextProps = {
+    toggleable: boolean;
+    handlerToggleable: () => void;
+    opened: boolean;
+    hideContent: boolean;
+    onEndReached?: Func | AsyncFunc;
+    onEndReachedThreshold: number;
+};
+interface IParameterFunction {
+    props: any;
+    propName: string | number;
+    componentName: string;
+}
+
+export type { AsyncFunc, ContextProps, Func, IPanelContentProps, IPanelHeaderProps, IPanelProps, IParameterFunction };

package/lib/tabs/DropdownTabs.d.ts

@@ -0,0 +1,11 @@
+import { DropdownProps } from './types.js';
+import 'react';
+import '../@types/Size.js';
+import '../@types/Position.js';
+import '../@types/PermissionAttr.js';
+import '../@types/Icon.js';
+import '../icons/helper.js';
+
+declare const DropdownTabs: ({ tabs, tabMenuSize, }: DropdownProps) => JSX.Element | null;
+
+export { DropdownTabs as default };

package/lib/tabs/DropdownTabs.js

@@ -0,0 +1,75 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _buttons = _interopRequireDefault(require("../buttons"));
+var _list = _interopRequireWildcard(require("../list"));
+var _useTabs2 = require("./useTabs");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var DropdownTab = function DropdownTab(_ref) {
+  var id = _ref.id,
+    title = _ref.title,
+    closeable = _ref.closeable,
+    iconAlign = _ref.iconAlign,
+    icon = _ref.icon,
+    iconName = _ref.iconName,
+    disabled = _ref.disabled,
+    tabMenuSize = _ref.tabMenuSize;
+  var _useTabs = (0, _useTabs2.useTabs)(),
+    selectTab = _useTabs.selectTab,
+    removeTab = _useTabs.removeTab;
+  return /*#__PURE__*/_react["default"].createElement(_list.ListItem, {
+    key: id
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "menuitem"
+  }, /*#__PURE__*/_react["default"].createElement(_buttons["default"], {
+    className: "btn menubutton",
+    boxShadow: false,
+    onClick: function onClick() {
+      return selectTab(id);
+    },
+    iconAlign: iconAlign,
+    iconName: iconName,
+    icon: icon,
+    disabled: disabled,
+    label: title,
+    size: tabMenuSize,
+    transparent: true
+  }), closeable && /*#__PURE__*/_react["default"].createElement("button", {
+    className: "closepanel",
+    onClick: function onClick() {
+      return removeTab(id);
+    }
+  })));
+};
+var DropdownTabs = function DropdownTabs(_ref2) {
+  var _ref2$tabs = _ref2.tabs,
+    tabs = _ref2$tabs === void 0 ? [] : _ref2$tabs,
+    _ref2$tabMenuSize = _ref2.tabMenuSize,
+    tabMenuSize = _ref2$tabMenuSize === void 0 ? 'medium' : _ref2$tabMenuSize;
+  var hasTabs = tabs.length > 0;
+  if (tabs.length === 0) return null;
+  return /*#__PURE__*/_react["default"].createElement(_buttons["default"], {
+    dropdown: true,
+    dropdownAlign: "right",
+    transparent: true,
+    boxShadow: false,
+    size: "large",
+    customClass: "dropdownbutton ".concat(hasTabs ? 'show' : '')
+  }, /*#__PURE__*/_react["default"].createElement(_list["default"], {
+    customClass: "dropdown-hide-tabs"
+  }, tabs.map(function (tab) {
+    return /*#__PURE__*/_react["default"].createElement(DropdownTab, _extends({
+      key: tab.id,
+      tabMenuSize: tabMenuSize
+    }, tab));
+  })));
+};
+var _default = exports["default"] = DropdownTabs;

package/lib/tabs/Menu.d.ts

@@ -6,6 +6,6 @@ import '../@types/PermissionAttr.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
 
-declare const Menu: ({ menuRef, toolbar, toolBarRef, customClassForToolBar, ...props }: MenuProps) => JSX.Element;
+declare const Menu: ({ toolbar, customClassForToolBar, tabWidth, ...props }: MenuProps) => JSX.Element;
 
 export { Menu as default };

package/lib/tabs/Menu.js

@@ -5,29 +5,41 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _MenuItems = _interopRequireDefault(require("./MenuItems"));
-var _DropdownItems = _interopRequireDefault(require("./DropdownItems"));
-var _excluded = ["menuRef", "toolbar", "toolBarRef", "customClassForToolBar"];
+var _MenuTabs = _interopRequireDefault(require("./MenuTabs"));
+var _DropdownTabs = _interopRequireDefault(require("./DropdownTabs"));
+var _useTabs2 = require("./useTabs");
+var _excluded = ["toolbar", "customClassForToolBar", "tabWidth"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var Menu = function Menu(_ref) {
-  var menuRef = _ref.menuRef,
-    toolbar = _ref.toolbar,
-    toolBarRef = _ref.toolBarRef,
+  var toolbar = _ref.toolbar,
     _ref$customClassForTo = _ref.customClassForToolBar,
     customClassForToolBar = _ref$customClassForTo === void 0 ? '' : _ref$customClassForTo,
+    _ref$tabWidth = _ref.tabWidth,
+    tabWidth = _ref$tabWidth === void 0 ? 'auto' : _ref$tabWidth,
     props = _objectWithoutProperties(_ref, _excluded);
+  var _useTabs = (0, _useTabs2.useTabs)(),
+    menuTabs = _useTabs.menuTabs,
+    menuRef = _useTabs.menuRef,
+    dropdownTabs = _useTabs.dropdownTabs;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "menucontainer",
-    ref: function ref(_ref2) {
-      menuRef === null || menuRef === void 0 ? void 0 : menuRef(_ref2);
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_MenuItems["default"], props), /*#__PURE__*/_react["default"].createElement(_DropdownItems["default"], props), toolbar && /*#__PURE__*/_react["default"].cloneElement(toolbar, {
-    customClass: "menubar ".concat(customClassForToolBar),
-    innerRef: toolBarRef ? function (r) {
-      toolBarRef(r);
-    } : undefined
+    className: "menucontainer"
+  }, /*#__PURE__*/_react["default"].createElement(_MenuTabs["default"], {
+    tabs: menuTabs,
+    tabWidth: tabWidth,
+    tabMenuSize: props.tabMenuSize,
+    tabMenuAlign: props.tabMenuAlign,
+    firstTabIdent: props.firstTabIdent,
+    ref: menuRef
+  }), /*#__PURE__*/_react["default"].createElement(_DropdownTabs["default"], {
+    tabs: dropdownTabs,
+    tabWidth: tabWidth,
+    tabMenuSize: props.tabMenuSize,
+    tabMenuAlign: props.tabMenuAlign,
+    firstTabIdent: props.firstTabIdent
+  }), toolbar && /*#__PURE__*/_react["default"].cloneElement(toolbar, {
+    customClass: "menubar ".concat(customClassForToolBar)
   }));
 };
 var _default = exports["default"] = Menu;

package/lib/tabs/{DropdownItems.d.ts → MenuTabs.d.ts}

@@ -1,11 +1,11 @@
+import React__default from 'react';
 import { MenuProps } from './types.js';
-import 'react';
 import '../@types/Size.js';
 import '../@types/Position.js';
 import '../@types/PermissionAttr.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
 
-declare const DropdownItems: ({ handlerClick, handlerRemovePanel, dropdownPanels, tabMenuSize, }: MenuProps) => JSX.Element | null;
+declare const MenuTabs: React__default.ForwardRefExoticComponent<MenuProps & React__default.RefAttributes<HTMLUListElement>>;
 
-export { DropdownItems as default };
+export { MenuTabs as default };