@xqmsg/ui-core 0.25.0 → 0.26.0

package/dist/components/input/components/token/index.d.ts

@@ -6,6 +6,7 @@ export interface TokenProps {
     truncateLength?: number;
     showClose?: boolean;
     maxWidth?: string | number;
+    isSelected?: boolean;
 }
 declare const Token: React.FC<TokenProps>;
 export default Token;

package/dist/ui-core.cjs.development.js

@@ -1273,9 +1273,12 @@ var Close = function Close(_ref) {
   return /*#__PURE__*/React__default.createElement(Memo$7, {
     width: boxSize,
     height: boxSize,
-    flexBasis: boxSize,
     onClick: onClick,
-    cursor: "pointer"
+    cursor: "pointer",
+    style: {
+      flexBasis: boxSize,
+      cursor: 'pointer'
+    }
   });
 };
 
@@ -1290,36 +1293,53 @@ var Token = function Token(_ref) {
     _ref$showClose = _ref.showClose,
     showClose = _ref$showClose === void 0 ? true : _ref$showClose,
     _ref$maxWidth = _ref.maxWidth,
-    maxWidth = _ref$maxWidth === void 0 ? 'auto' : _ref$maxWidth;
+    maxWidth = _ref$maxWidth === void 0 ? 'auto' : _ref$maxWidth,
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected;
+  // in pixels
+  var closeBoxSize = isMobile ? 20 : 15;
+  var closeBoxGap = isMobile ? 4 : 2;
+  var closeBoxPadding = closeBoxSize + closeBoxGap;
   return /*#__PURE__*/React__default.createElement(react.Flex, {
     key: label,
-    borderRadius: 'full',
+    borderRadius: 'md',
     backgroundColor: "#7676801F",
     alignItems: "center",
     width: "fit-content",
     w: "auto",
     maxWidth: maxWidth,
-    h: isMobile ? '18px' : '16px',
-    pl: "6px",
-    pr: "2px",
+    h: '18px',
+    px: "4px",
     py: "2px",
-    position: "relative"
+    pr: showClose ? closeBoxPadding : '4px',
+    position: "relative",
+    cursor: "default"
   }, /*#__PURE__*/React__default.createElement(react.Text, {
     whiteSpace: "nowrap",
     wordBreak: "break-word",
     color: colors.label.primary.light,
     fontSize: isMobile ? '17px' : '13px',
-    pr: "4px",
+    lineHeight: "1.5",
+    pr: "2px",
     maxWidth: maxWidth,
     overflow: "hidden",
     textOverflow: "ellipsis"
   }, lodash.truncate(label.trim(), {
     length: truncateLength,
     omission: '...'
-  })), showClose && /*#__PURE__*/React__default.createElement(Close, {
-    boxSize: isMobile ? '17px' : '11px',
+  })), showClose && /*#__PURE__*/React__default.createElement(react.Flex, {
+    height: "100%",
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    right: 0,
+    justifyContent: "center",
+    alignItems: "center",
+    cursor: isSelected ? 'default' : 'pointer'
+  }, /*#__PURE__*/React__default.createElement(Close, {
+    boxSize: closeBoxSize + "px",
     onClick: onDelete
-  }));
+  })));
 };
 
 /**
@@ -1699,18 +1719,50 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
         shouldDirty: true
       });
     }
-    if (!localValue.trim().length && lastestFormValueToArray.length) {
-      if (e.key === 'Backspace' && tokenIndex !== null) {
-        setLocalValue(lastestFormValueToArray[tokenIndex].substring(0, lastestFormValueToArray[tokenIndex].length));
-        var _filteredUniqueValues2 = Array.from(new Set([].concat(lastestFormValueToArray).filter(function (value) {
-          return value !== lastestFormValueToArray[tokenIndex];
+    if (e.key === 'Backspace') {
+      // If input is empty and there are tokens
+      if (!localValue.length && lastestFormValueToArray.length) {
+        // If a token is selected, move it to input
+        if (tokenIndex !== null) {
+          setLocalValue(lastestFormValueToArray[tokenIndex].substring(0, lastestFormValueToArray[tokenIndex].length));
+          var _filteredUniqueValues2 = Array.from(new Set([].concat(lastestFormValueToArray).filter(function (value) {
+            return value !== lastestFormValueToArray[tokenIndex];
+          })));
+          setValue(name, _filteredUniqueValues2.toString(), {
+            shouldValidate: true,
+            shouldDirty: true
+          });
+          return setTokenIndex(null);
+        } else {
+          // No token selected, move last token to input
+          var lastToken = lastestFormValueToArray[lastestFormValueToArray.length - 1];
+          setLocalValue(lastToken);
+          var _filteredUniqueValues3 = lastestFormValueToArray.slice(0, -1);
+          setValue(name, _filteredUniqueValues3.toString(), {
+            shouldValidate: true,
+            shouldDirty: true
+          });
+          e.preventDefault();
+          return;
+        }
+      }
+    }
+    if (e.key === 'Delete') {
+      // If a token is selected, remove it completely
+      if (tokenIndex !== null && lastestFormValueToArray.length) {
+        var _filteredUniqueValues4 = Array.from(new Set([].concat(lastestFormValueToArray).filter(function (_, index) {
+          return index !== tokenIndex;
         })));
-        setValue(name, _filteredUniqueValues2.toString(), {
+        setValue(name, _filteredUniqueValues4.toString(), {
           shouldValidate: true,
           shouldDirty: true
         });
-        return setTokenIndex(null);
+        setTokenIndex(null);
+        e.preventDefault();
+        return;
       }
+    }
+    if (!localValue.trim().length && lastestFormValueToArray.length) {
       if (e.key === 'ArrowLeft') {
         if (tokenIndex === 0) return;
         if (!tokenIndex) {
@@ -1796,6 +1848,8 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     onClick: function onClick() {
       if (isFocussed && tokenIndex !== null) {
         setTokenIndex(null);
+      } else if (!scrollMode) {
+        setIsFocussed(true);
       }
       if (!disabled) {
         var _inputRef$current;
@@ -1813,7 +1867,8 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     overflowX: scrollMode ? 'scroll' : 'hidden',
     flexWrap: scrollMode ? 'nowrap' : 'wrap',
     overflowY: "hidden",
-    maxWidth: isFocussed ? '80%' : '100%',
+    width: scrollMode ? 'auto' : '100%',
+    maxWidth: isFocussed && scrollMode ? '80%' : '100%',
     style: {
       scrollbarWidth: 'none' /* Firefox */,
       msOverflowStyle: 'none'
@@ -1824,24 +1879,30 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       }
     },
     ref: scrollRef,
-    zIndex: 99,
     onKeyDown: onHandleKeyDown
   }, lastestFormValueToArray.length ? lastestFormValueToArray.map(function (label, index) {
     return /*#__PURE__*/React__default.createElement(react.Box, {
       key: index,
-      mr: "4px",
+      mr: "2px",
       border: tokenIndex === index ? "1px solid " + colors.border.focus : 'none',
-      borderRadius: "full",
-      onClick: function onClick() {
-        return setTokenIndex(index);
+      borderRadius: "md",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        // Don't change selection if clicking on already selected token
+        if (tokenIndex === index) {
+          return;
+        }
+        setTokenIndex(index);
       },
       width: scrollMode ? '100%' : 'auto',
       maxWidth: '100%',
-      id: name + "_token_" + index
+      id: name + "_token_" + index,
+      cursor: "default"
     }, /*#__PURE__*/React__default.createElement(Token, {
       maxWidth: '100%',
       label: label,
-      showClose: !isFocussed || tokenIndex === index,
+      showClose: true,
+      isSelected: tokenIndex === index,
       onDelete: function onDelete(e) {
         e.stopPropagation();
         e.preventDefault();
@@ -1852,10 +1913,11 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     }));
   }) : null, !lastestFormValueToArray.length && !isFocussed ? /*#__PURE__*/React__default.createElement(react.Text, {
     color: colors.label.secondary.light,
-    fontSize: isMobile ? '17px' : '13px'
-  }, placeholder) : null), !disabled && /*#__PURE__*/React__default.createElement(react.Flex, {
+    fontSize: isMobile ? '17px' : '13px',
+    pointerEvents: "none"
+  }, placeholder) : null, !disabled && !scrollMode && /*#__PURE__*/React__default.createElement(react.Flex, {
     flex: 1,
-    minWidth: isFocussed && !tokenIndex ? '20%' : 0
+    minWidth: isFocussed && !tokenIndex ? 'auto' : '100px'
   }, /*#__PURE__*/React__default.createElement(react.Input, {
     onKeyDown: onHandleKeyDown,
     type: "text",
@@ -1874,9 +1936,33 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     onFocus: function onFocus() {
       return setIsFocussed(true);
     },
-    onBlur: function onBlur() {
-      setIsFocussed(false);
-      return setTokenIndex(null);
+    fontSize: isMobile ? '17px' : '13px',
+    lineHeight: 1.5,
+    placeholder: isMobile && label && lastestFormValueToArray.length === 0 ? label : '',
+    variant: variant,
+    style: isMobile ? {
+      border: 'none'
+    } : undefined
+  }))), !disabled && scrollMode && /*#__PURE__*/React__default.createElement(react.Flex, {
+    flex: 1,
+    minWidth: isFocussed && !tokenIndex ? '20%' : 0
+  }, /*#__PURE__*/React__default.createElement(react.Input, {
+    onKeyDown: onHandleKeyDown,
+    type: "text",
+    padding: 0,
+    alignContent: "flex-start",
+    "float": "right",
+    border: "none",
+    height: "auto",
+    color: tokenIndex !== null ? 'transparent' : colors.label.primary,
+    _focus: {
+      boxShadow: 'none !important'
+    },
+    value: localValue,
+    onChange: handleOnChange,
+    ref: inputRef,
+    onFocus: function onFocus() {
+      return setIsFocussed(true);
     },
     placeholder: isMobile && label && lastestFormValueToArray.length === 0 ? label : '',
     variant: variant,