@jetbrains/ring-ui-built 6.0.1

package/components/dropdown/dropdown.js

@@ -0,0 +1,247 @@
+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, { cloneElement, Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import joinDataTestAttributes from '../global/data-tests.js';
+import { isArray } from '../global/typescript-utils.js';
+import { m as modules_d9414203, A as Anchor } from '../_helpers/anchor.js';
+import 'core-js/modules/es.array.reduce.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.object.entries.js';
+import '@jetbrains/icons/chevron-10px';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.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';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.map.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.weak-map.js';
+import '../button/button.js';
+import '../link/clickableLink.js';
+import '../global/controls-height.js';
+import '../_helpers/button__classes.js';
+
+var _excluded = ["initShown", "onShow", "onHide", "hoverShowTimeOut", "hoverHideTimeOut", "children", "anchor", "className", "activeClassName", "hoverMode", "clickMode", "data-test", "disabled"];
+/**
+ * @name Dropdown
+ */
+var Dropdown = /*#__PURE__*/function (_Component) {
+  _inherits(Dropdown, _Component);
+  var _super = _createSuper(Dropdown);
+  function Dropdown() {
+    var _this;
+    _classCallCheck(this, Dropdown);
+    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", {
+      show: _this.props.initShown,
+      pinned: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "onClick", function () {
+      if (_this.props.disabled) {
+        return;
+      }
+      var _this$state = _this.state,
+        show = _this$state.show,
+        pinned = _this$state.pinned;
+      var nextPinned = pinned;
+      if (_this.props.hoverMode) {
+        if (!pinned) {
+          nextPinned = true;
+          if (show) {
+            _this.setState({
+              pinned: true
+            });
+            return;
+          }
+        } else {
+          nextPinned = false;
+        }
+      }
+      _this._toggle(!show, nextPinned);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onChildCloseAttempt", function () {
+      var nextPinned = _this.state.pinned;
+      if (_this.props.hoverMode) {
+        nextPinned = false;
+      }
+      _this._toggle(false, nextPinned);
+    });
+    _defineProperty(_assertThisInitialized(_this), "hoverTimer", void 0);
+    _defineProperty(_assertThisInitialized(_this), "onMouseEnter", function (event) {
+      var _this$props$onMouseEn, _this$props;
+      if (_this.props.disabled) {
+        return;
+      }
+      _this._clearTimer();
+      (_this$props$onMouseEn = (_this$props = _this.props).onMouseEnter) === null || _this$props$onMouseEn === void 0 || _this$props$onMouseEn.call(_this$props, event);
+      _this.hoverTimer = window.setTimeout(function () {
+        if (!_this.state.show) {
+          _this._toggle(true);
+        }
+      }, _this.props.hoverShowTimeOut);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onMouseLeave", function (event) {
+      var _this$props$onMouseLe, _this$props2;
+      if (_this.props.disabled) {
+        return;
+      }
+      (_this$props$onMouseLe = (_this$props2 = _this.props).onMouseLeave) === null || _this$props$onMouseLe === void 0 || _this$props$onMouseLe.call(_this$props2, event);
+      if (_this.state.pinned) {
+        return;
+      }
+      _this._clearTimer();
+      _this.hoverTimer = window.setTimeout(function () {
+        if (_this.state.show) {
+          _this._toggle(false);
+        }
+      }, _this.props.hoverHideTimeOut);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handlePopupInteraction", function () {
+      _this.setState(function (_ref) {
+        var pinned = _ref.pinned;
+        return pinned ? null : {
+          pinned: true
+        };
+      });
+    });
+    return _this;
+  }
+  _createClass(Dropdown, [{
+    key: "toggle",
+    value: function toggle() {
+      var show = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !this.state.show;
+      this._toggle(show);
+    }
+  }, {
+    key: "_toggle",
+    value: function _toggle(show) {
+      var _this2 = this;
+      var pinned = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.state.pinned;
+      this.setState({
+        show,
+        pinned
+      }, function () {
+        return show ? _this2.props.onShow() : _this2.props.onHide();
+      });
+    }
+  }, {
+    key: "_clearTimer",
+    value: function _clearTimer() {
+      if (this.hoverTimer) {
+        clearTimeout(this.hoverTimer);
+        this.hoverTimer = null;
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state2 = this.state,
+        show = _this$state2.show,
+        pinned = _this$state2.pinned;
+      var _this$props3 = this.props;
+        _this$props3.initShown;
+        _this$props3.onShow;
+        _this$props3.onHide;
+        _this$props3.hoverShowTimeOut;
+        _this$props3.hoverHideTimeOut;
+        var children = _this$props3.children,
+        anchor = _this$props3.anchor,
+        className = _this$props3.className,
+        activeClassName = _this$props3.activeClassName,
+        hoverMode = _this$props3.hoverMode,
+        clickMode = _this$props3.clickMode,
+        dataTest = _this$props3['data-test'];
+        _this$props3.disabled;
+        var restProps = _objectWithoutProperties(_this$props3, _excluded);
+      var classes = classNames(modules_d9414203.dropdown, className, {
+        [activeClassName !== null && activeClassName !== void 0 ? activeClassName : '']: activeClassName != null && show
+      });
+      var anchorElement;
+      var active = hoverMode ? pinned : show;
+      switch (typeof anchor) {
+        case 'string':
+          anchorElement = /*#__PURE__*/React.createElement(Anchor, {
+            active: active
+          }, anchor);
+          break;
+        case 'function':
+          anchorElement = anchor({
+            active: show,
+            pinned
+          });
+          break;
+        default:
+          if (isArray(anchor) || typeof anchor.type === 'string') {
+            anchorElement = anchor;
+          } else {
+            anchorElement = /*#__PURE__*/cloneElement(anchor, {
+              active
+            });
+          }
+      }
+      var childProps = {
+        hidden: !show,
+        onCloseAttempt: this.onChildCloseAttempt,
+        onMouseDown: hoverMode ? this.handlePopupInteraction : undefined,
+        onContextMenu: hoverMode ? this.handlePopupInteraction : undefined,
+        dontCloseOnAnchorClick: true
+      };
+      return /*#__PURE__*/React.createElement("div", _extends({
+        "data-test": joinDataTestAttributes('ring-dropdown', dataTest)
+      }, restProps, {
+        onClick: clickMode ? this.onClick : undefined
+        // anchorElement should be a `button` or an `a`
+        ,
+        role: "presentation",
+        onMouseEnter: hoverMode ? this.onMouseEnter : undefined,
+        onMouseLeave: hoverMode ? this.onMouseLeave : undefined,
+        className: classes
+      }), anchorElement, typeof children === 'function' ? children(childProps) : /*#__PURE__*/cloneElement(children, childProps));
+    }
+  }]);
+  return Dropdown;
+}(Component);
+_defineProperty(Dropdown, "propTypes", {
+  /**
+   * Can be string, React element, or a function accepting an object with {active, pinned} properties and returning a React element
+   * React element should render some interactive HTML element like `button` or `a`
+   */
+  anchor: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
+  initShown: PropTypes.bool,
+  className: PropTypes.string,
+  activeClassName: PropTypes.string,
+  clickMode: PropTypes.bool,
+  hoverMode: PropTypes.bool,
+  hoverShowTimeOut: PropTypes.number,
+  hoverHideTimeOut: PropTypes.number,
+  disabled: PropTypes.bool,
+  onShow: PropTypes.func,
+  onHide: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  'data-test': PropTypes.string
+});
+_defineProperty(Dropdown, "defaultProps", {
+  initShown: false,
+  clickMode: true,
+  hoverMode: false,
+  hoverShowTimeOut: 300,
+  hoverHideTimeOut: 600,
+  disabled: false,
+  onShow: function onShow() {},
+  onHide: function onHide() {},
+  onMouseEnter: function onMouseEnter() {},
+  onMouseLeave: function onMouseLeave() {}
+});
+
+export { Anchor, Dropdown as default };

package/components/dropdown-menu/dropdown-menu.d.ts

@@ -0,0 +1,36 @@
+import React, { ReactElement, ReactNodeArray, HTMLAttributes, SyntheticEvent } from 'react';
+import { SelectHandlerParams } from '../list/list';
+import { AnchorProps, DropdownAttrs } from '../dropdown/dropdown';
+import PopupMenu, { PopupMenuAttrs } from '../popup-menu/popup-menu';
+import { ListDataItem } from '../list/consts';
+export interface DropdownAnchorWrapperProps extends AnchorProps {
+    anchor: ReactElement | ReactNodeArray | string | ((props: AnchorProps, ariaProps: HTMLAttributes<HTMLElement>) => ReactElement | null);
+    activeListItemId?: string | null | undefined;
+    listId?: string | undefined;
+}
+export interface DropdownMenuProps<T = unknown> extends Omit<DropdownAttrs, 'anchor' | 'onSelect' | 'children'> {
+    anchor: ReactElement | ReactNodeArray | string | ((props: AnchorProps, ariaProps: HTMLAttributes<HTMLElement>) => ReactElement | null);
+    data?: readonly ListDataItem<T>[] | undefined;
+    ariaLabel?: string | null | undefined;
+    onSelect?: ((item: ListDataItem<T>, event: Event | SyntheticEvent, params?: SelectHandlerParams) => void) | undefined;
+    menuProps?: PopupMenuAttrs<T> | null | undefined;
+}
+declare const _default: (<T = unknown>(props: DropdownMenuProps<T> & {
+    ref?: React.Ref<PopupMenu<unknown>> | undefined;
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
+    ListProps: {
+        Type: typeof import("../list/consts").Type;
+        Dimension: {
+            ITEM_PADDING: number;
+            ITEM_HEIGHT: number;
+            COMPACT_ITEM_HEIGHT: number;
+            SEPARATOR_HEIGHT: number;
+            SEPARATOR_FIRST_HEIGHT: number;
+            SEPARATOR_TEXT_HEIGHT: number;
+            TITLE_HEIGHT: number;
+            INNER_PADDING: number;
+            MARGIN: number;
+        };
+    };
+};
+export default _default;

package/components/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,199 @@
+import { e as _objectWithoutProperties, g as _objectSpread2, f as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.object.assign.js';
+import React, { useMemo, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import List, { ActiveItemContext } from '../list/list.js';
+import Dropdown from '../dropdown/dropdown.js';
+import PopupMenu from '../popup-menu/popup-menu.js';
+import getUID from '../global/get-uid.js';
+import { A as Anchor } from '../_helpers/anchor.js';
+import { isArray } from '../global/typescript-utils.js';
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.string.includes.js';
+import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.symbol.js';
+import 'core-js/modules/es.symbol.description.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.array.find-index.js';
+import 'core-js/modules/es.array.find.js';
+import 'classnames';
+import 'react-virtualized/dist/es/List';
+import 'react-virtualized/dist/es/AutoSizer';
+import 'react-virtualized/dist/es/WindowScroller';
+import 'react-virtualized/dist/es/CellMeasurer';
+import 'util-deprecate';
+import 'memoize-one';
+import '../global/data-tests.js';
+import 'core-js/modules/es.array.reduce.js';
+import 'core-js/modules/es.object.entries.js';
+import '../global/schedule-raf.js';
+import '../global/memoize.js';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.map.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.weak-map.js';
+import '../global/dom.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.string.split.js';
+import 'core-js/modules/es.set.js';
+import '../shortcuts/shortcuts.js';
+import '../shortcuts/core.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.array.splice.js';
+import 'core-js/modules/es.string.match.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../global/create-stateful-context.js';
+import '../list/list__link.js';
+import '../link/link.js';
+import '../link/clickableLink.js';
+import '../_helpers/link.js';
+import '../_helpers/list.js';
+import '../list/list__item.js';
+import 'core-js/modules/es.array.index-of.js';
+import '../avatar/avatar.js';
+import '../global/url.js';
+import 'core-js/modules/es.string.replace.js';
+import '../avatar/fallback-avatar.js';
+import 'core-js/modules/es.array.from.js';
+import 'core-js/modules/es.regexp.to-string.js';
+import '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark-14px';
+import '@jetbrains/icons/remove-14px';
+import '../icon/icon.js';
+import '../icon/icon__constants.js';
+import '../_helpers/icon__svg.js';
+import 'core-js/modules/es.string.starts-with.js';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
+import '../list/list__custom.js';
+import '../global/get-event-key.js';
+import '../list/list__title.js';
+import '../list/list__separator.js';
+import '../list/list__hint.js';
+import '../list/consts.js';
+import '@jetbrains/icons/chevron-10px';
+import '../button/button.js';
+import '../global/controls-height.js';
+import '../_helpers/button__classes.js';
+import '../popup/popup.js';
+import 'react-dom';
+import '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import 'core-js/modules/es.array.sort.js';
+import '../popup/popup.consts.js';
+import '../popup/popup.target.js';
+
+var _excluded = ["anchor", "pinned", "active", "activeListItemId", "listId"],
+  _excluded2 = ["id", "anchor", "ariaLabel", "data", "onSelect", "menuProps"],
+  _excluded3 = ["pinned", "active"];
+var _ref = Dropdown.propTypes || {};
+  _ref.children;
+  var dropdownPropTypes = _objectWithoutProperties(_ref, ["children"]);
+var _ref2 = PopupMenu.propTypes || {},
+  idPropType = _ref2.id,
+  dataPropType = _ref2.data,
+  ariaLabelPropType = _ref2.ariaLabel,
+  onSelectPropType = _ref2.onSelect;
+var defaultAriaLabel = 'Dropdown menu';
+function DropdownAnchorWrapper(_ref3) {
+  var anchor = _ref3.anchor,
+    pinned = _ref3.pinned,
+    active = _ref3.active,
+    activeListItemId = _ref3.activeListItemId,
+    listId = _ref3.listId,
+    restProps = _objectWithoutProperties(_ref3, _excluded);
+  var anchorAriaProps = useMemo(function () {
+    return _objectSpread2(_objectSpread2(_objectSpread2({}, listId ? {
+      'aria-haspopup': true
+    } : {}), activeListItemId ? {
+      'aria-activedescendant': activeListItemId,
+      'aria-owns': listId
+    } : {}), active ? {
+      'aria-expanded': true
+    } : {});
+  }, [active, activeListItemId, listId]);
+  var anchorProps = useMemo(function () {
+    return _objectSpread2(_objectSpread2({
+      active,
+      pinned
+    }, restProps), anchorAriaProps);
+  }, [pinned, active, restProps, anchorAriaProps]);
+  var anchorComponentProps = useMemo(function () {
+    return _objectSpread2(_objectSpread2({}, anchorProps), {}, {
+      pinned: "".concat(anchorProps.pinned)
+    });
+  }, [anchorProps]);
+  if (typeof anchor === 'string') {
+    return /*#__PURE__*/React.createElement(Anchor, anchorComponentProps, anchor);
+  }
+  if (typeof anchor === 'function') {
+    return anchor(_objectSpread2({
+      active,
+      pinned
+    }, restProps), anchorAriaProps);
+  }
+  if (!isArray(anchor)) {
+    return /*#__PURE__*/cloneElement(anchor, typeof anchor.type === 'string' ? anchorAriaProps : anchorComponentProps);
+  }
+  return /*#__PURE__*/React.createElement("div", anchorAriaProps, anchor);
+}
+DropdownAnchorWrapper.propTypes = {
+  anchor: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.func]).isRequired,
+  pinned: PropTypes.bool,
+  active: PropTypes.bool,
+  activeListItemId: PropTypes.string,
+  listId: PropTypes.string
+};
+var DropdownMenu = /*#__PURE__*/React.forwardRef(function DropdownMenu(_ref4, forwardedRef) {
+  var id = _ref4.id,
+    _anchor = _ref4.anchor,
+    ariaLabel = _ref4.ariaLabel,
+    data = _ref4.data,
+    onSelect = _ref4.onSelect,
+    menuProps = _ref4.menuProps,
+    restDropdownProps = _objectWithoutProperties(_ref4, _excluded2);
+  var listId = useMemo(function () {
+    return id || getUID('dropdown-menu-list');
+  }, [id]);
+  return /*#__PURE__*/React.createElement(ActiveItemContext.Provider, null, /*#__PURE__*/React.createElement(Dropdown, _extends({
+    anchor: function anchor(_ref5) {
+      var pinned = _ref5.pinned,
+        active = _ref5.active,
+        restAnchorProps = _objectWithoutProperties(_ref5, _excluded3);
+      return /*#__PURE__*/React.createElement(ActiveItemContext.ValueContext.Consumer, null, function (activeItemId) {
+        return /*#__PURE__*/React.createElement(DropdownAnchorWrapper, _extends({
+          anchor: _anchor,
+          pinned: pinned,
+          active: active,
+          activeListItemId: activeItemId,
+          listId: listId
+        }, restAnchorProps));
+      });
+    }
+  }, restDropdownProps), /*#__PURE__*/React.createElement(PopupMenu, _extends({
+    ref: forwardedRef,
+    id: listId,
+    ariaLabel: ariaLabel || defaultAriaLabel,
+    closeOnSelect: true,
+    activateFirstItem: true,
+    data: data,
+    onSelect: onSelect
+  }, menuProps))));
+});
+DropdownMenu.propTypes = _objectSpread2({
+  id: idPropType,
+  data: dataPropType,
+  ariaLabel: ariaLabelPropType,
+  onSelect: onSelectPropType,
+  menuProps: PropTypes.object
+}, dropdownPropTypes);
+var DropdownMenu$1 = Object.assign(DropdownMenu, {
+  ListProps: List.ListProps
+});
+
+export { DropdownMenu$1 as default };

package/components/editable-heading/editable-heading.d.ts

@@ -0,0 +1,32 @@
+import React, { InputHTMLAttributes } from 'react';
+import { Levels } from '../heading/heading';
+import { Size } from '../input/input';
+export { Levels };
+export { Size };
+export interface EditableHeadingTranslations {
+    save: string;
+    cancel: string;
+}
+export type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'value' | 'size'> & {
+    level?: Levels;
+    headingClassName?: string | null;
+    inputClassName?: string | null;
+    isEditing?: boolean;
+    isSavingPossible?: boolean;
+    isSaving?: boolean;
+    children?: string;
+    embedded?: boolean;
+    size?: Size;
+    onEdit?: () => void;
+    onSave?: () => void;
+    onCancel?: () => void;
+    'data-test'?: string | null;
+    error?: string;
+    multiline?: boolean;
+    maxInputRows?: number;
+    renderMenu?: () => React.ReactNode;
+    translations?: EditableHeadingTranslations;
+};
+export declare const EditableHeading: (props: EditableHeadingProps) => React.JSX.Element;
+declare const _default: React.MemoExoticComponent<(props: EditableHeadingProps) => React.JSX.Element>;
+export default _default;