@rescui/select 0.1.1

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Select } from './select';
+export { default as NativeSelect } from './parts/native-select';
+export { default as Multiselect } from './parts/multiselect';

package/lib/index.js

@@ -0,0 +1,4 @@
+import './index.css';
+export { default as Select } from './select.js';
+export { default as NativeSelect } from './parts/native-select.js';
+export { default as Multiselect } from './parts/multiselect.js';

package/lib/key-codes.d.ts

@@ -0,0 +1,7 @@
+export declare const ARROW_UP = "ArrowUp";
+export declare const ARROW_DOWN = "ArrowDown";
+export declare const SPACE = " ";
+export declare const ESCAPE = "Escape";
+export declare const ENTER = "Enter";
+export declare const TAB = "Tab";
+export declare const BACKSPACE = "Backspace";

package/lib/key-codes.js

@@ -0,0 +1,8 @@
+var ARROW_UP = 'ArrowUp';
+var ARROW_DOWN = 'ArrowDown';
+var SPACE = ' ';
+var ESCAPE = 'Escape';
+var ENTER = 'Enter';
+var TAB = 'Tab';
+var BACKSPACE = 'Backspace';
+export { ARROW_DOWN, ARROW_UP, BACKSPACE, ENTER, ESCAPE, SPACE, TAB };

package/lib/parts/common-select.module.pcss.js

@@ -0,0 +1,4 @@
+var styles = {
+  "menu": "_menu_o1h6k8_1"
+};
+export default styles;

package/lib/parts/foldable.d.ts

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+export declare type FoldableProps = {
+    className?: string;
+    children: React.ReactNode;
+    gap?: number;
+    renderHiddenCounter?: (num: number, ref: React.Ref<HTMLElement>) => React.ReactNode;
+};
+declare type FoldableState = {
+    lastVisible: number;
+    renderingStage: number;
+    prevChildren: React.ReactNode;
+};
+export default class Foldable extends Component<FoldableProps, FoldableState> {
+    containerRef: React.RefObject<HTMLDivElement>;
+    plusNRef: React.RefObject<HTMLElement>;
+    childrenEls: HTMLElement[];
+    childrenWidths: number[];
+    resizeObserver: ResizeObserver;
+    tagsResizeObserver: ResizeObserver;
+    constructor(props: FoldableProps);
+    static getDerivedStateFromProps(props: FoldableProps, state: FoldableState): {
+        prevChildren: React.ReactNode;
+        renderingStage: number;
+    };
+    observeChildren(): void;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    measureChildren: () => void;
+    recalculateLastVisibleAndSetStage: (nextStage?: number) => void;
+    renderChildren(lastVisible: number): React.FunctionComponentElement<any>[];
+    render(): JSX.Element;
+}
+export {};

package/lib/parts/foldable.js

@@ -0,0 +1,297 @@
+import _Reflect$construct from "@babel/runtime-corejs3/core-js-stable/reflect/construct";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _classCallCheck from "@babel/runtime-corejs3/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime-corejs3/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime-corejs3/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime-corejs3/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime-corejs3/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime-corejs3/helpers/esm/getPrototypeOf";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/esm/toConsumableArray";
+var _excluded = ["children"];
+import "core-js/modules/web.dom-collections.for-each.js";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _JSON$stringify from "@babel/runtime-corejs3/core-js-stable/json/stringify";
+import React, { Component } from 'react';
+import throttle from 'just-throttle';
+import { ResizeObserver as ResizeObserver$1 } from '@juggle/resize-observer';
+var ResizeObserver = typeof window !== 'undefined' && window.ResizeObserver || ResizeObserver$1;
+
+function lastVisibleIndex(lens, maxLen, gap) {
+  var extra = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  var currentLen = 0;
+
+  for (var i = 0; i < lens.length; ++i) {
+    var gapIfNeeded = i === 0 ? 0 : gap;
+
+    if (currentLen + lens[i] + gapIfNeeded > maxLen - extra) {
+      return [i - 1, maxLen - currentLen];
+    }
+
+    currentLen += lens[i] + gapIfNeeded;
+  }
+
+  return [lens.length - 1, maxLen - currentLen];
+}
+
+function measureElement(element) {
+  return {
+    width: element.offsetWidth,
+    height: element.offsetHeight
+  };
+} // Flattens all child elements into a single list
+
+
+var flatten = function flatten(children) {
+  var _context;
+
+  var flat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+
+  var newFlat = _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(flat), _toConsumableArray(React.Children.toArray(children)));
+
+  if (children.props && children.props.children) {
+    return flatten(children.props.children, newFlat);
+  }
+
+  return newFlat;
+}; // Strips all circular references and internal fields
+
+
+var simplify = function simplify(children) {
+  var flat = flatten(children);
+  return _mapInstanceProperty(flat).call(flat, function (_ref) {
+    var key = _ref.key,
+        type = _ref.type,
+        _ref$props = _ref.props,
+        flattenChildren = _ref$props.children,
+        props = _objectWithoutProperties(_ref$props, _excluded);
+
+    return {
+      key: key,
+      type: type,
+      props: props
+    };
+  });
+};
+
+var Foldable = /*#__PURE__*/function (_Component) {
+  _inherits(Foldable, _Component);
+
+  var _super = _createSuper(Foldable);
+
+  // eslint-disable-next-line react/sort-comp
+  function Foldable(props) {
+    var _this;
+
+    _classCallCheck(this, Foldable);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "containerRef", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "plusNRef", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "childrenEls", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "childrenWidths", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "resizeObserver", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "tagsResizeObserver", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "measureChildren", function () {
+      var _assertThisInitialize = _assertThisInitialized(_this),
+          childrenEls = _assertThisInitialize.childrenEls;
+
+      if (childrenEls.some(function (r) {
+        return r === null;
+      })) {
+        throw new Error('childrenEls should be all not nulls');
+      }
+
+      _this.childrenWidths = _mapInstanceProperty(childrenEls).call(childrenEls, function (r) {
+        return measureElement(r).width;
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "recalculateLastVisibleAndSetStage", function () {
+      var nextStage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+
+      var _assertThisInitialize2 = _assertThisInitialized(_this),
+          containerRef = _assertThisInitialize2.containerRef,
+          plusNRef = _assertThisInitialize2.plusNRef;
+
+      if (!containerRef.current) {
+        throw new Error('containerRef should be not null during recalculate');
+      }
+
+      var containerWidth = measureElement(containerRef.current).width;
+      var plusNWidth = 0;
+
+      if (plusNRef.current) {
+        plusNWidth = measureElement(plusNRef.current).width;
+      }
+
+      var gap = _this.props.gap || 0;
+
+      var _lastVisibleIndex = lastVisibleIndex(_this.childrenWidths, containerWidth, gap, plusNWidth + gap + 1),
+          _lastVisibleIndex2 = _slicedToArray(_lastVisibleIndex, 2),
+          index = _lastVisibleIndex2[0],
+          extra = _lastVisibleIndex2[1];
+
+      var children = React.Children.toArray(_this.props.children);
+      var showLastChildIfFit = index === children.length - 2 && extra - gap - 1 > _this.childrenWidths[_this.childrenWidths.length - 1];
+      var newLastVisible = index + (showLastChildIfFit ? 1 : 0);
+      var newState = {
+        lastVisible: newLastVisible,
+        renderingStage: nextStage ? nextStage : _this.state.renderingStage
+      };
+
+      _this.setState(newState);
+    });
+
+    _this.state = {
+      lastVisible: props.children.length - 1,
+      renderingStage: 0,
+      prevChildren: props.children
+    };
+    _this.containerRef = /*#__PURE__*/React.createRef();
+    _this.plusNRef = /*#__PURE__*/React.createRef();
+    _this.childrenEls = [];
+    _this.childrenWidths = [];
+    return _this;
+  }
+
+  _createClass(Foldable, [{
+    key: "observeChildren",
+    value: function observeChildren() {
+      var _this2 = this;
+
+      var isInitialized = false;
+
+      var onTagsSizeChangedThrottled = function onTagsSizeChangedThrottled() {
+        if (isInitialized && // skip updating if the container is not displayed on the page
+        _this2.containerRef.current.offsetParent !== null) {
+          _this2.setState({
+            renderingStage: 0
+          });
+        } else {
+          isInitialized = true;
+        }
+      };
+
+      if (this.tagsResizeObserver) {
+        this.tagsResizeObserver.disconnect();
+      }
+
+      this.tagsResizeObserver = new ResizeObserver(onTagsSizeChangedThrottled);
+      this.childrenEls.forEach(function (child) {
+        return _this2.tagsResizeObserver.observe(child);
+      });
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this3 = this;
+
+      var renderingStage = this.state.renderingStage;
+
+      if (renderingStage === 0) {
+        this.measureChildren();
+        this.observeChildren();
+        this.recalculateLastVisibleAndSetStage(1);
+      }
+
+      var onSizeChangedThrottled = throttle(function () {
+        if (_this3.state.renderingStage === 2) {
+          _this3.recalculateLastVisibleAndSetStage();
+        }
+      }, 50);
+      this.resizeObserver = new ResizeObserver(onSizeChangedThrottled);
+      this.resizeObserver.observe(this.containerRef.current);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var renderingStage = this.state.renderingStage;
+
+      if (renderingStage === 0) {
+        this.measureChildren();
+        this.observeChildren();
+        this.recalculateLastVisibleAndSetStage(1);
+      } else if (renderingStage === 1) {
+        this.recalculateLastVisibleAndSetStage(2);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+      }
+
+      if (this.tagsResizeObserver) {
+        this.tagsResizeObserver.disconnect();
+      }
+    }
+  }, {
+    key: "renderChildren",
+    value: function renderChildren(lastVisible) {
+      var _context2,
+          _this4 = this;
+
+      var children = React.Children.toArray(this.props.children);
+      return _mapInstanceProperty(_context2 = _sliceInstanceProperty(children).call(children, 0, lastVisible + 1)).call(_context2, function (child, i) {
+        return /*#__PURE__*/React.cloneElement(child, {
+          ref: function ref(el) {
+            if (el) {
+              _this4.childrenEls[i] = el;
+            }
+          }
+        });
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var renderHiddenCounter = this.props.renderHiddenCounter;
+      var children = React.Children.toArray(this.props.children);
+      var lastVisible = this.state.renderingStage === 0 ? children.length - 1 : this.state.lastVisible;
+
+      if (children.length !== this.childrenEls.length) {
+        var _context3;
+
+        this.childrenEls = _sliceInstanceProperty(_context3 = this.childrenEls).call(_context3, 0, children.length);
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: this.props.className,
+        ref: this.containerRef
+      }, this.renderChildren(lastVisible), lastVisible !== children.length - 1 ? renderHiddenCounter(children.length - lastVisible - 1, this.plusNRef) : null);
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      if (_JSON$stringify(simplify(props.children)) !== _JSON$stringify(simplify(state.prevChildren))) {
+        return {
+          prevChildren: props.children,
+          renderingStage: 0
+        };
+      }
+
+      return null;
+    }
+  }]);
+
+  return Foldable;
+}(Component);
+
+export default Foldable;

package/lib/parts/form-trigger-wrapper.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Theme } from '@rescui/ui-contexts';
+import { SelectSize } from '../types';
+export declare type FormTriggerWrapperProps = {
+    size?: SelectSize;
+    theme?: Theme;
+    className?: string;
+    error?: boolean | React.ReactNode;
+    label?: React.ReactNode;
+    note?: React.ReactNode;
+};
+declare const FormTriggerWrapper: React.FC<FormTriggerWrapperProps>;
+export default FormTriggerWrapper;

package/lib/parts/form-trigger-wrapper.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import cn from 'classnames';
+import { useTheme, ThemeProvider } from '@rescui/ui-contexts';
+import { useTextStyles, createTextCn } from '@rescui/typography';
+import styles from './form-trigger.module.pcss.js';
+var SIZE_TO_TEXT = {
+  l: 'rs-text-1',
+  m: 'rs-text-2',
+  s: 'rs-text-3'
+};
+var SIZE_STYLES = {
+  l: styles.sizeL,
+  m: styles.sizeM,
+  s: styles.sizeS
+};
+
+function getErrorAndNoteTextClass(size, theme) {
+  var textCn = createTextCn(theme);
+  return textCn(size === 'l' ? 'rs-text-2' : 'rs-text-3');
+}
+
+var Note = function Note(_ref) {
+  var children = _ref.children,
+      size = _ref.size;
+  var theme = useTheme();
+
+  if (!children) {
+    return null;
+  } else {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn(styles.note, getErrorAndNoteTextClass(size, theme))
+    }, children);
+  }
+};
+
+var Error = function Error(_ref2) {
+  var children = _ref2.children,
+      size = _ref2.size;
+  var theme = useTheme();
+
+  if (!children) {
+    return null;
+  } else {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn(styles.errorMessage, getErrorAndNoteTextClass(size, theme))
+    }, children);
+  }
+};
+
+var Label = function Label(_ref3) {
+  var children = _ref3.children,
+      size = _ref3.size;
+  var textCn = useTextStyles();
+
+  if (!children) {
+    return null;
+  } else {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn(styles.label, textCn(SIZE_TO_TEXT[size]))
+    }, children);
+  }
+};
+
+var FormTriggerWrapper = function FormTriggerWrapper(_ref4) {
+  var size = _ref4.size,
+      themeFromProps = _ref4.theme,
+      className = _ref4.className,
+      error = _ref4.error,
+      label = _ref4.label,
+      note = _ref4.note,
+      children = _ref4.children;
+  var theme = useTheme(themeFromProps);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn(className, SIZE_STYLES[size]),
+    "data-test": "select-wrapper"
+  }, /*#__PURE__*/React.createElement(Label, {
+    size: size
+  }, label), children, /*#__PURE__*/React.createElement(Error, {
+    size: size
+  }, error), /*#__PURE__*/React.createElement(Note, {
+    size: size
+  }, note)));
+};
+
+export default FormTriggerWrapper;

package/lib/parts/form-trigger.module.pcss.js

@@ -0,0 +1,9 @@
+var styles = {
+  "errorMessage": "_errorMessage_8huogz_3",
+  "sizeL": "_sizeL_8huogz_7",
+  "label": "_label_8huogz_8",
+  "note": "_note_8huogz_11",
+  "sizeM": "_sizeM_8huogz_16",
+  "sizeS": "_sizeS_8huogz_25"
+};
+export default styles;

package/lib/parts/multiselect.d.ts

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Theme } from '@rescui/ui-contexts';
+import { SelectOptionOrGroup, SelectOption, SelectSize, SelectMode, NoOptionsMessage } from '../types';
+export interface MultiselectProps {
+    /**
+     * Additional class name
+     */
+    className?: string;
+    /**
+     * Array of options
+     */
+    options: SelectOptionOrGroup[];
+    /**
+     * Default value for Multiselect state. `onChange` callback is required.
+     */
+    defaultValue?: SelectOption[];
+    /**
+     * Is Multiselect preserve single string
+     */
+    isSingleLine?: boolean;
+    /**
+     * Is Multiselect supports clear the value
+     */
+    isClearable?: boolean;
+    /**
+     * Is Multiselect has been disabled
+     */
+    isDisabled?: boolean;
+    /**
+     *  Is loader displayed inside select
+     */
+    isLoading?: boolean;
+    /**
+     * Input name attribute
+     */
+    placeholder?: string;
+    /**
+     * Size
+     */
+    size?: SelectSize;
+    /**
+     * Appearance mode
+     */
+    mode?: SelectMode;
+    /**
+     * Appearance theme
+     */
+    theme?: Theme;
+    /**
+     * Value of the select
+     */
+    value?: SelectOption[];
+    /**
+     * Change value callback. `value => ...`
+     */
+    onChange?: (newValue: SelectOption[]) => void;
+    /**
+     * Error state flag or React.ReactNode (use with forms)
+     */
+    error?: boolean | React.ReactNode;
+    /**
+     * Label element upper then Multiselect element (use with forms)
+     */
+    label?: React.ReactNode;
+    /**
+     * Placement of dropdown element
+     */
+    placement?: 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
+    /**
+     * Note element below then Multiselect element (use with forms)
+     */
+    note?: React.ReactNode;
+    id?: string;
+    /**
+     * Text to display when there are no options
+     */
+    noOptionsMessage?: NoOptionsMessage;
+}
+declare const Multiselect: React.FC<MultiselectProps>;
+export default Multiselect;