@rescui/select 0.9.4 → 0.10.0

package/lib/select.js

@@ -1,5 +1,9 @@
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/web.dom-collections.for-each.js";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
@@ -12,43 +16,35 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import "core-js/modules/es.array.join.js";
 import "core-js/modules/es.regexp.constructor.js";
 import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.regexp.to-string.js";
 import "core-js/modules/es.function.name.js";
-import React, { useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
+import cn from 'classnames';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { Dropdown } from '@rescui/dropdown';
 import { Menu, MenuItem, Divider, GroupHeader } from '@rescui/menu';
-import { useTheme } from '@rescui/ui-contexts';
+import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import SelectTrigger from './parts/trigger.js';
 import FormTriggerWrapper from './parts/form-trigger-wrapper.js';
+import { useObservableForceRerender } from './parts/use-observable-force-rerender.js';
 import { optionType, optionsGroupType, noOptionsMessageConfigType } from './common-prop-types.js';
-import { useStrongMemo, getDefaultCursorIndex, isGroupsEmpty, getMovedCursorIndex, shouldOpenSelect, isIndexMatchCursor, reverseTheme, getPlainOptionsFromGroups, getEmptyMessage, withoutGroupsLabel, OptionGroupTypes, getOptionValue, convertToOptionGroupsIfNeeded, escapeRegex, calculateMaxHeight } from './utils.js';
+import { useStrongMemo, getDefaultCursorIndex, isGroupsEmpty, getMovedCursorIndex, shouldOpenSelect, isIndexMatchCursor, withoutGroupsLabel, getPlainOptionsFromGroups, getEmptyMessage, OptionGroupTypes, getOptionValue, convertToOptionGroupsIfNeeded, escapeRegex, calculateMaxHeight } from './utils.js';
 import { ARROW_DOWN, ARROW_UP, ENTER, SPACE, TAB, ESCAPE, BACKSPACE } from './key-codes.js';
 import styles from './parts/common-select.p.module.css.js'; // eslint-disable-next-line complexity
 
 var Option = function Option(_ref) {
-  var groups = _ref.groups,
-      selected = _ref.selected,
+  var selected = _ref.selected,
       cursorIndex = _ref.cursorIndex,
-      size = _ref.size,
       item = _ref.item,
       isLastItem = _ref.isLastItem,
       highlightedItemRef = _ref.highlightedItemRef,
       handleSelectIndex = _ref.handleSelectIndex,
       handleHighlightIndex = _ref.handleHighlightIndex;
-  var marginInPx = withoutGroupsLabel(groups) ? 0 : {
-    l: 12,
-    m: 6,
-    s: 0
-  }[size];
 
   if (item.type === OptionGroupTypes.OPTION) {
     var _context;
@@ -68,18 +64,14 @@ var Option = function Option(_ref) {
       onClick: function onClick() {
         return handleSelectIndex(index);
       },
-      style: {
-        marginBottom: isLastItem ? "".concat(marginInPx, "px") : ''
-      },
+      className: cn(isLastItem && styles.lastOption),
       "data-test": _filterInstanceProperty(_context = ['select-menu-item', isHighlighted && 'select-menu-item-highlighted', isSelected && 'select-menu-item-selected']).call(_context, Boolean).join(' ')
     }, label);
   }
 
   if (item.type === OptionGroupTypes.DIVIDER) {
     return /*#__PURE__*/React.createElement(Divider, {
-      style: {
-        marginTop: "".concat(marginInPx, "px")
-      }
+      className: styles.divider
     });
   }
 
@@ -106,11 +98,21 @@ var getOptionKey = function getOptionKey(item, i) {
   }
 
   return null;
-}; // eslint-disable-next-line complexity
+};
 
+var SIZE_STYLES = {
+  s: styles.sizeS,
+  m: styles.sizeM,
+  l: styles.sizeL
+};
+var MENU_SIZE_STYLES = {
+  s: styles.menuSizeS,
+  m: styles.menuSizeM,
+  l: styles.menuSizeL
+}; // eslint-disable-next-line complexity
 
 var Select = function Select(_ref2) {
-  var _context4;
+  var _context5;
 
   var options = _ref2.options,
       _ref2$size = _ref2.size,
@@ -138,21 +140,26 @@ var Select = function Select(_ref2) {
       boldLabel = _ref2.boldLabel,
       restProps = _objectWithoutProperties(_ref2, _excluded);
 
-  var theme = useTheme(themeFromProps);
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      triggerFormWrapperRef = _useState2[0],
+      setTriggerFormWrapperRef = _useState2[1];
+
+  var theme = useThemeWithUndefined(themeFromProps);
   var dropdownRef = useRef(null);
   var highlightedItemRef = /*#__PURE__*/React.createRef();
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isKeyboardNavigating = _useState2[0],
-      setIsKeyboardNavigating = _useState2[1];
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isKeyboardNavigating = _useState4[0],
+      setIsKeyboardNavigating = _useState4[1];
 
   var skipScrollingRef = useRef(false);
 
-  var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      searchString = _useState4[0],
-      setSearchString = _useState4[1];
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      searchString = _useState6[0],
+      setSearchString = _useState6[1];
 
   var groups = useStrongMemo(function () {
     return convertToOptionGroupsIfNeeded(options);
@@ -175,17 +182,17 @@ var Select = function Select(_ref2) {
     });
   }, [searchString, groups]);
 
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      menuIsOpen = _useState6[0],
-      setMenuIsOpen = _useState6[1];
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      menuIsOpen = _useState8[0],
+      setMenuIsOpen = _useState8[1];
 
-  var _useState7 = useState(function () {
+  var _useState9 = useState(function () {
     return getDefaultCursorIndex(filteredGroups);
   }),
-      _useState8 = _slicedToArray(_useState7, 2),
-      cursorIndex = _useState8[0],
-      setCursorIndex = _useState8[1];
+      _useState10 = _slicedToArray(_useState9, 2),
+      cursorIndex = _useState10[0],
+      setCursorIndex = _useState10[1];
 
   useEffect(function () {
     setCursorIndex(getDefaultCursorIndex(filteredGroups));
@@ -338,8 +345,29 @@ var Select = function Select(_ref2) {
     if (!isIndexMatchCursor(cursorIndex, index)) {
       setCursorIndex(index);
     }
-  }, [cursorIndex]);
-  var maxHeight = calculateMaxHeight(size);
+  }, [cursorIndex]); // We use invisible and "untouchable" dummy element to observe `size` changes from css to trigger force rerenders
+
+  var observableRef = useObservableForceRerender();
+  var sizeFromCss = null;
+
+  if (triggerFormWrapperRef && menuIsOpen) {
+    var _context4;
+
+    // In theory this part of the code might cause issues with SSR.
+    // But in this specific context, because of checking ref "triggerFormWrapperRef",
+    // we are sure that the value will still be "null" on the first render.
+    // Therefore, the first render on the client will be the same as on the server.
+    // Also, there will be no layout shifts on the following renders because
+    // it's a dropdown-content and in most cases it opens only on-demand.
+    // In additional, we use "observable" el to watch size changes between rerenders (@media query case).
+    var triggerFormWrapperStyles = getComputedStyle(triggerFormWrapperRef);
+    var rawSizeFromCss = triggerFormWrapperStyles.getPropertyValue('--_rs-select-size');
+    sizeFromCss = _includesInstanceProperty(_context4 = ['s', 'm', 'l']).call(_context4, rawSizeFromCss) ? rawSizeFromCss : null;
+  }
+
+  var actualSize = sizeFromCss || size;
+  var maxHeight = calculateMaxHeight(actualSize);
+  var withGroupsLabel = !withoutGroupsLabel(filteredGroups);
   return /*#__PURE__*/React.createElement(Dropdown, {
     theme: theme,
     onRequestClose: handleClose,
@@ -355,7 +383,8 @@ var Select = function Select(_ref2) {
     trigger: function trigger(_ref4) {
       var ref = _ref4.ref;
       return /*#__PURE__*/React.createElement(FormTriggerWrapper, {
-        className: className,
+        ref: setTriggerFormWrapperRef,
+        className: cn(className, SIZE_STYLES[size]),
         theme: theme,
         size: size,
         error: restProps.error,
@@ -363,7 +392,10 @@ var Select = function Select(_ref2) {
         note: restProps.note,
         onKeyDown: handleTriggerKeyDown,
         boldLabel: boldLabel
-      }, restProps.name && /*#__PURE__*/React.createElement("input", {
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: observableRef,
+        className: styles.observable
+      }), restProps.name && /*#__PURE__*/React.createElement("input", {
         type: "hidden",
         name: restProps.name,
         value: value && value.value || ''
@@ -390,20 +422,17 @@ var Select = function Select(_ref2) {
     },
     isOpen: menuIsOpen
   }, /*#__PURE__*/React.createElement(Menu, {
-    size: size,
-    theme: mode === 'rock' ? reverseTheme(theme) : theme,
+    size: actualSize,
     disableCursor: isKeyboardNavigating,
-    className: styles.menu,
+    className: cn(styles.menu, withGroupsLabel && styles.withGroupsLabel, MENU_SIZE_STYLES[actualSize]),
     enableKeyboardNavigation: false
-  }, !isEmptyMenu ? _mapInstanceProperty(_context4 = getPlainOptionsFromGroups(filteredGroups)).call(_context4, function (item, i, collection) {
+  }, !isEmptyMenu ? _mapInstanceProperty(_context5 = getPlainOptionsFromGroups(filteredGroups)).call(_context5, function (item, i, collection) {
     return /*#__PURE__*/React.createElement(Option, {
       item: item,
       isLastItem: i === collection.length - 1,
       key: getOptionKey(item, i),
-      groups: filteredGroups,
       selected: value,
       cursorIndex: cursorIndex,
-      size: size,
       highlightedItemRef: highlightedItemRef,
       handleSelectIndex: handleSelectIndex,
       handleHighlightIndex: handleHighlightIndex

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/select",
-  "version": "0.9.4",
+  "version": "0.10.0",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -15,30 +15,30 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.14.0",
-    "@rescui/dropdown": "^0.6.4",
-    "@rescui/icons": "^0.15.3",
-    "@rescui/menu": "^0.9.8",
-    "@rescui/tag": "^0.9.5",
+    "@rescui/dropdown": "^0.7.0",
+    "@rescui/icons": "^0.16.0",
+    "@rescui/menu": "^0.10.0",
+    "@rescui/tag": "^0.10.0",
+    "@rescui/use-resize-observer": "^0.2.0",
     "classnames": "^2.2.6",
     "core-js": "^3.9.1",
     "scroll-into-view-if-needed": "2.2.20"
   },
   "peerDependencies": {
-    "@rescui/ui-contexts": "<1.0.0",
+    "@rescui/ui-contexts": "^0.4.0",
     "prop-types": "^15.7.2",
     "react": ">=16.8.0 <19"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.1.11",
-    "@rescui/postcss-preset-library": "^0.1.1",
-    "@rescui/scripts": "^0.2.3",
-    "@rescui/typography": "^0.15.0",
+    "@rescui/colors": "^0.2.0",
+    "@rescui/scripts": "^0.3.0",
+    "@rescui/typography": "^0.16.0",
     "@rescui/visual-regression": "^0.1.1",
-    "postcss": "^8.3.0",
     "sniffr": "^1.2.0"
   },
   "scripts": {
-    "build": "rescui-scripts build --css-modules"
+    "build": "rescui-scripts build && yarn run build-pcss-api",
+    "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
-  "gitHead": "e21b6f80037993b094ceaff022db6d4cd176a88d"
+  "gitHead": "51da8a7188f4c558c563065a4ff4ef5c8e74994c"
 }