@jetbrains/ring-ui 5.1.1 → 6.0.2-beta.0

package/dist/input/input.js

@@ -1,203 +1,36 @@
-import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import closeIcon from '@jetbrains/icons/close-12px';
-import { refObject } from '../global/prop-types.js';
-import { Button } from '../button/button.js';
-import getUID from '../global/get-uid.js';
-import Icon from '../icon/icon.js';
-import composeRefs from '../global/composeRefs.js';
-import { ControlsHeightContext } from '../global/controls-height.js';
-import { m as modules_88cfaf40 } from '../_helpers/input.js';
-import { InputLabel } from './input-label.js';
-import 'focus-visible';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.object.values.js';
+import 'react';
+import 'prop-types';
+import 'classnames';
+import '@jetbrains/icons/close-12px';
+import '../global/prop-types.js';
+import '../button/button.js';
+import '../global/get-uid.js';
+import '../icon/icon.js';
+import '../i18n/i18n-context.js';
+import '../global/composeRefs.js';
+import '../global/controls-height.js';
+import '../control-label/control-label.js';
+export { I as Input, S as Size, I as default } from '../_helpers/input.js';
 import '@jetbrains/icons/chevron-10px';
 import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
 import '../icon/icon__constants.js';
 import 'util-deprecate';
-import '../_helpers/icon.js';
-import '../icon/icon__svg.js';
+import '../_helpers/icon__svg.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/es.string.starts-with.js';
 import '../global/memoize.js';
-
-function noop() {}
-/**
- * @name Input
- */
-var Size;
-(function (Size) {
-  Size["AUTO"] = "Auto";
-  Size["S"] = "S";
-  Size["M"] = "M";
-  Size["L"] = "L";
-  Size["FULL"] = "FULL";
-})(Size || (Size = {}));
-class Input extends PureComponent {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      empty: true
-    });
-    _defineProperty(this, "frame", void 0);
-    _defineProperty(this, "input", void 0);
-    _defineProperty(this, "id", getUID('ring-input-'));
-    _defineProperty(this, "inputRef", el => {
-      this.input = el;
-    });
-    _defineProperty(this, "clear", e => {
-      this.props.onClear && this.props.onClear(e);
-    });
-    _defineProperty(this, "handleInputChange", e => {
-      if (!this.props.multiline) {
-        this.props.onChange?.(e);
-        this.checkValue();
-      }
-    });
-    _defineProperty(this, "handleTextareaChange", e => {
-      if (this.props.multiline) {
-        this.props.onChange?.(e);
-        this.checkValue();
-      }
-    });
-  }
-  componentDidMount() {
-    this.frame = requestAnimationFrame(() => this.adapt());
-  }
-  componentDidUpdate() {
-    this.adapt();
-  }
-  componentWillUnmount() {
-    if (this.frame != null) {
-      cancelAnimationFrame(this.frame);
-    }
-  }
-  getId() {
-    return this.props.id || this.id;
-  }
-  checkValue() {
-    this.setState({
-      empty: !this.input?.value
-    });
-    if (this.props.multiline && this.input != null && this.input.scrollHeight >= this.input.clientHeight) {
-      this.stretch(this.input);
-    }
-  }
-  stretch(el) {
-    if (!el || !el.style) {
-      return;
-    }
-    el.style.height = '0'; // To know the real scrollHeight
-    el.style.height = `${el.scrollHeight + 2}px`;
-  }
-  adapt() {
-    this.checkValue();
-  }
-  render() {
-    const {
-      // Modifiers
-      size,
-      active,
-      multiline,
-      borderless,
-      // Props
-      label,
-      error,
-      className,
-      inputClassName,
-      children,
-      value,
-      onClear,
-      disabled,
-      inputRef,
-      onChange,
-      enableShortcuts,
-      id,
-      placeholder,
-      icon,
-      height = this.context,
-      afterInput,
-      ...restProps
-    } = this.props;
-    const {
-      empty
-    } = this.state;
-    const clearable = !!onClear;
-    const classes = classNames(className, modules_88cfaf40.outerContainer, [modules_88cfaf40[`size${size}`]], [modules_88cfaf40[`height${height}`]], {
-      'ring-js-shortcuts': enableShortcuts === true,
-      [modules_88cfaf40.active]: active,
-      [modules_88cfaf40.error]: error != null,
-      [modules_88cfaf40.empty]: empty,
-      [modules_88cfaf40.noLabel]: !this.props.label,
-      [modules_88cfaf40.withIcon]: icon != null,
-      [modules_88cfaf40.clearable]: clearable,
-      [modules_88cfaf40.borderless]: borderless
-    });
-    const inputClasses = classNames(modules_88cfaf40.input, inputClassName);
-    const text = value != null ? value : children;
-    const commonProps = {
-      ref: composeRefs(this.inputRef, inputRef),
-      className: inputClasses,
-      value: text,
-      disabled,
-      id: this.getId(),
-      placeholder,
-      'aria-label': typeof label === 'string' && label ? label : placeholder,
-      'data-enabled-shortcuts': Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null
-    };
-    return /*#__PURE__*/React.createElement("div", {
-      className: classes,
-      "data-test": "ring-input"
-    }, label && /*#__PURE__*/React.createElement(InputLabel, {
-      htmlFor: this.getId(),
-      disabled: disabled,
-      label: label
-    }), /*#__PURE__*/React.createElement("div", {
-      className: modules_88cfaf40.container
-    }, icon && /*#__PURE__*/React.createElement(Icon, {
-      glyph: icon,
-      className: modules_88cfaf40.icon
-    }), multiline ? /*#__PURE__*/React.createElement("textarea", _extends({
-      onChange: this.handleTextareaChange,
-      rows: 1
-    }, commonProps, restProps)) : /*#__PURE__*/React.createElement("input", _extends({
-      onChange: this.handleInputChange
-    }, commonProps, restProps)), clearable && !disabled && /*#__PURE__*/React.createElement(Button, {
-      title: "Clear input",
-      "data-test": "ring-input-clear",
-      className: modules_88cfaf40.clear,
-      icon: closeIcon,
-      onClick: this.clear
-    }), afterInput), error && /*#__PURE__*/React.createElement("div", {
-      className: modules_88cfaf40.errorText
-    }, error));
-  }
-}
-_defineProperty(Input, "defaultProps", {
-  size: Size.M,
-  onChange: noop,
-  inputRef: noop,
-  enableShortcuts: ['esc']
-});
-_defineProperty(Input, "contextType", ControlsHeightContext);
-Input.propTypes = {
-  value: PropTypes.string,
-  className: PropTypes.string,
-  inputClassName: PropTypes.string,
-  size: PropTypes.oneOf(Object.values(Size)).isRequired,
-  label: PropTypes.node,
-  active: PropTypes.bool,
-  error: PropTypes.string,
-  multiline: PropTypes.bool,
-  onChange: PropTypes.func,
-  onClear: PropTypes.func,
-  inputRef: PropTypes.oneOfType([PropTypes.func, refObject(PropTypes.instanceOf(HTMLInputElement)), refObject(PropTypes.instanceOf(HTMLTextAreaElement))]),
-  children: PropTypes.string,
-  enableShortcuts: PropTypes.oneOfType([PropTypes.bool, PropTypes.arrayOf(PropTypes.string.isRequired)]),
-  disabled: PropTypes.bool,
-  id: PropTypes.string,
-  placeholder: PropTypes.string,
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType])
-};
-
-export { Input, Size, Input as default };
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.map.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.string.iterator.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.weak-map.js';
+import 'core-js/modules/es.regexp.to-string.js';
+import '../i18n/i18n.js';
+import 'core-js/modules/es.set.js';
+import 'core-js/modules/web.dom-collections.for-each.js';

package/dist/island/adaptive-island-hoc.d.ts

@@ -8,7 +8,7 @@ export default function adaptiveIslandHOC<P>(ComposedComponent: ComponentType<P>
             phase: null;
         };
         onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
-        render(): JSX.Element;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
@@ -34,7 +34,7 @@ export default function adaptiveIslandHOC<P>(ComposedComponent: ComponentType<P>
             phase: null;
         };
         onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
-        render(): JSX.Element;
+        render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;

package/dist/island/adaptive-island-hoc.js

@@ -1,42 +1,53 @@
-import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, d as _createClass } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
 import React, { createContext, Component } from 'react';
 import { interpolateLinear } from '../global/linear-function.js';
 
-const TITLE_RESIZE_END = 20;
-const TITLE_RESIZE_THRESHOLD = 36;
-const PhaseContext = /*#__PURE__*/createContext(null);
-const ScrollHandlerContext = /*#__PURE__*/createContext(null);
+var TITLE_RESIZE_END = 20;
+var TITLE_RESIZE_THRESHOLD = 36;
+var PhaseContext = /*#__PURE__*/createContext(null);
+var ScrollHandlerContext = /*#__PURE__*/createContext(null);
 function adaptiveIslandHOC(ComposedComponent) {
   var _class;
-  return _class = class AdaptiveIsland extends Component {
-    constructor() {
-      super(...arguments);
-      _defineProperty(this, "state", {
+  return _class = /*#__PURE__*/function (_Component) {
+    _inherits(AdaptiveIsland, _Component);
+    var _super = _createSuper(AdaptiveIsland);
+    function AdaptiveIsland() {
+      var _this;
+      _classCallCheck(this, AdaptiveIsland);
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      _this = _super.call.apply(_super, [this].concat(args));
+      _defineProperty(_assertThisInitialized(_this), "state", {
         phase: null
       });
-      _defineProperty(this, "onContentScroll", _ref => {
+      _defineProperty(_assertThisInitialized(_this), "onContentScroll", function (_ref) {
         var _this$state$phase;
-        let {
-          scrollTop,
-          scrollHeight,
-          clientHeight
-        } = _ref;
-        if (scrollHeight - clientHeight >= interpolateLinear(TITLE_RESIZE_THRESHOLD, TITLE_RESIZE_END, (_this$state$phase = this.state.phase) !== null && _this$state$phase !== void 0 ? _this$state$phase : 0)) {
-          const phase = Math.min(1, scrollTop / TITLE_RESIZE_END);
-          this.setState({
-            phase
+        var scrollTop = _ref.scrollTop,
+          scrollHeight = _ref.scrollHeight,
+          clientHeight = _ref.clientHeight;
+        if (scrollHeight - clientHeight >= interpolateLinear(TITLE_RESIZE_THRESHOLD, TITLE_RESIZE_END, (_this$state$phase = _this.state.phase) !== null && _this$state$phase !== void 0 ? _this$state$phase : 0)) {
+          var phase = Math.min(1, scrollTop / TITLE_RESIZE_END);
+          _this.setState({
+            phase: phase
           });
         }
       });
+      return _this;
     }
-    render() {
-      return /*#__PURE__*/React.createElement(PhaseContext.Provider, {
-        value: this.state.phase
-      }, /*#__PURE__*/React.createElement(ScrollHandlerContext.Provider, {
-        value: this.onContentScroll
-      }, /*#__PURE__*/React.createElement(ComposedComponent, this.props)));
-    }
-  }, _defineProperty(_class, "propTypes", ComposedComponent.propTypes), _class;
+    _createClass(AdaptiveIsland, [{
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/React.createElement(PhaseContext.Provider, {
+          value: this.state.phase
+        }, /*#__PURE__*/React.createElement(ScrollHandlerContext.Provider, {
+          value: this.onContentScroll
+        }, /*#__PURE__*/React.createElement(ComposedComponent, this.props)));
+      }
+    }]);
+    return AdaptiveIsland;
+  }(Component), _defineProperty(_class, "propTypes", ComposedComponent.propTypes), _class;
 }
 
 export { PhaseContext, ScrollHandlerContext, adaptiveIslandHOC as default };

package/dist/island/content.d.ts

@@ -37,7 +37,7 @@ declare class Content extends Component<IslandContentInnerProps> {
     calculateScrollPosition: () => void;
     scrollableNode?: HTMLElement | null;
     setScrollableNodeAndCalculatePosition: (node: HTMLElement | null) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 declare const ContentWrapper: React.ForwardRefExoticComponent<IslandContentProps & React.RefAttributes<Content>>;
 export default ContentWrapper;

package/dist/island/content.js

@@ -1,4 +1,5 @@
-import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, d as _createClass, e as _objectWithoutProperties, f as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
 import React, { Component, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -8,104 +9,113 @@ import { m as modules_e6a056e1 } from '../_helpers/island.js';
 import { ScrollHandlerContext } from './adaptive-island-hoc.js';
 import '../global/linear-function.js';
 
-const scheduleScrollAction = scheduleRAF();
-const noop = () => {};
-const END_DISTANCE = 16;
-class Content extends Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
+var _excluded = ["children", "className", "bottomBorder", "scrollableWrapperClassName", "onScroll", "onScrollToBottom", "fade"];
+var scheduleScrollAction = scheduleRAF();
+var noop = function noop() {};
+var END_DISTANCE = 16;
+var Content = /*#__PURE__*/function (_Component) {
+  _inherits(Content, _Component);
+  var _super = _createSuper(Content);
+  function Content() {
+    var _this;
+    _classCallCheck(this, Content);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
       scrolledToTop: true,
       scrolledToBottom: false
     });
-    _defineProperty(this, "resizeDetector", createResizeDetector({
+    _defineProperty(_assertThisInitialized(_this), "resizeDetector", createResizeDetector({
       strategy: 'scroll'
     }));
-    _defineProperty(this, "wrapperNode", void 0);
-    _defineProperty(this, "setWrapper", node => {
+    _defineProperty(_assertThisInitialized(_this), "wrapperNode", void 0);
+    _defineProperty(_assertThisInitialized(_this), "setWrapper", function (node) {
       if (!node) {
         return;
       }
-      this.wrapperNode = node;
-      this.resizeDetector.listenTo(node, this.calculateScrollPosition);
+      _this.wrapperNode = node;
+      _this.resizeDetector.listenTo(node, _this.calculateScrollPosition);
     });
-    _defineProperty(this, "calculateScrollPosition", () => scheduleScrollAction(() => {
-      const {
-        scrollableNode
-      } = this;
-      if (!scrollableNode) {
-        return;
-      }
-      this.props.onScroll(scrollableNode);
-      const {
-        scrollTop,
-        scrollHeight,
-        offsetHeight
-      } = scrollableNode;
-      const scrolledToTop = scrollTop === 0;
-      const scrolledToBottom = offsetHeight + scrollTop >= scrollHeight - END_DISTANCE;
-      if (scrolledToBottom) {
-        this.props.onScrollToBottom?.();
-      }
-      this.setState({
-        scrolledToTop,
-        scrolledToBottom
+    _defineProperty(_assertThisInitialized(_this), "calculateScrollPosition", function () {
+      return scheduleScrollAction(function () {
+        var _assertThisInitialize = _assertThisInitialized(_this),
+          scrollableNode = _assertThisInitialize.scrollableNode;
+        if (!scrollableNode) {
+          return;
+        }
+        _this.props.onScroll(scrollableNode);
+        var scrollTop = scrollableNode.scrollTop,
+          scrollHeight = scrollableNode.scrollHeight,
+          offsetHeight = scrollableNode.offsetHeight;
+        var scrolledToTop = scrollTop === 0;
+        var scrolledToBottom = offsetHeight + scrollTop >= scrollHeight - END_DISTANCE;
+        if (scrolledToBottom) {
+          var _this$props$onScrollT, _this$props;
+          (_this$props$onScrollT = (_this$props = _this.props).onScrollToBottom) === null || _this$props$onScrollT === void 0 ? void 0 : _this$props$onScrollT.call(_this$props);
+        }
+        _this.setState({
+          scrolledToTop: scrolledToTop,
+          scrolledToBottom: scrolledToBottom
+        });
       });
-    }));
-    _defineProperty(this, "scrollableNode", void 0);
-    _defineProperty(this, "setScrollableNodeAndCalculatePosition", node => {
+    });
+    _defineProperty(_assertThisInitialized(_this), "scrollableNode", void 0);
+    _defineProperty(_assertThisInitialized(_this), "setScrollableNodeAndCalculatePosition", function (node) {
       if (!node) {
         return;
       }
-      this.scrollableNode = node;
-      this.calculateScrollPosition();
+      _this.scrollableNode = node;
+      _this.calculateScrollPosition();
     });
+    return _this;
   }
-  componentWillUnmount() {
-    this.scrollableNode = null;
-    if (!this.wrapperNode) {
-      return;
+  _createClass(Content, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.scrollableNode = null;
+      if (!this.wrapperNode) {
+        return;
+      }
+      this.resizeDetector.removeAllListeners(this.wrapperNode);
     }
-    this.resizeDetector.removeAllListeners(this.wrapperNode);
-  }
-  render() {
-    const {
-      children,
-      className,
-      bottomBorder,
-      scrollableWrapperClassName,
-      onScroll,
-      onScrollToBottom,
-      fade,
-      ...restProps
-    } = this.props;
-    const {
-      scrolledToTop,
-      scrolledToBottom
-    } = this.state;
-    const classes = classNames(modules_e6a056e1.content, className, {
-      [modules_e6a056e1.contentWithTopFade]: fade && !scrolledToTop,
-      [modules_e6a056e1.contentWithBottomFade]: fade && !scrolledToBottom,
-      [modules_e6a056e1.withTransparentBottomBorder]: bottomBorder,
-      [modules_e6a056e1.withBottomBorder]: bottomBorder && !scrolledToBottom
-    });
-    const scrollableWrapperClasses = classNames(modules_e6a056e1.scrollableWrapper, scrollableWrapperClassName);
-    return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-      "data-test": "ring-island-content",
-      className: classes
-    }), /*#__PURE__*/React.createElement("div", {
-      // it has to be focusable because it can be scrollable
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      tabIndex: 0,
-      "data-scrollable-container": true,
-      className: scrollableWrapperClasses,
-      ref: this.setScrollableNodeAndCalculatePosition,
-      onScroll: fade ? this.calculateScrollPosition : noop
-    }, fade && /*#__PURE__*/React.createElement("div", {
-      ref: this.setWrapper
-    }, children), !fade && children));
-  }
-}
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames;
+      var _this$props2 = this.props,
+        children = _this$props2.children,
+        className = _this$props2.className,
+        bottomBorder = _this$props2.bottomBorder,
+        scrollableWrapperClassName = _this$props2.scrollableWrapperClassName;
+        _this$props2.onScroll;
+        _this$props2.onScrollToBottom;
+        var fade = _this$props2.fade,
+        restProps = _objectWithoutProperties(_this$props2, _excluded);
+      var _this$state = this.state,
+        scrolledToTop = _this$state.scrolledToTop,
+        scrolledToBottom = _this$state.scrolledToBottom;
+      var classes = classNames(modules_e6a056e1.content, className, (_classNames = {}, _defineProperty(_classNames, modules_e6a056e1.contentWithTopFade, fade && !scrolledToTop), _defineProperty(_classNames, modules_e6a056e1.contentWithBottomFade, fade && !scrolledToBottom), _defineProperty(_classNames, modules_e6a056e1.withTransparentBottomBorder, bottomBorder), _defineProperty(_classNames, modules_e6a056e1.withBottomBorder, bottomBorder && !scrolledToBottom), _classNames));
+      var scrollableWrapperClasses = classNames(modules_e6a056e1.scrollableWrapper, scrollableWrapperClassName);
+      return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+        "data-test": "ring-island-content",
+        className: classes
+      }), /*#__PURE__*/React.createElement("div", {
+        // it has to be focusable because it can be scrollable
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex: 0,
+        "data-scrollable-container": true,
+        className: scrollableWrapperClasses,
+        ref: this.setScrollableNodeAndCalculatePosition,
+        onScroll: fade ? this.calculateScrollPosition : noop
+      }, fade && /*#__PURE__*/React.createElement("div", {
+        ref: this.setWrapper
+      }, children), !fade && children));
+    }
+  }]);
+  return Content;
+}(Component);
 _defineProperty(Content, "propTypes", {
   children: PropTypes.node,
   className: PropTypes.string,
@@ -121,15 +131,17 @@ _defineProperty(Content, "defaultProps", {
   onScroll: noop,
   onScrollToBottom: noop
 });
-const ContentWrapper = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(ScrollHandlerContext.Consumer, null, onScroll => {
-  const addProps = onScroll != null ? {
-    onScroll,
-    bottomBorder: true
-  } : {};
-  return /*#__PURE__*/React.createElement(Content, _extends({}, props, addProps, {
-    ref: ref
-  }));
-}));
+var ContentWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(ScrollHandlerContext.Consumer, null, function (onScroll) {
+    var addProps = onScroll != null ? {
+      onScroll: onScroll,
+      bottomBorder: true
+    } : {};
+    return /*#__PURE__*/React.createElement(Content, _extends({}, props, addProps, {
+      ref: ref
+    }));
+  });
+});
 ContentWrapper.displayName = 'ContentWrapper';
 
 export { ContentWrapper as default };

package/dist/island/header.d.ts

@@ -1,8 +1,8 @@
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 export interface IslandHeaderProps extends HTMLAttributes<HTMLElement> {
     wrapWithTitle?: boolean | undefined;
     border?: boolean | null | undefined;
     phase?: number | undefined;
 }
-declare const HeaderWrapper: (props: IslandHeaderProps) => JSX.Element;
+declare const HeaderWrapper: (props: IslandHeaderProps) => React.JSX.Element;
 export default HeaderWrapper;