@xqmsg/ui-core 0.24.11 → 0.25.0

package/dist/ui-core.esm.js

@@ -1266,6 +1266,7 @@ var Close = function Close(_ref) {
   return /*#__PURE__*/React__default.createElement(Memo$7, {
     width: boxSize,
     height: boxSize,
+    flexBasis: boxSize,
     onClick: onClick,
     cursor: "pointer"
   });
@@ -1278,7 +1279,11 @@ 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;
   return /*#__PURE__*/React__default.createElement(Flex, {
     key: label,
     borderRadius: 'full',
@@ -1286,6 +1291,7 @@ var Token = function Token(_ref) {
     alignItems: "center",
     width: "fit-content",
     w: "auto",
+    maxWidth: maxWidth,
     h: isMobile ? '18px' : '16px',
     pl: "6px",
     pr: "2px",
@@ -1293,13 +1299,17 @@ var Token = function Token(_ref) {
     position: "relative"
   }, /*#__PURE__*/React__default.createElement(Text$2, {
     whiteSpace: "nowrap",
+    wordBreak: "break-word",
     color: colors.label.primary.light,
     fontSize: isMobile ? '17px' : '13px',
-    pr: "4px"
+    pr: "4px",
+    maxWidth: maxWidth,
+    overflow: "hidden",
+    textOverflow: "ellipsis"
   }, truncate(label.trim(), {
     length: truncateLength,
     omission: '...'
-  })), /*#__PURE__*/React__default.createElement(Close, {
+  })), showClose && /*#__PURE__*/React__default.createElement(Close, {
     boxSize: isMobile ? '17px' : '11px',
     onClick: onDelete
   }));
@@ -1613,7 +1623,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 = useWatch({
     control: control,
     name: name
@@ -1634,6 +1646,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
   useEffect(function () {
     if (watchedValue !== undefined && !watchedValue.length) {
@@ -1785,11 +1798,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(Flex, {
     h: "100%",
     alignItems: "center",
-    overflowX: "scroll",
+    overflowX: scrollMode ? 'scroll' : 'hidden',
+    flexWrap: scrollMode ? 'nowrap' : 'wrap',
     overflowY: "hidden",
     maxWidth: isFocussed ? '80%' : '100%',
     style: {
@@ -1813,10 +1828,13 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       onClick: function onClick() {
         return setTokenIndex(index);
       },
-      width: "100%",
+      width: scrollMode ? '100%' : 'auto',
+      maxWidth: '100%',
       id: name + "_token_" + index
     }, /*#__PURE__*/React__default.createElement(Token, {
+      maxWidth: '100%',
       label: label,
+      showClose: !isFocussed || tokenIndex === index,
       onDelete: function onDelete(e) {
         e.stopPropagation();
         e.preventDefault();
@@ -1944,7 +1962,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':
@@ -2075,7 +2095,8 @@ function Input(_ref) {
           variant: variant,
           label: label,
           separators: separators,
-          truncatePillLength: truncatePillLength
+          truncatePillLength: truncatePillLength,
+          mode: overflowMode
         });
       case 'switch':
         return /*#__PURE__*/React__default.createElement(StackedSwitch, {
@@ -3581,7 +3602,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(TableContainer, {
     border: "none",
@@ -3593,20 +3617,18 @@ function SimpleTable(_ref) {
     width: "100%",
     style: {
       borderCollapse: 'separate',
-      borderSpacing: '0px'
+      borderSpacing: '0px',
+      tableLayout: layout
     }
-  }, headers && /*#__PURE__*/React__default.createElement(Thead, null, /*#__PURE__*/React__default.createElement(Tr, {
+  }, (headers || columnsWidths) && /*#__PURE__*/React__default.createElement(Thead, null, /*#__PURE__*/React__default.createElement(Tr, {
     _odd: {
       bg: colors.label.primary.dark
     }
   }, columnsAsConst.map(function (column, idx) {
-    return (
-      /*#__PURE__*/
-      // @ts-ignore
-      React__default.createElement(Th, {
-        key: idx
-      }, headers[column])
-    );
+    return /*#__PURE__*/React__default.createElement(Th, {
+      key: idx,
+      width: columnsWidths == null ? void 0 : columnsWidths[column]
+    }, headers && headers[column]);
   }))), /*#__PURE__*/React__default.createElement(Tbody, null, body.map(function (row, idx) {
     return /*#__PURE__*/React__default.createElement(Tr, {
       key: idx