@dspworkplace/ui 2.1.4 → 2.1.5

package/dist/index.js

@@ -4868,7 +4868,7 @@ function _templateObject11() {
 }
 
 function _templateObject10() {
-  var data = taggedTemplateLiteral(["\n    height: 24px;\n    width: 24px;\n    box-sizing: border-box;\n    margin-right: 5px;\n    border-radius: 100%;\n    border: 2px solid white;\n    background: ", "\n    z-index: ", ";\n    margin-left: ", "\n    margin-top: 8px;\n    margin-bottom: 8px;\n    display: inline-block;\n"]);
+  var data = taggedTemplateLiteral(["\n    height: 16px;\n    width: 16px;\n    box-sizing: border-box;\n    border-radius: 100%;\n    border: 2px solid white;\n    background: ", ";\n    z-index: ", ";\n    margin-left: ", "\n    margin-right: 8px;\n    margin-top: 8px;\n    margin-bottom: 8px;\n    display: inline-block;\n"]);
 
   _templateObject10 = function _templateObject10() {
     return data;
@@ -5054,6 +5054,12 @@ var isOption = function isOption(item) {
   return item.value !== undefined && item.value !== null;
 };
 
+var scrollIntoView = function scrollIntoView(element) {
+  return element && element.scrollIntoView({
+    block: 'nearest'
+  });
+};
+
 var flattenOptions = function flattenOptions(options) {
   var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   return (options || []).reduce(function (rows, item) {
@@ -5070,6 +5076,23 @@ var optionText = function optionText(node) {
   if (typeof node === 'string' || typeof node === 'number') return node.toString();
   if (Array.isArray(node)) return node.map(optionText).join('');
   return node.props ? optionText(node.props.children) : '';
+};
+
+var matchOptions = function matchOptions(items, text) {
+  if (!text) return items;
+  var query = text.toLowerCase();
+  return items.map(function (item) {
+    return {
+      item: item,
+      at: optionText(item.name).toLowerCase().indexOf(query)
+    };
+  }).filter(function (match) {
+    return match.at >= 0;
+  }).sort(function (a, b) {
+    return (a.at > 0) - (b.at > 0);
+  }).map(function (match) {
+    return match.item;
+  });
 }; // rendered in document.body so overflow on any ancestor cannot clip it; popper flips and shifts it to stay in the viewport
 // eslint-disable-next-line react/prop-types
 
@@ -5154,20 +5177,12 @@ var AutocompleteSelect = function AutocompleteSelect(_ref5) {
   }).map(function (row) {
     return row.item;
   });
-
-  var filterItems = function filterItems(text) {
-    return text ? selectable.filter(function (item) {
-      return optionText(item.name).toLowerCase().startsWith(text.toLowerCase());
-    }) : selectable;
-  };
-
-  var items = filterItems(search);
+  var items = matchOptions(selectable, search);
   var hasSelection = selectedOpt.value.length > 0;
   var selectedText = optionText(selectedOpt.desc);
   var selectedItem = selectable.find(function (item) {
     return item.value.toString() === selectedOpt.value;
   });
-  var selectedColors = !search && selectedItem && selectedItem.color ? [selectedItem.color] : [];
 
   var _useCombobox = reactAutocomplete.useCombobox({
     items: items,
@@ -5193,10 +5208,14 @@ var AutocompleteSelect = function AutocompleteSelect(_ref5) {
     feature: reactAutocomplete.supercomplete({
       onRequestItem: function onRequestItem(_ref6, res) {
         var value = _ref6.value;
-        var matches = filterItems(value);
-        if (matches.length > 0) res({
+
+        var _matchOptions = matchOptions(selectable, value),
+            _matchOptions2 = slicedToArray(_matchOptions, 1),
+            first = _matchOptions2[0];
+
+        if (first && optionText(first.name).toLowerCase().startsWith(value.toLowerCase())) res({
           index: 0,
-          item: matches[0]
+          item: first
         });
       },
       select: true,
@@ -5214,17 +5233,23 @@ var AutocompleteSelect = function AutocompleteSelect(_ref5) {
   React.useEffect(function () {
     if (startOpen) setOpen(true);
   }, []);
+  var inputProps = getInputProps();
+  var shownText = inputProps.value.toLowerCase();
+  var shownItem = shownText ? [items[focusIndex]].concat(toConsumableArray(selectable)).find(function (item) {
+    return item && optionText(item.name).toLowerCase() === shownText;
+  }) : selectedItem;
+  var swatchColors = shownItem && shownItem.color ? [shownItem.color] : [];
   var index = -1;
   return /*#__PURE__*/React__default.createElement(SelectUi$1, _extends_1({
     ref: setAnchor,
     className: [open && 'open', error && 'error', valid && 'valid'].filter(Boolean).join(' ')
   }, props, {
     title: selectedText
-  }), renderSwatches(selectedColors), /*#__PURE__*/React__default.createElement(SearchInput, _extends_1({
+  }), renderSwatches(swatchColors), /*#__PURE__*/React__default.createElement(SearchInput, _extends_1({
     placeholder: hasSelection ? selectedText : placeholder,
     hasSelection: hasSelection,
-    hasSwatch: selectedColors.length > 0
-  }, getInputProps())), /*#__PURE__*/React__default.createElement(ToggleButton, getToggleProps(), open ? /*#__PURE__*/React__default.createElement(Icons.ArrowUp, {
+    hasSwatch: swatchColors.length > 0
+  }, inputProps)), /*#__PURE__*/React__default.createElement(ToggleButton, getToggleProps(), open ? /*#__PURE__*/React__default.createElement(Icons.ArrowUp, {
     size: "15px",
     color: theme.colors.info.border
   }) : /*#__PURE__*/React__default.createElement(Icons.ArrowDown, {
@@ -5262,7 +5287,8 @@ var AutocompleteSelect = function AutocompleteSelect(_ref5) {
       className: item.divider ? 'alone' : '',
       style: {
         paddingLeft: 8 + depth * 16,
-        background: focusIndex === index ? theme.colors.info.bg : undefined
+        // overrides li:hover, so a resting mouse does not keep a second row lit
+        background: focusIndex === index ? theme.colors.info.bg : 'transparent'
       }
     }, getItemProps({
       item: item,
@@ -5308,22 +5334,30 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref8) {
       open = _useState10[0],
       setOpen = _useState10[1];
 
-  var _useState11 = React.useState(null),
+  var _useState11 = React.useState(-1),
       _useState12 = slicedToArray(_useState11, 2),
-      anchor = _useState12[0],
-      setAnchor = _useState12[1];
+      focusIndex = _useState12[0],
+      setFocusIndex = _useState12[1];
+
+  var _useState13 = React.useState(null),
+      _useState14 = slicedToArray(_useState13, 2),
+      anchor = _useState14[0],
+      setAnchor = _useState14[1];
 
   var nodeRef = React.useRef();
   var listRef = React.useRef();
   var setNode = React.useCallback(mergeRefs([nodeRef, setAnchor]), []);
+
+  var close = function close() {
+    setOpen(false);
+    setSearch('');
+    setFocusIndex(-1);
+  };
+
   React.useEffect(function () {
     var closeOnOutsideClick = function closeOnOutsideClick(e) {
       var inList = listRef.current && listRef.current.contains(e.target);
-
-      if (nodeRef.current && !nodeRef.current.contains(e.target) && !inList) {
-        setOpen(false);
-        setSearch('');
-      }
+      if (nodeRef.current && !nodeRef.current.contains(e.target) && !inList) close();
     };
 
     document.addEventListener('mousedown', closeOnOutsideClick);
@@ -5337,9 +5371,7 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref8) {
   }).map(function (row) {
     return row.item;
   });
-  var items = search ? selectable.filter(function (item) {
-    return optionText(item.name).toLowerCase().startsWith(search.toLowerCase());
-  }) : selectable;
+  var items = matchOptions(selectable, search);
   var selectedItems = selectable.filter(function (item) {
     return selectedValues.includes(item.value.toString());
   });
@@ -5351,6 +5383,7 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref8) {
   }).map(function (item) {
     return item.color;
   });
+  var index = -1;
   return /*#__PURE__*/React__default.createElement(SelectUi$1, _extends_1({
     ref: setNode,
     className: [open && 'open', error && 'error', valid && 'valid'].filter(Boolean).join(' ')
@@ -5368,11 +5401,29 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref8) {
     onChange: function onChange(e) {
       setSearch(e.target.value);
       setOpen(true);
+      setFocusIndex(-1);
     },
     onKeyDown: function onKeyDown(e) {
-      if (e.key === 'Escape') {
-        setOpen(false);
-        setSearch('');
+      switch (e.key) {
+        case 'ArrowDown':
+        case 'ArrowUp':
+          {
+            e.preventDefault();
+            var last = items.length - 1;
+            if (!open) setOpen(true);else if (e.key === 'ArrowDown') setFocusIndex(focusIndex >= last ? 0 : focusIndex + 1);else setFocusIndex(focusIndex <= 0 ? last : focusIndex - 1);
+            break;
+          }
+
+        case 'Enter':
+          if (open && items[focusIndex]) {
+            e.preventDefault();
+            onToggle(items[focusIndex]);
+          }
+
+          break;
+
+        case 'Escape':
+          close();
       }
     }
   }), /*#__PURE__*/React__default.createElement(ToggleButton, {
@@ -5380,7 +5431,9 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref8) {
     tabIndex: -1,
     onClick: function onClick(e) {
       e.stopPropagation();
-      if (!props.disabled) setOpen(!open);
+      if (props.disabled) return;
+      setOpen(!open);
+      setFocusIndex(-1);
     }
   }, open ? /*#__PURE__*/React__default.createElement(Icons.ArrowUp, {
     size: "15px",
@@ -5415,11 +5468,18 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref8) {
       }, item.name);
     }
 
+    var itemIndex = ++index;
     return /*#__PURE__*/React__default.createElement("li", {
       key: key,
+      ref: itemIndex === focusIndex ? scrollIntoView : undefined,
       style: {
         paddingLeft: 8 + depth * 16,
-        justifyContent: 'flex-start'
+        justifyContent: 'flex-start',
+        // overrides li:hover, so a resting mouse does not keep a second row lit
+        background: itemIndex === focusIndex ? theme.colors.info.bg : 'transparent'
+      },
+      onPointerMove: function onPointerMove() {
+        return setFocusIndex(itemIndex);
       },
       onMouseDown: function onMouseDown(e) {
         return e.preventDefault();
@@ -5458,10 +5518,10 @@ var MultiDropdown = /*#__PURE__*/React.forwardRef(function (_ref10, ref) {
       resetCallback = _ref10.resetCallback,
       props = objectWithoutProperties(_ref10, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen", "resetCallback"]);
 
-  var _useState13 = React.useState([]),
-      _useState14 = slicedToArray(_useState13, 2),
-      selectedValues = _useState14[0],
-      setSelectedValues = _useState14[1];
+  var _useState15 = React.useState([]),
+      _useState16 = slicedToArray(_useState15, 2),
+      selectedValues = _useState16[0],
+      setSelectedValues = _useState16[1];
 
   var valueRef = React.useRef();
   var selectable = flattenOptions(options).filter(function (row) {
@@ -5569,10 +5629,10 @@ var SingleDropdown = /*#__PURE__*/React.forwardRef(function (_ref11, ref) {
     desc: ''
   };
 
-  var _useState15 = React.useState(defaultSelected),
-      _useState16 = slicedToArray(_useState15, 2),
-      selectedOpt = _useState16[0],
-      setSelected = _useState16[1];
+  var _useState17 = React.useState(defaultSelected),
+      _useState18 = slicedToArray(_useState17, 2),
+      selectedOpt = _useState18[0],
+      setSelected = _useState18[1];
 
   var valueRef = React.useRef();
 
@@ -5764,15 +5824,15 @@ var CustomDropdown = /*#__PURE__*/React.forwardRef(function (_ref14, ref) {
       openTo = _ref14.openTo,
       props = objectWithoutProperties(_ref14, ["name", "label", "help", "error", "valid", "options", "placeholder", "defaultValue", "multiple", "type", "tooltip", "onChange", "visibleOptionsQty", "openTo"]);
 
-  var _useState17 = React.useState(false),
-      _useState18 = slicedToArray(_useState17, 2),
-      open = _useState18[0],
-      setOpen = _useState18[1];
-
-  var _useState19 = React.useState([]),
+  var _useState19 = React.useState(false),
       _useState20 = slicedToArray(_useState19, 2),
-      selectedOpt = _useState20[0],
-      setSelected = _useState20[1];
+      open = _useState20[0],
+      setOpen = _useState20[1];
+
+  var _useState21 = React.useState([]),
+      _useState22 = slicedToArray(_useState21, 2),
+      selectedOpt = _useState22[0],
+      setSelected = _useState22[1];
 
   var nodeSelect = React.useRef();
   var valueRef = React.useRef();