@rescui/select 0.1.1 → 0.2.0

package/lib/utils.js

@@ -1,9 +1,14 @@
 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 _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 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 _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/esm/toConsumableArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -13,6 +18,7 @@ import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.string.replace.js";
 import "core-js/modules/web.dom-collections.for-each.js";
+import { useRef } from 'react';
 import { ARROW_DOWN, ARROW_UP, SPACE, ENTER } from './key-codes.js';
 var DEFAULT_NO_OPTIONS_MESSAGES = {
   noOptions: 'No options',
@@ -99,4 +105,122 @@ var reverseTheme = function reverseTheme(theme) {
   return theme === 'dark' ? 'light' : 'dark';
 };
 
-export { calculateMaxHeight, convertToOptionGroupsIfNeeded, escapeRegex, getEmptyMessage, reverseTheme, shouldOpenSelect };
+function getOptionValue(option) {
+  return typeof option.value === 'string' ? option.value : option.label;
+}
+
+var OptionGroupTypes = {
+  HEADER: 'header',
+  OPTION: 'option',
+  DIVIDER: 'divider'
+};
+
+var getDefaultCursorIndex = function getDefaultCursorIndex(groups) {
+  if (groups.length === 0) {
+    return null;
+  }
+
+  var firstNonEmptyGroupIndex = _findIndexInstanceProperty(groups).call(groups, function (group) {
+    return group.options && group.options.length > 0;
+  });
+
+  if (firstNonEmptyGroupIndex === -1) {
+    return null;
+  }
+
+  return [firstNonEmptyGroupIndex, 0];
+};
+
+function optionsNotEmpty(options) {
+  return options && options.length > 0;
+}
+
+var getPlainOptionsFromGroups = function getPlainOptionsFromGroups(groups) {
+  return groups.reduce( // eslint-disable-next-line no-shadow
+  function (acc, group, i) {
+    var _context, _context2, _context3;
+
+    return _concatInstanceProperty(acc).call(acc, _filterInstanceProperty(_context = _concatInstanceProperty(_context2 = [optionsNotEmpty(group.options) && i !== 0 && !group.label && {
+      type: OptionGroupTypes.DIVIDER
+    }, optionsNotEmpty(group.options) && group.label && {
+      type: OptionGroupTypes.HEADER,
+      label: group.label
+    }]).call(_context2, _toConsumableArray(_mapInstanceProperty(_context3 = group.options).call(_context3, function (option, j) {
+      return _objectSpread(_objectSpread({}, option), {}, {
+        index: [i, j],
+        type: OptionGroupTypes.OPTION
+      });
+    })))).call(_context, function (e) {
+      return e;
+    }));
+  }, []);
+};
+
+function isGroupsEmpty(groups) {
+  return groups.length === 0 || groups.every(function (g) {
+    return !g.options || g.options.length === 0;
+  });
+}
+
+function useStrongMemo(callback, deps) {
+  var prevDeps = useRef([]);
+  var memoResult = useRef(null);
+
+  if (deps.length !== prevDeps.current.length || !prevDeps.current.every(function (dep, i) {
+    return dep === deps[i];
+  })) {
+    prevDeps.current = _toConsumableArray(deps);
+    memoResult.current = callback();
+  }
+
+  return memoResult.current;
+}
+
+function nextIndex(index, isDownDirection) {
+  return isDownDirection ? index + 1 : index - 1;
+}
+
+function isIndexOutOfRange(index, len) {
+  return index < 0 || index >= len;
+} // eslint-disable-next-line complexity
+
+
+function getMovedCursorIndex(groups, currentCursorIndex, isDownDirection) {
+  if (isGroupsEmpty(groups)) return currentCursorIndex;
+
+  var _currentCursorIndex = _slicedToArray(currentCursorIndex, 2),
+      grpIndex = _currentCursorIndex[0],
+      optIndex = _currentCursorIndex[1];
+
+  var optLenByGroup = _mapInstanceProperty(groups).call(groups, function (g) {
+    return g.options ? g.options.length : 0;
+  });
+
+  var newGrpIndex = grpIndex;
+  var newOptIndex = nextIndex(optIndex, isDownDirection);
+
+  while (isIndexOutOfRange(newOptIndex, optLenByGroup[newGrpIndex]) || isIndexOutOfRange(newGrpIndex, groups.length)) {
+    newGrpIndex = nextIndex(newGrpIndex, isDownDirection);
+
+    if (isIndexOutOfRange(newGrpIndex, groups.length)) {
+      newGrpIndex = isDownDirection ? 0 : groups.length - 1;
+    }
+
+    newOptIndex = isDownDirection ? 0 : optLenByGroup[newGrpIndex] - 1;
+  }
+
+  return [newGrpIndex, newOptIndex];
+}
+
+var isIndexMatchCursor = function isIndexMatchCursor(cursorIndex, index) {
+  if (cursorIndex === null) return false;
+  return index[0] === cursorIndex[0] && index[1] === cursorIndex[1];
+};
+
+var withoutGroupsLabel = function withoutGroupsLabel(groups) {
+  return groups.every(function (g) {
+    return !g.label;
+  });
+};
+
+export { OptionGroupTypes, calculateMaxHeight, convertToOptionGroupsIfNeeded, escapeRegex, getDefaultCursorIndex, getEmptyMessage, getMovedCursorIndex, getOptionValue, getPlainOptionsFromGroups, isGroupsEmpty, isIndexMatchCursor, reverseTheme, shouldOpenSelect, useStrongMemo, withoutGroupsLabel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/select",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -16,10 +16,10 @@
   "dependencies": {
     "@babel/runtime-corejs3": "^7.14.0",
     "@juggle/resize-observer": "3.3.0",
-    "@rescui/dropdown": "^0.2.4",
-    "@rescui/icons": "^0.6.1",
-    "@rescui/menu": "^0.4.0",
-    "@rescui/tag": "^0.3.0",
+    "@rescui/dropdown": "^0.2.5",
+    "@rescui/icons": "^0.7.0",
+    "@rescui/menu": "^0.5.0",
+    "@rescui/tag": "^0.3.2",
     "@rescui/typography": "^0.7.0",
     "classnames": "^2.2.6",
     "core-js": "^3.9.1",
@@ -42,5 +42,5 @@
   "scripts": {
     "build": "rescui-scripts build --css-modules"
   },
-  "gitHead": "ed479e17beebb317d22ad5df6c3877886bb0ea01"
+  "gitHead": "dd88e661d9570902b4eed4ffb2b9d164f246c89b"
 }

package/lib/state/multiselect/actions.d.ts

@@ -1,36 +0,0 @@
-import { Index, SelectOption } from '../../types';
-export declare function addSelectedIndex(index: Index): {
-    type: string;
-    index: Index;
-};
-export declare namespace addSelectedIndex {
-    var type: string;
-}
-export declare function removeSelectedIndex(index: Index): {
-    type: string;
-    index: Index;
-};
-export declare namespace removeSelectedIndex {
-    var type: string;
-}
-export declare function setHideSelected(hideSelected: boolean): {
-    type: string;
-    hideSelected: boolean;
-};
-export declare namespace setHideSelected {
-    var type: string;
-}
-export declare function removeSelectedOption(unselectedOption: SelectOption): {
-    type: string;
-    unselectedOption: SelectOption;
-};
-export declare namespace removeSelectedOption {
-    var type: string;
-}
-export declare function setSelectedValue(selected: SelectOption[]): {
-    type: string;
-    selected: SelectOption[];
-};
-export declare namespace setSelectedValue {
-    var type: string;
-}

package/lib/state/multiselect/actions.js

@@ -1,45 +0,0 @@
-function addSelectedIndex(index) {
-  return {
-    type: addSelectedIndex.type,
-    index: index
-  };
-}
-
-addSelectedIndex.type = 'ADD_SELECTED_BY_INDEX';
-
-function removeSelectedIndex(index) {
-  return {
-    type: removeSelectedIndex.type,
-    index: index
-  };
-}
-
-removeSelectedIndex.type = 'REMOVE_SELECTED_BY_INDEX';
-
-function setHideSelected(hideSelected) {
-  return {
-    type: setHideSelected.type,
-    hideSelected: hideSelected
-  };
-}
-
-setHideSelected.type = 'SET_HIDE_SELECTED';
-
-function removeSelectedOption(unselectedOption) {
-  return {
-    type: removeSelectedOption.type,
-    unselectedOption: unselectedOption
-  };
-}
-
-removeSelectedOption.type = 'REMOVE_SELECTED_OPTION';
-
-function setSelectedValue(selected) {
-  return {
-    type: setSelectedValue.type,
-    selected: selected
-  };
-}
-
-setSelectedValue.type = 'SET_SELECTED_VALUE';
-export { addSelectedIndex, removeSelectedIndex, removeSelectedOption, setHideSelected, setSelectedValue };

package/lib/state/multiselect/reducer.d.ts

@@ -1,21 +0,0 @@
-import type { SelectOption, State, Index, Groups, Action } from '../../types';
-export declare function getInitialState(groups: Groups, defaultSelected?: SelectOption[], hideSelected?: boolean): State;
-export declare function multiselectReducer(state: State, action: Action): {
-    cursorIndex: any;
-    groups: Groups;
-    menuIsOpen: boolean;
-    selected: SelectOption | SelectOption[];
-    searchString: string;
-    filteredGroups: Groups;
-    hideSelected?: boolean;
-    groupsWithoutSelected?: Groups;
-} | {
-    selected: any;
-    groups: Groups;
-    menuIsOpen: boolean;
-    searchString: string;
-    filteredGroups: Groups;
-    cursorIndex: Index;
-    hideSelected?: boolean;
-    groupsWithoutSelected?: Groups;
-};

package/lib/state/multiselect/reducer.js

@@ -1,203 +0,0 @@
-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 _toConsumableArray from "@babel/runtime-corejs3/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import "core-js/modules/web.dom-collections.for-each.js";
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-import { baseReducer } from '../select/reducer.js';
-import { setGroups, clearSelectedAndCloseMenu, closeMenu, openMenu } from '../select/actions.js';
-import { getDefaultCursorIndex, getOptionValue } from '../select/selectors.js';
-import { getGroups, isEmpty } from './selectors.js';
-import { setSelectedValue, setHideSelected, removeSelectedOption, removeSelectedIndex, addSelectedIndex } from './actions.js';
-
-function getInitialState(groups) {
-  var defaultSelected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  var hideSelected = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  return {
-    groups: groups,
-    menuIsOpen: false,
-    selected: defaultSelected,
-    searchString: '',
-    filteredGroups: null,
-    cursorIndex: getDefaultCursorIndex(groups),
-    hideSelected: hideSelected,
-    groupsWithoutSelected: groups
-  };
-}
-
-function handleOpenMenu(state) {
-  return _objectSpread(_objectSpread({}, state), {}, {
-    menuIsOpen: true
-  });
-}
-
-function handleCloseMenu(state) {
-  return _objectSpread(_objectSpread({}, state), {}, {
-    menuIsOpen: false
-  });
-}
-
-function clearSelection(state) {
-  var groups = getGroups(state);
-  return {
-    selected: null,
-    cursorIndex: getDefaultCursorIndex(groups),
-    menuIsOpen: false
-  };
-}
-
-function filterSelected(groups, selected) {
-  var selectedValues = {};
-
-  if (selected) {
-    selected.forEach(function (s) {
-      selectedValues[getOptionValue(s)] = true;
-    });
-  }
-
-  return _mapInstanceProperty(groups).call(groups, function (g) {
-    var newOptions = [];
-
-    if (g.options) {
-      var _context;
-
-      newOptions = _filterInstanceProperty(_context = g.options).call(_context, function (opt) {
-        return !selectedValues[getOptionValue(opt)];
-      });
-    }
-
-    return _objectSpread(_objectSpread({}, g), {}, {
-      options: newOptions
-    });
-  });
-}
-
-function addSelectedByIndex(state, index) {
-  var _context2;
-
-  var groups = getGroups(state);
-
-  var _index = _slicedToArray(index, 2),
-      grpIndex = _index[0],
-      optIndex = _index[1];
-
-  var selected = Array.isArray(state.selected) ? state.selected : [state.selected];
-  var selectedOption = groups[grpIndex].options[optIndex];
-  var newSelected = !state.selected ? [selectedOption] : _concatInstanceProperty(_context2 = []).call(_context2, _toConsumableArray(selected), [selectedOption]);
-  return {
-    selected: newSelected,
-    menuIsOpen: false,
-    searchString: '',
-    groupsWithoutSelected: filterSelected(state.groups, newSelected)
-  };
-}
-
-function removeSelected(state, option) {
-  var selected = Array.isArray(state.selected) ? state.selected : [state.selected];
-
-  var selectedWithoutOne = _filterInstanceProperty(selected).call(selected, function (o) {
-    return getOptionValue(o) !== getOptionValue(option);
-  });
-
-  return {
-    selected: selectedWithoutOne,
-    menuIsOpen: false,
-    searchString: '',
-    groupsWithoutSelected: filterSelected(state.groups, selectedWithoutOne)
-  };
-}
-
-function removeSelectedByIndex(state, index) {
-  var groups = getGroups(state);
-
-  var _index2 = _slicedToArray(index, 2),
-      grpIndex = _index2[0],
-      optIndex = _index2[1];
-
-  var unselectedOption = groups[grpIndex].options[optIndex];
-  return removeSelected(state, unselectedOption);
-}
-
-function handleToggleHideSelected(state, hideSelected) {
-  var result = {
-    hideSelected: hideSelected
-  };
-
-  if (hideSelected) {
-    var selected = Array.isArray(state.selected) ? state.selected : [state.selected];
-    result.groupsWithoutSelected = filterSelected(state.groups, selected);
-  }
-
-  return result;
-}
-
-function setSelectedControllable(state, selected) {
-  var result = {
-    selected: selected
-  };
-
-  if (state.hideSelected) {
-    result.groupsWithoutSelected = filterSelected(state.groups, selected);
-  }
-
-  return result;
-}
-
-function addDefaultCursorPosFromNewState(state) {
-  return _objectSpread(_objectSpread({}, state), {}, {
-    cursorIndex: getDefaultCursorIndex(getGroups(state))
-  });
-} // eslint-disable-next-line complexity
-
-
-function multiselectReducer(state, action) {
-  switch (action.type) {
-    case openMenu.type:
-      return _objectSpread(_objectSpread({}, state), handleOpenMenu(state));
-
-    case closeMenu.type:
-      return _objectSpread(_objectSpread({}, state), handleCloseMenu(state));
-
-    case addSelectedIndex.type:
-      return addDefaultCursorPosFromNewState(_objectSpread(_objectSpread({}, state), addSelectedByIndex(state, action.index)));
-
-    case removeSelectedIndex.type:
-      return addDefaultCursorPosFromNewState(_objectSpread(_objectSpread({}, state), removeSelectedByIndex(state, action.index)));
-
-    case removeSelectedOption.type:
-      return addDefaultCursorPosFromNewState(_objectSpread(_objectSpread({}, state), removeSelected(state, action.unselectedOption)));
-
-    case setHideSelected.type:
-      return addDefaultCursorPosFromNewState(_objectSpread(_objectSpread({}, state), handleToggleHideSelected(state, action.hideSelected)));
-
-    case clearSelectedAndCloseMenu.type:
-      return _objectSpread(_objectSpread(_objectSpread({}, state), clearSelection(state)), {}, {
-        groupsWithoutSelected: state.groups
-      });
-
-    case setGroups.type:
-      var selected = Array.isArray(state.selected) ? state.selected : [state.selected];
-      return _objectSpread({}, getInitialState(action.groups, selected, state.hideSelected));
-
-    case setSelectedValue.type:
-      return addDefaultCursorPosFromNewState(_objectSpread(_objectSpread({}, state), setSelectedControllable(state, action.selected)));
-
-    default:
-      return baseReducer(state, action, {
-        getGroups: getGroups,
-        isEmpty: isEmpty
-      });
-  }
-}
-
-export { getInitialState, multiselectReducer };

package/lib/state/multiselect/selectors.d.ts

@@ -1,6 +0,0 @@
-import { SelectOption, State } from '../../types';
-export declare const getGroups: (state: State) => import("../../types").Groups;
-export declare const isEmpty: (state: State) => boolean;
-export declare const getPlainOptions: (state: State) => any[];
-export declare const isSelected: (state: State, value: string) => boolean;
-export declare const getSelectedArray: (state: State) => SelectOption[];

package/lib/state/multiselect/selectors.js

@@ -1,39 +0,0 @@
-import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
-import { getPlainOptionsFromGroups, getOptionValue } from '../select/selectors.js';
-
-var getGroups = function getGroups(state) {
-  var groups = state.searchString && state.searchString !== '' ? state.filteredGroups : state.groups;
-  return state.hideSelected ? state.groupsWithoutSelected : groups;
-};
-
-var isEmpty = function isEmpty(state) {
-  var groups = getGroups(state);
-  return groups.length === 0 || groups.every(function (g) {
-    return g.options.length === 0;
-  });
-};
-
-var getPlainOptions = function getPlainOptions(state) {
-  return getPlainOptionsFromGroups(getGroups(state));
-};
-
-var isSelected = function isSelected(state, value) {
-  if (!state.selected) {
-    return false;
-  }
-
-  var selected = Array.isArray(state.selected) ? state.selected : [state.selected];
-  return Boolean(_findInstanceProperty(selected).call(selected, function (o) {
-    return getOptionValue(o) === value;
-  }));
-};
-
-var getSelectedArray = function getSelectedArray(state) {
-  if (!state.selected) {
-    return [];
-  }
-
-  return Array.isArray(state.selected) ? state.selected : [state.selected];
-};
-
-export { getGroups, getPlainOptions, getSelectedArray, isEmpty, isSelected };

package/lib/state/select/actions.d.ts

@@ -1,81 +0,0 @@
-import { Index, Groups, SelectOption, FilterFn } from '../../types';
-export declare function cursorMovedUp(): {
-    type: string;
-};
-export declare namespace cursorMovedUp {
-    var type: string;
-}
-export declare function cursorMovedDown(): {
-    type: string;
-};
-export declare namespace cursorMovedDown {
-    var type: string;
-}
-export declare function setCursorIndex(cursorIndex: Index): {
-    type: string;
-    cursorIndex: Index;
-};
-export declare namespace setCursorIndex {
-    var type: string;
-}
-export declare function setGroups(groups: Groups): {
-    type: string;
-    groups: Groups;
-};
-export declare namespace setGroups {
-    var type: string;
-}
-export declare function setSelectedValue(selected: SelectOption): {
-    type: string;
-    selected: SelectOption;
-};
-export declare namespace setSelectedValue {
-    var type: string;
-}
-export declare function setSelectedIndex(index: Index): {
-    type: string;
-    index: Index;
-};
-export declare namespace setSelectedIndex {
-    var type: string;
-}
-export declare function addSelectedIndex(index: Index): {
-    type: string;
-    index: Index;
-};
-export declare namespace addSelectedIndex {
-    var type: string;
-}
-export declare function removeSelectedIndex(index: Index): {
-    type: string;
-    index: Index;
-};
-export declare namespace removeSelectedIndex {
-    var type: string;
-}
-export declare function clearSelectedAndCloseMenu(): {
-    type: string;
-};
-export declare namespace clearSelectedAndCloseMenu {
-    var type: string;
-}
-export declare function setSearchString(searchString: string, filterFn?: FilterFn): {
-    type: string;
-    searchString: string;
-    filterFn: FilterFn;
-};
-export declare namespace setSearchString {
-    var type: string;
-}
-export declare function openMenu(): {
-    type: string;
-};
-export declare namespace openMenu {
-    var type: string;
-}
-export declare function closeMenu(): {
-    type: string;
-};
-export declare namespace closeMenu {
-    var type: string;
-}