@jetbrains/ring-ui-built 7.0.65 → 7.0.70

package/components/radio/radio-item.js

@@ -1,5 +1,3 @@
-import { a as _objectWithoutProperties, b as _objectSpread2, _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, createContext, Component } from 'react';
 import classNames from 'classnames';
@@ -8,42 +6,36 @@ import ControlHelp from '../control-help/control-help.js';
 
 var styles = {"radio":"ring-radio-radio","circle":"ring-radio-circle","input":"ring-radio-input","focus":"ring-radio-focus","label":"ring-radio-label"};
 
-const _excluded = ["className", "children", "help"],
-  _excluded2 = ["value", "onChange"];
 const RadioContext = /*#__PURE__*/createContext({});
 class RadioItemInner extends Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "uid", getUID('ring-radio-item-'));
-    _defineProperty(this, "input", void 0);
-    _defineProperty(this, "inputRef", el => {
-      this.input = el;
-    });
-    _defineProperty(this, "label", void 0);
-    _defineProperty(this, "labelRef", el => {
-      this.label = el;
-    });
-  }
+  uid = getUID('ring-radio-item-');
+  input;
+  inputRef = el => {
+    this.input = el;
+  };
+  label;
+  labelRef = el => {
+    this.label = el;
+  };
   render() {
-    const _this$props = this.props,
-      {
-        className,
-        children,
-        help
-      } = _this$props,
-      restProps = _objectWithoutProperties(_this$props, _excluded);
+    const {
+      className,
+      children,
+      help,
+      ...restProps
+    } = this.props;
     const classes = classNames(styles.radio, className);
     return jsxs("label", {
       ref: this.labelRef,
       className: classes,
       htmlFor: this.uid,
-      children: [jsx("input", _objectSpread2(_objectSpread2({
-        id: this.uid
-      }, restProps), {}, {
+      children: [jsx("input", {
+        id: this.uid,
+        ...restProps,
         ref: this.inputRef,
         className: styles.input,
         type: 'radio'
-      })), jsx("span", {
+      }), jsx("span", {
         className: styles.circle
       }), jsxs("span", {
         className: styles.label,
@@ -56,19 +48,17 @@ class RadioItemInner extends Component {
 }
 const RadioItem = /*#__PURE__*/forwardRef(function RadioItem(props, ref) {
   return jsx(RadioContext.Consumer, {
-    children: _ref => {
-      let {
-          value,
-          onChange
-        } = _ref,
-        restContext = _objectWithoutProperties(_ref, _excluded2);
-      return jsx(RadioItemInner, _objectSpread2(_objectSpread2({
-        ref: ref
-      }, restContext), {}, {
-        checked: value ? value === props.value : undefined,
-        onChange: onChange ? () => onChange(props.value) : undefined
-      }, props));
-    }
+    children: ({
+      value,
+      onChange,
+      ...restContext
+    }) => jsx(RadioItemInner, {
+      ref: ref,
+      ...restContext,
+      checked: value !== undefined ? value === props.value : undefined,
+      onChange: onChange ? () => onChange(props.value) : undefined,
+      ...props
+    })
   });
 });
 

package/components/radio/radio.js

@@ -1,5 +1,3 @@
-import { _ as _defineProperty, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { jsx } from 'react/jsx-runtime';
 import { Component } from 'react';
 import getUID from '../global/get-uid.js';
@@ -11,19 +9,17 @@ import '../control-help/control-help.js';
  * @name Radio
  */
 class Radio extends Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "uid", getUID('ring-radio-'));
-  }
+  static Item = RadioItem;
+  uid = getUID('ring-radio-');
   render() {
     return jsx(RadioContext.Provider, {
-      value: _objectSpread2({
-        name: this.uid
-      }, this.props),
+      value: {
+        name: this.uid,
+        ...this.props
+      },
       children: this.props.children
     });
   }
 }
-_defineProperty(Radio, "Item", RadioItem);
 
 export { Radio as default };

package/components/scrollable-section/scrollable-section.js

@@ -1,17 +1,13 @@
-import { a as _objectWithoutProperties, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useCallback, useEffect } from 'react';
 import classNames from 'classnames';
 
 var styles = {"scrollableSection":"ring-scrollable-section-scrollableSection","withTopBorder":"ring-scrollable-section-withTopBorder","withRightBorder":"ring-scrollable-section-withRightBorder","withBottomBorder":"ring-scrollable-section-withBottomBorder","withLeftBorder":"ring-scrollable-section-withLeftBorder"};
 
-const _excluded = ["className"];
-function ScrollableSection(_ref) {
-  let {
-      className
-    } = _ref,
-    restProps = _objectWithoutProperties(_ref, _excluded);
+function ScrollableSection({
+  className,
+  ...restProps
+}) {
   const [scrolledToTop, setScrolledToTop] = useState(false);
   const [scrolledToRight, setScrolledToRight] = useState(false);
   const [scrolledToBottom, setScrolledToBottom] = useState(false);
@@ -38,7 +34,8 @@ function ScrollableSection(_ref) {
     window.addEventListener('resize', calculateScrollPosition);
     return () => window.removeEventListener('resize', calculateScrollPosition);
   }, [calculateScrollPosition]);
-  return jsx("div", _objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx("div", {
+    ...restProps,
     className: classNames(styles.scrollableSection, className, {
       [styles.withTopBorder]: !scrolledToTop,
       [styles.withRightBorder]: !scrolledToRight,
@@ -47,7 +44,7 @@ function ScrollableSection(_ref) {
     }),
     ref: ref,
     onScroll: calculateScrollPosition
-  }));
+  });
 }
 
 export { ScrollableSection as default };

package/components/select/select-filter.js

@@ -1,5 +1,3 @@
-import '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'classnames';
@@ -16,8 +14,6 @@ import 'util-deprecate';
 import '../icon/icon.js';
 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 '../global/memoize.js';
 import '../link/clickable-link.js';
 import '../global/controls-height.js';
@@ -29,8 +25,6 @@ import 'memoize-one';
 import '../control-label/control-label.js';
 import '../control-help/control-help.js';
 import 'sniffr';
-import 'core-js/modules/es.symbol.description.js';
-import 'core-js/modules/es.string.trim.js';
 import 'react-virtualized/dist/es/List';
 import 'react-virtualized/dist/es/AutoSizer';
 import 'react-virtualized/dist/es/WindowScroller';

package/components/select/select-popup.js

@@ -1,5 +1,3 @@
-import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { PureComponent } from 'react';
 import classNames from 'classnames';
@@ -28,16 +26,11 @@ import { ControlsHeight } from '../global/configuration.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 'react-dom';
 import '../global/schedule-raf.js';
 import '../global/data-tests.js';
 import '../tab-trap/tab-trap.js';
 import '../popup/position-css.js';
-import 'core-js/modules/es.array.sort.js';
-import 'core-js/modules/es.symbol.description.js';
-import 'core-js/modules/es.string.trim.js';
 import 'react-virtualized/dist/es/List';
 import 'react-virtualized/dist/es/AutoSizer';
 import 'react-virtualized/dist/es/WindowScroller';
@@ -83,159 +76,56 @@ const TOOLBAR_HEIGHT = 49;
 function noop() {}
 const FilterWithShortcuts = shortcutsHOC(SelectFilter);
 class SelectPopup extends PureComponent {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      popupFilterShortcutsOptions: {
-        modal: true,
-        disabled: true
-      },
-      tagsActiveIndex: null
-    });
-    _defineProperty(this, "isClickingPopup", false);
-    // This flag is set to true while an item in the popup is being clicked
-    _defineProperty(this, "filter", void 0);
-    _defineProperty(this, "caret", void 0);
-    _defineProperty(this, "onFilterFocus", () => {
-      this._togglePopupFilterShortcuts(false);
-      this.setState({
-        tagsActiveIndex: null
-      });
-    });
-    _defineProperty(this, "popupFilterOnBlur", () => {
-      if (this.state.tagsActiveIndex === null) {
-        this._togglePopupFilterShortcuts(true);
-      }
-    });
-    _defineProperty(this, "mouseDownHandler", () => {
-      this.isClickingPopup = true;
-    });
-    _defineProperty(this, "mouseUpHandler", () => {
-      this.isClickingPopup = false;
-    });
-    _defineProperty(this, "popup", void 0);
-    _defineProperty(this, "onListSelect", (selected, event, opts) => {
-      const getSelectItemEvent = () => {
-        const customEvent = document.createEvent('Event');
-        customEvent.initEvent('select', true, false);
-        if (event && 'persist' in event) {
-          event.persist();
-        }
-        customEvent.originalEvent = event;
-        return customEvent;
-      };
-      this.props.onSelect(selected, getSelectItemEvent(), opts);
-    });
-    _defineProperty(this, "tabPress", event => {
-      this.props.onCloseAttempt(event, true);
-    });
-    _defineProperty(this, "onClickHandler", () => {
-      var _this$filter;
-      return (_this$filter = this.filter) === null || _this$filter === void 0 ? void 0 : _this$filter.focus();
-    });
-    _defineProperty(this, "handleRemoveTag", memoize(tag => event => this.removeTag(tag, event)));
-    _defineProperty(this, "handleTagClick", memoize(tag => () => {
-      if (Array.isArray(this.props.selected)) {
-        this.setState({
-          tagsActiveIndex: this.props.selected.indexOf(tag)
-        });
-      }
-    }));
-    _defineProperty(this, "handleListResize", () => {
-      this.forceUpdate();
-    });
-    _defineProperty(this, "handleSelectAll", () => {
-      if (Array.isArray(this.props.selected)) {
-        this.props.onSelectAll(this.props.data.filter(item => !item.disabled).length !== this.props.selected.length);
-      }
-    });
-    _defineProperty(this, "getSelectAll", () => {
-      var _multiple$renderSelec;
-      const multiple = this.props.multiple;
-      const activeFilters = this.props.data.filter(item => !item.disabled);
-      return Array.isArray(this.props.selected) && jsxs("div", {
-        className: styles.selectAll,
-        children: [activeFilters.length === 0 ? jsx("span", {}) : jsx(Button, {
-          inline: true,
-          onClick: this.handleSelectAll,
-          children: activeFilters.length !== this.props.selected.length ? multiple.selectAllLabel || 'Select all' : multiple.deselectAllLabel || 'Deselect all'
-        }), ((_multiple$renderSelec = multiple.renderSelectedItemsDescription) === null || _multiple$renderSelec === void 0 ? void 0 : _multiple$renderSelec.call(multiple, this.props.selected, activeFilters.length)) || jsx(Text, {
-          info: true,
-          children: "".concat(this.props.selected.length, " selected")
-        })]
-      });
-    });
-    // Cache the value because this method is called
-    // inside `render` function which can be called N times
-    // and should be fast as possible.
-    // Cache invalidates each time hidden or userDefinedMaxHeight changes
-    _defineProperty(this, "_adjustListMaxHeight", memoizeOne((hidden, userDefinedMaxHeight, ringPopupTarget) => {
-      if (hidden) {
-        return userDefinedMaxHeight;
-      }
-      // Calculate list's maximum height that can't
-      // get beyond the screen
-      // @see RG-1838, JT-48358
-      const minMaxHeight = 100;
-      const directions = this.props.directions || DEFAULT_DIRECTIONS;
-      // Note:
-      // Create a method which'll be called only when the popup opens and before
-      // render the list would be a better way
-      const anchorNode = this.props.anchorElement;
-      const containerNode = getPopupContainer(ringPopupTarget) || document.documentElement;
-      return anchorNode !== null ? Math.min(directions.reduce((maxHeight, direction) => {
-        var _maxHeightForDirectio;
-        return Math.max(maxHeight, (_maxHeightForDirectio = maxHeightForDirection(direction, anchorNode, getStyles(containerNode).position !== 'static' ? containerNode : null)) !== null && _maxHeightForDirectio !== void 0 ? _maxHeightForDirectio : 0);
-      }, minMaxHeight), userDefinedMaxHeight) : userDefinedMaxHeight;
-    }));
-    _defineProperty(this, "popupRef", el => {
-      this.popup = el;
-    });
-    _defineProperty(this, "list", void 0);
-    _defineProperty(this, "listRef", el => {
-      this.list = el;
-    });
-    _defineProperty(this, "filterRef", el => {
-      this.filter = el;
-      this.caret = el && new Caret(el);
-    });
-    _defineProperty(this, "composedFilterRef", createComposedRef());
-    _defineProperty(this, "shortcutsScope", getUID('select-popup-'));
-    _defineProperty(this, "shortcutsMap", {
-      tab: this.tabPress
-    });
-    _defineProperty(this, "popupFilterShortcutsMap", {
-      up: event => this.list && this.list.upHandler(event),
-      down: event => this.list && this.list.downHandler(event),
-      home: event => this.list && this.list.homeHandler(event),
-      end: event => this.list && this.list.endHandler(event),
-      enter: event => this.list ? this.list.enterHandler(event) : this.props.onEmptyPopupEnter(event),
-      esc: event => this.props.onCloseAttempt(event, true),
-      tab: event => this.tabPress(event),
-      backspace: event => this.handleBackspace(event),
-      del: () => this.removeSelectedTag(),
-      left: event => this.handleNavigation(event, true),
-      right: event => this.handleNavigation(event)
-    });
-  }
+  static defaultProps = {
+    data: [],
+    activeIndex: null,
+    toolbar: null,
+    topbar: null,
+    filter: false,
+    filterIcon: null,
+    filterRef: noop,
+    multiple: false,
+    message: null,
+    anchorElement: null,
+    maxHeight: 600,
+    minWidth: 240,
+    loading: false,
+    onSelect: noop,
+    onCloseAttempt: noop,
+    onOutsideClick: noop,
+    onFilter: noop,
+    onClear: noop,
+    onLoadMore: noop,
+    selected: [],
+    tags: null,
+    ringPopupTarget: null,
+    onSelectAll: noop,
+    onEmptyPopupEnter: noop
+  };
+  state = {
+    popupFilterShortcutsOptions: {
+      modal: true,
+      disabled: true
+    },
+    tagsActiveIndex: null
+  };
   componentDidMount() {
     window.document.addEventListener('mouseup', this.mouseUpHandler);
   }
   componentWillUnmount() {
     window.document.removeEventListener('mouseup', this.mouseUpHandler);
   }
+  isClickingPopup = false; // This flag is set to true while an item in the popup is being clicked
+  filter;
   focusFilter() {
-    setTimeout(() => {
-      var _this$filter2;
-      return (_this$filter2 = this.filter) === null || _this$filter2 === void 0 ? void 0 : _this$filter2.focus();
-    });
+    setTimeout(() => this.filter?.focus());
   }
   isEventTargetFilter(event) {
     return event.target instanceof Element && event.target.matches('input,textarea');
   }
+  caret;
   handleNavigation(event, navigateLeft) {
-    var _this$caret;
-    if (this.isEventTargetFilter(event) && this.caret && Number((_this$caret = this.caret) === null || _this$caret === void 0 ? void 0 : _this$caret.getPosition()) > 0 || !Array.isArray(this.props.selected)) {
+    if (this.isEventTargetFilter(event) && this.caret && Number(this.caret?.getPosition()) > 0 || !Array.isArray(this.props.selected)) {
       return;
     }
     let newIndex = null;
@@ -289,6 +179,17 @@ class SelectPopup extends PureComponent {
     }
     return true;
   }
+  onFilterFocus = () => {
+    this._togglePopupFilterShortcuts(false);
+    this.setState({
+      tagsActiveIndex: null
+    });
+  };
+  popupFilterOnBlur = () => {
+    if (this.state.tagsActiveIndex === null) {
+      this._togglePopupFilterShortcuts(true);
+    }
+  };
   _togglePopupFilterShortcuts(shortcutsDisabled) {
     this.setState({
       popupFilterShortcutsOptions: {
@@ -297,9 +198,32 @@ class SelectPopup extends PureComponent {
       }
     });
   }
+  mouseDownHandler = () => {
+    this.isClickingPopup = true;
+  };
+  mouseUpHandler = () => {
+    this.isClickingPopup = false;
+  };
+  popup;
   isVisible() {
     return this.popup && this.popup.isVisible();
   }
+  onListSelect = (selected, event, opts) => {
+    const getSelectItemEvent = () => {
+      const customEvent = document.createEvent('Event');
+      customEvent.initEvent('select', true, false);
+      if (event && 'persist' in event) {
+        event.persist();
+      }
+      customEvent.originalEvent = event;
+      return customEvent;
+    };
+    this.props.onSelect(selected, getSelectItemEvent(), opts);
+  };
+  tabPress = event => {
+    this.props.onCloseAttempt(event, true);
+  };
+  onClickHandler = () => this.filter?.focus();
   getFilter() {
     if (this.props.filter || this.props.tags) {
       var _this$props$filterIco;
@@ -334,6 +258,14 @@ class SelectPopup extends PureComponent {
     }
     return null;
   }
+  handleRemoveTag = memoize(tag => event => this.removeTag(tag, event));
+  handleTagClick = memoize(tag => () => {
+    if (Array.isArray(this.props.selected)) {
+      this.setState({
+        tagsActiveIndex: this.props.selected.indexOf(tag)
+      });
+    }
+  });
   getCustomTag(tags) {
     if (tags !== null && typeof tags !== 'boolean') {
       return tags.customTagComponent;
@@ -381,6 +313,9 @@ class SelectPopup extends PureComponent {
       })]
     });
   }
+  handleListResize = () => {
+    this.forceUpdate();
+  };
   getList(ringPopupTarget) {
     if (this.props.data.length) {
       let {
@@ -418,6 +353,78 @@ class SelectPopup extends PureComponent {
     }
     return null;
   }
+  handleSelectAll = () => {
+    if (Array.isArray(this.props.selected)) {
+      this.props.onSelectAll(this.props.data.filter(item => !item.disabled).length !== this.props.selected.length);
+    }
+  };
+  getSelectAll = () => {
+    const multiple = this.props.multiple;
+    const activeFilters = this.props.data.filter(item => !item.disabled);
+    return Array.isArray(this.props.selected) && jsxs("div", {
+      className: styles.selectAll,
+      children: [activeFilters.length === 0 ? jsx("span", {}) : jsx(Button, {
+        inline: true,
+        onClick: this.handleSelectAll,
+        children: activeFilters.length !== this.props.selected.length ? multiple.selectAllLabel || 'Select all' : multiple.deselectAllLabel || 'Deselect all'
+      }), multiple.renderSelectedItemsDescription?.(this.props.selected, activeFilters.length) || jsx(Text, {
+        info: true,
+        children: `${this.props.selected.length} selected`
+      })]
+    });
+  };
+  // Cache the value because this method is called
+  // inside `render` function which can be called N times
+  // and should be fast as possible.
+  // Cache invalidates each time hidden or userDefinedMaxHeight changes
+  _adjustListMaxHeight = memoizeOne((hidden, userDefinedMaxHeight, ringPopupTarget) => {
+    if (hidden) {
+      return userDefinedMaxHeight;
+    }
+    // Calculate list's maximum height that can't
+    // get beyond the screen
+    // @see RG-1838, JT-48358
+    const minMaxHeight = 100;
+    const directions = this.props.directions || DEFAULT_DIRECTIONS;
+    // Note:
+    // Create a method which'll be called only when the popup opens and before
+    // render the list would be a better way
+    const anchorNode = this.props.anchorElement;
+    const containerNode = getPopupContainer(ringPopupTarget) || document.documentElement;
+    return anchorNode !== null ? Math.min(directions.reduce((maxHeight, direction) => {
+      var _maxHeightForDirectio;
+      return Math.max(maxHeight, (_maxHeightForDirectio = maxHeightForDirection(direction, anchorNode, getStyles(containerNode).position !== 'static' ? containerNode : null)) !== null && _maxHeightForDirectio !== void 0 ? _maxHeightForDirectio : 0);
+    }, minMaxHeight), userDefinedMaxHeight) : userDefinedMaxHeight;
+  });
+  popupRef = el => {
+    this.popup = el;
+  };
+  list;
+  listRef = el => {
+    this.list = el;
+  };
+  filterRef = el => {
+    this.filter = el;
+    this.caret = el && new Caret(el);
+  };
+  composedFilterRef = createComposedRef();
+  shortcutsScope = getUID('select-popup-');
+  shortcutsMap = {
+    tab: this.tabPress
+  };
+  popupFilterShortcutsMap = {
+    up: event => this.list && this.list.upHandler(event),
+    down: event => this.list && this.list.downHandler(event),
+    home: event => this.list && this.list.homeHandler(event),
+    end: event => this.list && this.list.endHandler(event),
+    enter: event => this.list ? this.list.enterHandler(event) : this.props.onEmptyPopupEnter(event),
+    esc: event => this.props.onCloseAttempt(event, true),
+    tab: event => this.tabPress(event),
+    backspace: event => this.handleBackspace(event),
+    del: () => this.removeSelectedTag(),
+    left: event => this.handleNavigation(event, true),
+    right: event => this.handleNavigation(event)
+  };
   render() {
     const {
       toolbar,
@@ -478,31 +485,5 @@ class SelectPopup extends PureComponent {
     });
   }
 }
-_defineProperty(SelectPopup, "defaultProps", {
-  data: [],
-  activeIndex: null,
-  toolbar: null,
-  topbar: null,
-  filter: false,
-  filterIcon: null,
-  filterRef: noop,
-  multiple: false,
-  message: null,
-  anchorElement: null,
-  maxHeight: 600,
-  minWidth: 240,
-  loading: false,
-  onSelect: noop,
-  onCloseAttempt: noop,
-  onOutsideClick: noop,
-  onFilter: noop,
-  onClear: noop,
-  onLoadMore: noop,
-  selected: [],
-  tags: null,
-  ringPopupTarget: null,
-  onSelectAll: noop,
-  onEmptyPopupEnter: noop
-});
 
 export { SelectPopup as default };