@xqmsg/ui-core 0.24.11 → 0.25.1

package/dist/components/SimpleTable/SimpleTable.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ReadonlyTableColumns, TableBody, TableColumns, TableHeaders } from './TableTypes';
+import { ReadonlyTableColumns, TableBody, TableColumns, TableColumnsWidths, TableHeaders } from './TableTypes';
 export interface SimpleTableProps<T extends ReadonlyTableColumns> {
     columns: TableColumns;
     headers?: TableHeaders<T>;
@@ -7,8 +7,10 @@ export interface SimpleTableProps<T extends ReadonlyTableColumns> {
     loading?: boolean;
     loadMore?: () => void;
     placeholder?: string;
+    layout?: 'fixed' | 'auto';
+    columnsWidths?: TableColumnsWidths<T>;
 }
 /**
  * A React component utilized to render the `Table` component
  */
-export declare function SimpleTable<T extends ReadonlyTableColumns>({ columns, headers, body, loading, loadMore, }: SimpleTableProps<T>): React.JSX.Element;
+export declare function SimpleTable<T extends ReadonlyTableColumns>({ columns, headers, body, loading, loadMore, layout, columnsWidths, }: SimpleTableProps<T>): React.JSX.Element;

package/dist/components/SimpleTable/TableTypes.d.ts

@@ -4,6 +4,9 @@ export declare type ReadonlyTableColumns = Readonly<TableColumns>;
 export declare type TableHeaders<K extends ReadonlyTableColumns> = {
     [k in K[number]]: ReactNode;
 };
+export declare type TableColumnsWidths<K extends ReadonlyTableColumns> = {
+    [k in K[number]]: string | number;
+};
 export declare type TableRow<K extends ReadonlyTableColumns> = {
     [k in K[number]]: ReactNode;
 };

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

@@ -10,6 +10,7 @@ export interface StackedPilledInputProps extends InputFieldProps {
     variant?: string;
     label?: string;
     truncatePillLength?: number;
+    mode?: 'scroll' | 'wrap';
 }
 /**
  * A functional React component utilized to render the `StackedPilledInput` component.

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

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

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

@@ -27,9 +27,10 @@ export interface InputProps<T extends FieldValues = FieldValues> extends Validat
     loadingOptions?: boolean;
     truncatePillLength?: number;
     searchable?: boolean;
+    overflowMode?: 'scroll' | 'wrap';
 }
 /**
  * A functional React component utilized to render the `Input` component. Utilizes a switch statement
  * to render the correct input based on the `inputType`.
  */
-export declare function Input<T extends FieldValues>({ inputType, label, ariaLabel, className, placeholder, name, helperText, options, tooltipText, isInvalid, errorText, isRequired, maxLength, defaultValue, fullOptions, control, disabled, rightElement, leftElement, variant, onChange, setValue, setError, clearErrors, separators, loadingOptions, truncatePillLength, searchable, }: InputProps<T>): React.JSX.Element;
+export declare function Input<T extends FieldValues>({ inputType, label, ariaLabel, className, placeholder, name, helperText, options, tooltipText, isInvalid, errorText, isRequired, maxLength, defaultValue, fullOptions, control, disabled, rightElement, leftElement, variant, onChange, setValue, setError, clearErrors, separators, loadingOptions, truncatePillLength, searchable, overflowMode, }: InputProps<T>): React.JSX.Element;

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

@@ -1274,7 +1274,11 @@ var Close = function Close(_ref) {
     width: boxSize,
     height: boxSize,
     onClick: onClick,
-    cursor: "pointer"
+    cursor: "pointer",
+    style: {
+      flexBasis: boxSize,
+      cursor: 'pointer'
+    }
   });
 };
 
@@ -1285,31 +1289,57 @@ var Token = function Token(_ref) {
     _ref$isMobile = _ref.isMobile,
     isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile,
     _ref$truncateLength = _ref.truncateLength,
-    truncateLength = _ref$truncateLength === void 0 ? 15 : _ref$truncateLength;
+    truncateLength = _ref$truncateLength === void 0 ? 15 : _ref$truncateLength,
+    _ref$showClose = _ref.showClose,
+    showClose = _ref$showClose === void 0 ? true : _ref$showClose,
+    _ref$maxWidth = _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",
-    h: isMobile ? '18px' : '16px',
-    pl: "6px",
-    pr: "2px",
+    maxWidth: maxWidth,
+    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: isMobile ? '17px' : '13px',
+    pr: "2px",
+    maxWidth: maxWidth,
+    overflow: "hidden",
+    textOverflow: "ellipsis"
   }, lodash.truncate(label.trim(), {
     length: truncateLength,
     omission: '...'
-  })), /*#__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
-  }));
+  })));
 };
 
 /**
@@ -1620,7 +1650,9 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     separators = _ref2$separators === void 0 ? ['Enter', ' ', ',', ';', 'Tab'] : _ref2$separators,
     variant = _ref2.variant,
     label = _ref2.label,
-    truncatePillLength = _ref2.truncatePillLength;
+    truncatePillLength = _ref2.truncatePillLength,
+    _ref2$mode = _ref2.mode,
+    mode = _ref2$mode === void 0 ? 'scroll' : _ref2$mode;
   var watchedValue = reactHookForm.useWatch({
     control: control,
     name: name
@@ -1641,6 +1673,7 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     localValue = _useState4[0],
     setLocalValue = _useState4[1];
   var latestTokenElement = document.getElementById(name + "_token_" + (lastestFormValueToArray.length - 1));
+  var scrollMode = mode === 'scroll';
   // gets latest watched form value (common delimited) from RHF state and creates a list
   React.useEffect(function () {
     if (watchedValue !== undefined && !watchedValue.length) {
@@ -1686,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) {
@@ -1792,11 +1857,13 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     bg: disabled ? colors.fill.light.quaternary : '#ffffff',
     cursor: disabled ? 'not-allowed' : 'pointer',
     ref: inputWrapperRef,
-    h: isMobile ? '48px' : '26px'
+    h: isMobile ? '48px' : scrollMode ? '26px' : 'auto',
+    minH: isMobile ? '48px' : '26px'
   }, /*#__PURE__*/React__default.createElement(react.Flex, {
     h: "100%",
     alignItems: "center",
-    overflowX: "scroll",
+    overflowX: scrollMode ? 'scroll' : 'hidden',
+    flexWrap: scrollMode ? 'nowrap' : 'wrap',
     overflowY: "hidden",
     maxWidth: isFocussed ? '80%' : '100%',
     style: {
@@ -1809,21 +1876,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: "100%",
-      id: name + "_token_" + index
+      width: scrollMode ? '100%' : 'auto',
+      maxWidth: '100%',
+      id: name + "_token_" + index,
+      cursor: "default"
     }, /*#__PURE__*/React__default.createElement(Token, {
+      maxWidth: '100%',
       label: label,
+      showClose: true,
+      isSelected: tokenIndex === index,
       onDelete: function onDelete(e) {
         e.stopPropagation();
         e.preventDefault();
@@ -1834,7 +1910,8 @@ 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'
+    fontSize: isMobile ? '17px' : '13px',
+    pointerEvents: "none"
   }, placeholder) : null), !disabled && /*#__PURE__*/React__default.createElement(react.Flex, {
     flex: 1,
     minWidth: isFocussed && !tokenIndex ? '20%' : 0
@@ -1856,10 +1933,6 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     onFocus: function onFocus() {
       return setIsFocussed(true);
     },
-    onBlur: function onBlur() {
-      setIsFocussed(false);
-      return setTokenIndex(null);
-    },
     placeholder: isMobile && label && lastestFormValueToArray.length === 0 ? label : '',
     variant: variant,
     style: isMobile ? {
@@ -1951,7 +2024,9 @@ function Input(_ref) {
     _ref$loadingOptions = _ref.loadingOptions,
     loadingOptions = _ref$loadingOptions === void 0 ? false : _ref$loadingOptions,
     truncatePillLength = _ref.truncatePillLength,
-    searchable = _ref.searchable;
+    searchable = _ref.searchable,
+    _ref$overflowMode = _ref.overflowMode,
+    overflowMode = _ref$overflowMode === void 0 ? 'scroll' : _ref$overflowMode;
   function selectedInputField(onChange, onBlur, ref, value) {
     switch (inputType) {
       case 'text':
@@ -2082,7 +2157,8 @@ function Input(_ref) {
           variant: variant,
           label: label,
           separators: separators,
-          truncatePillLength: truncatePillLength
+          truncatePillLength: truncatePillLength,
+          mode: overflowMode
         });
       case 'switch':
         return /*#__PURE__*/React__default.createElement(StackedSwitch, {
@@ -3588,7 +3664,10 @@ function SimpleTable(_ref) {
     headers = _ref.headers,
     body = _ref.body,
     loading = _ref.loading,
-    loadMore = _ref.loadMore;
+    loadMore = _ref.loadMore,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? 'auto' : _ref$layout,
+    columnsWidths = _ref.columnsWidths;
   var columnsAsConst = generateTableColumnsAsConst(columns);
   return /*#__PURE__*/React__default.createElement(react.TableContainer, {
     border: "none",
@@ -3600,20 +3679,18 @@ function SimpleTable(_ref) {
     width: "100%",
     style: {
       borderCollapse: 'separate',
-      borderSpacing: '0px'
+      borderSpacing: '0px',
+      tableLayout: layout
     }
-  }, headers && /*#__PURE__*/React__default.createElement(react.Thead, null, /*#__PURE__*/React__default.createElement(react.Tr, {
+  }, (headers || columnsWidths) && /*#__PURE__*/React__default.createElement(react.Thead, null, /*#__PURE__*/React__default.createElement(react.Tr, {
     _odd: {
       bg: colors.label.primary.dark
     }
   }, columnsAsConst.map(function (column, idx) {
-    return (
-      /*#__PURE__*/
-      // @ts-ignore
-      React__default.createElement(react.Th, {
-        key: idx
-      }, headers[column])
-    );
+    return /*#__PURE__*/React__default.createElement(react.Th, {
+      key: idx,
+      width: columnsWidths == null ? void 0 : columnsWidths[column]
+    }, headers && headers[column]);
   }))), /*#__PURE__*/React__default.createElement(react.Tbody, null, body.map(function (row, idx) {
     return /*#__PURE__*/React__default.createElement(react.Tr, {
       key: idx