@banyan_cloud/roots 2.0.42 → 2.0.43

package/dist/esm/index.js

@@ -4156,7 +4156,7 @@ var BaseButton = /*#__PURE__*/forwardRef(function (props, ref) {
         if (blurOnClick) {
           event.currentTarget.blur();
         }
-        _onClick === null || _onClick === void 0 || _onClick(event);
+        void (_onClick === null || _onClick === void 0 ? void 0 : _onClick(event));
       }
     },
     RootDOM: 'button'
@@ -5232,34 +5232,38 @@ var Chevron = function Chevron(props) {
 };
 
 var Clock = function Clock(_ref) {
-  var className = _ref.className;
-  return /*#__PURE__*/jsxs("svg", {
+  var className = _ref.className,
+    width = _ref.width,
+    height = _ref.height;
+  return jsxs("svg", {
     className: className,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [/*#__PURE__*/jsxs("g", {
-      clipPath: "url(#clip0_5056_4832)",
-      children: [/*#__PURE__*/jsx("path", {
-        d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z",
-        stroke: "#333333",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }), /*#__PURE__*/jsx("path", {
-        d: "M12 7V12L15 15",
-        stroke: "#333333",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
+    width: width,
+    height: height,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+    children: [jsxs("g", {
+      clipPath: 'url(#clip0_5056_4832)',
+      children: [jsx("path", {
+        d: 'M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z',
+        stroke: '#333333',
+        strokeWidth: '2',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round'
+      }), jsx("path", {
+        d: 'M12 7V12L15 15',
+        stroke: '#333333',
+        strokeWidth: '2',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round'
       })]
-    }), /*#__PURE__*/jsx("defs", {
-      children: /*#__PURE__*/jsx("clipPath", {
-        id: "clip0_5056_4832",
-        children: /*#__PURE__*/jsx("rect", {
-          width: "24",
-          height: "24",
-          fill: "white"
+    }), jsx("defs", {
+      children: jsx("clipPath", {
+        id: 'clip0_5056_4832',
+        children: jsx("rect", {
+          width: '24',
+          height: '24',
+          fill: 'white'
         })
       })
     })]
@@ -5957,7 +5961,7 @@ var Tick = function Tick(props) {
   return jsxs("svg", {
     className: className,
     viewBox: '0 0 13 12',
-    fill: '#0F62FE',
+    fill: 'green',
     xmlns: 'http://www.w3.org/2000/svg',
     children: [jsx("g", {
       clipPath: 'url(#clip0_638_154)',
@@ -10360,7 +10364,10 @@ var Popper = function Popper(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$transparent = _ref.transparent,
-    transparent = _ref$transparent === void 0 ? true : _ref$transparent;
+    transparent = _ref$transparent === void 0 ? true : _ref$transparent,
+    lockScroll = _ref.lockScroll,
+    _ref$withOverlay = _ref.withOverlay,
+    withOverlay = _ref$withOverlay === void 0 ? true : _ref$withOverlay;
   var id = useId$1();
   var portalId = "".concat(wrapperId).concat(id);
   useEffect(function () {
@@ -10371,14 +10378,18 @@ var Popper = function Popper(_ref) {
       }
     };
   }, [portalId]);
+  var resolvedLock = lockScroll !== null && lockScroll !== void 0 ? lockScroll : withOverlay;
   return jsx(FloatingPortal, {
     id: portalId,
     children: jsx(AnimatePresence, {
-      children: open && jsx(FloatingOverlay, {
-        lockScroll: true,
+      children: open && (withOverlay ? jsx(FloatingOverlay, {
+        lockScroll: resolvedLock,
         className: classes(modules_fe46b225.backdrop, transparent ? modules_fe46b225.transparent : '', backdrop ? '' : modules_fe46b225['hide-backdrop'], className),
         children: children
-      })
+      }) : jsx("div", {
+        className: className,
+        children: children
+      }))
     })
   });
 };
@@ -10463,8 +10474,7 @@ var Alert = function Alert(_ref, ref) {
     switch (type) {
       case 'info':
         Icon = jsx(AlertIcon.Info, {
-          className: modules_3a764ea3.icon,
-          v2: true
+          className: modules_3a764ea3.icon
         });
         break;
       case 'error':
@@ -10474,20 +10484,17 @@ var Alert = function Alert(_ref, ref) {
         break;
       case 'warning':
         Icon = jsx(AlertIcon.Warning, {
-          className: modules_3a764ea3.icon,
-          v2: true
+          className: modules_3a764ea3.icon
         });
         break;
       case 'success':
         Icon = jsx(AlertIcon.Success, {
-          className: modules_3a764ea3.icon,
-          v2: true
+          className: modules_3a764ea3.icon
         });
         break;
       case 'danger':
         Icon = jsx(AlertIcon.Danger, {
-          className: modules_3a764ea3.icon,
-          v2: true
+          className: modules_3a764ea3.icon
         });
         break;
       default:
@@ -10549,7 +10556,8 @@ var Alert = function Alert(_ref, ref) {
   return jsx(Popper, {
     open: open,
     className: modules_3a764ea3.popper,
-    id: 'alert-popper',
+    wrapperId: 'alert-popper',
+    lockScroll: false,
     children: jsxs("div", _objectSpread2(_objectSpread2({}, getFloatingProps({
       ref: floating,
       className: classes(modules_3a764ea3.root, modules_3a764ea3[type], shadow ? modules_3a764ea3.shadow : '', modules_3a764ea3["position-".concat(position)], className)
@@ -10607,7 +10615,6 @@ var resolveOffset = function resolveOffset(user) {
   }, user);
 };
 var Popover = function Popover(_ref) {
-  var _middlewareOptions$fl;
   var children = _ref.children,
     anchorEl = _ref.anchorEl,
     open = _ref.open,
@@ -10615,20 +10622,24 @@ var Popover = function Popover(_ref) {
     className = _ref.className,
     _ref$transparent = _ref.transparent,
     transparent = _ref$transparent === void 0 ? true : _ref$transparent,
-    _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+    onClose = _ref.onClose,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? 'light' : _ref$theme,
-    middlewareOptions = _ref.middlewareOptions;
+    middlewareOptions = _ref.middlewareOptions,
+    lockScroll = _ref.lockScroll,
+    _ref$withOverlay = _ref.withOverlay,
+    withOverlay = _ref$withOverlay === void 0 ? true : _ref$withOverlay;
   var offsetArg = resolveOffset(middlewareOptions === null || middlewareOptions === void 0 ? void 0 : middlewareOptions.offset);
   var flipArg = _objectSpread2({
     padding: 8
-  }, (_middlewareOptions$fl = middlewareOptions === null || middlewareOptions === void 0 ? void 0 : middlewareOptions.flip) !== null && _middlewareOptions$fl !== void 0 ? _middlewareOptions$fl : {});
-  var _useFloating = useFloating({
-      open: open,
-      onOpenChange: setOpen,
+  }, middlewareOptions !== null && middlewareOptions !== void 0 && middlewareOptions.flip && _typeof$1(middlewareOptions.flip) === 'object' ? _objectSpread2({}, middlewareOptions.flip) : {});
+  var _useFloating = useFloating(_objectSpread2(_objectSpread2(_objectSpread2({}, open && {
+      open: open
+    }), setOpen && {
+      onOpenChange: setOpen
+    }), {}, {
       placement: placement,
       whileElementsMounted: autoUpdate,
       middleware: [offset(offsetArg), shift(middlewareOptions === null || middlewareOptions === void 0 ? void 0 : middlewareOptions.shift), flip(flipArg), size({
@@ -10637,14 +10648,14 @@ var Popover = function Popover(_ref) {
             availableHeight = _ref2.availableHeight,
             elements = _ref2.elements;
           Object.assign(elements.floating.style, {
-            width: "".concat(rects.reference.width, "px"),
+            width: "".concat(rects.reference.width.toString(), "px"),
             minWidth: 'fit-content',
-            maxHeight: "".concat(availableHeight, "px")
+            maxHeight: "".concat(availableHeight.toString(), "px")
           });
         },
         padding: 8
       })]
-    }),
+    })),
     x = _useFloating.x,
     y = _useFloating.y,
     reference = _useFloating.reference,
@@ -10654,7 +10665,7 @@ var Popover = function Popover(_ref) {
   var _useInteractions = useInteractions([useDismiss(context)]),
     getFloatingProps = _useInteractions.getFloatingProps;
   useEffect(function () {
-    if (!open) onClose();
+    if (!open) onClose === null || onClose === void 0 || onClose();
   }, [open, onClose]);
   useLayoutEffect(function () {
     reference(anchorEl);
@@ -10663,6 +10674,8 @@ var Popover = function Popover(_ref) {
     open: open,
     wrapperId: 'popover',
     transparent: transparent,
+    lockScroll: lockScroll,
+    withOverlay: withOverlay,
     children: jsx("div", _objectSpread2(_objectSpread2({}, getFloatingProps({
       ref: floating,
       style: {
@@ -10795,32 +10808,27 @@ var Callout = /*#__PURE__*/forwardRef(function (props, ref) {
     switch (type) {
       case 'info':
         Icon = jsx(AlertIcon.Info, {
-          className: modules_b6de2704.icon,
-          v2: true
+          className: modules_b6de2704.icon
         });
         break;
       case 'error':
         Icon = jsx(AlertIcon.Error, {
-          className: modules_b6de2704.icon,
-          v2: true
+          className: modules_b6de2704.icon
         });
         break;
       case 'warning':
         Icon = jsx(AlertIcon.Warning, {
-          className: modules_b6de2704.icon,
-          v2: true
+          className: modules_b6de2704.icon
         });
         break;
       case 'success':
         Icon = jsx(AlertIcon.Success, {
-          className: modules_b6de2704.icon,
-          v2: true
+          className: modules_b6de2704.icon
         });
         break;
       case 'danger':
         Icon = jsx(AlertIcon.Danger, {
-          className: modules_b6de2704.icon,
-          v2: true
+          className: modules_b6de2704.icon
         });
         break;
       default:
@@ -15674,104 +15682,108 @@ var BasePieChart = function BasePieChart(props) {
   });
 };
 
-var css$O = ".CodeSnippet_module_root__898176fc {\n  padding: 0.5rem, 1rem;\n  position: relative;\n}\n.CodeSnippet_module_root__898176fc .CodeSnippet_module_code__898176fc {\n  font-family: monospace;\n  font-size: 1rem;\n}\n.CodeSnippet_module_root__898176fc .CodeSnippet_module_copy__898176fc {\n  visibility: hidden;\n  position: absolute;\n}\n.CodeSnippet_module_root__898176fc:hover .CodeSnippet_module_copy__898176fc {\n  visibility: visible;\n  position: absolute;\n  right: 1rem;\n  top: 0.5rem;\n  cursor: pointer;\n}\n.CodeSnippet_module_root__898176fc:hover .CodeSnippet_module_copy__898176fc .CodeSnippet_module_icon__898176fc {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--text-color);\n}";
-var modules_c548043f = {"root":"CodeSnippet_module_root__898176fc","code":"CodeSnippet_module_code__898176fc","copy":"CodeSnippet_module_copy__898176fc","icon":"CodeSnippet_module_icon__898176fc"};
+var css$O = ".CodeSnippet_module_root__292230a0 {\n  padding: 0.5rem, 1rem;\n  position: relative;\n}\n.CodeSnippet_module_root__292230a0 .CodeSnippet_module_code__292230a0 {\n  font-family: monospace;\n  font-size: 1rem;\n}\n.CodeSnippet_module_root__292230a0 .CodeSnippet_module_copy__292230a0 {\n  visibility: hidden;\n  position: absolute;\n  padding: 0 !important;\n  width: 2.25rem;\n  height: 2.25rem;\n  right: 1rem;\n  top: 1rem;\n  background-color: transparent !important;\n}\n.CodeSnippet_module_root__292230a0 .CodeSnippet_module_copy__292230a0 [data-elem=title] {\n  box-shadow: 0px 0px 0.125rem 0px rgba(0, 0, 0, 0.35);\n  border-radius: 0.25rem;\n  padding: 0.35rem;\n}\n.CodeSnippet_module_root__292230a0 .CodeSnippet_module_copy__292230a0 [data-elem=title] > span {\n  display: inline-flex;\n}\n.CodeSnippet_module_root__292230a0:hover .CodeSnippet_module_copy__292230a0 {\n  visibility: visible;\n  position: absolute;\n  right: 1rem;\n  top: 1rem;\n}\n.CodeSnippet_module_root__292230a0:hover .CodeSnippet_module_copy__292230a0 .CodeSnippet_module_icon__292230a0 {\n  width: 1.25rem;\n  height: 1.25rem;\n  fill: rgba(0, 0, 0, 0.75);\n}\n\n.CodeSnippet_module_tick__292230a0 {\n  width: 1.25rem;\n  height: 1.25rem;\n}";
+var modules_c548043f = {"root":"CodeSnippet_module_root__292230a0","code":"CodeSnippet_module_code__292230a0","copy":"CodeSnippet_module_copy__292230a0","icon":"CodeSnippet_module_icon__292230a0","tick":"CodeSnippet_module_tick__292230a0"};
 n(css$O,{});
 
+var MotionSpan = motion.span;
+var copyIconProps = {
+  initial: {
+    opacity: 0,
+    y: 5
+  },
+  animate: {
+    opacity: 1,
+    y: 0
+  },
+  exit: {
+    opacity: 0,
+    y: -5
+  },
+  transition: {
+    duration: 0.2
+  }
+};
+var tickIconProps = {
+  initial: {
+    scale: 0,
+    opacity: 0
+  },
+  animate: {
+    scale: 1.2,
+    opacity: 1
+  },
+  exit: {
+    scale: 0,
+    opacity: 0
+  },
+  transition: {
+    type: 'spring',
+    stiffness: 400,
+    damping: 15
+  }
+};
+var CopyButton = function CopyButton(_ref) {
+  var code = _ref.code;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    copied = _useState2[0],
+    setCopied = _useState2[1];
+  var onCopy = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            setCopied(true);
+            _context.n = 1;
+            return navigator.clipboard.writeText(code);
+          case 1:
+            setTimeout(function () {
+              setCopied(false);
+            }, 1000);
+          case 2:
+            return _context.a(2);
+        }
+      }, _callee);
+    }));
+    return function onCopy() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return jsx(Button, {
+    title: jsx(AnimatePresence, {
+      mode: 'popLayout',
+      initial: false,
+      children: !copied ? jsx(MotionSpan, _objectSpread2(_objectSpread2({
+        title: 'Copy'
+      }, copyIconProps), {}, {
+        children: jsx(Copy, {
+          className: modules_c548043f.icon
+        })
+      }), 'copy') : jsx(MotionSpan, _objectSpread2(_objectSpread2({}, tickIconProps), {}, {
+        className: 'flex items-center',
+        children: jsx(Tick, {
+          className: modules_c548043f.tick
+        })
+      }), 'tick')
+    }),
+    className: modules_c548043f.copy,
+    onClick: onCopy
+  });
+};
 var CodeSnippet = function CodeSnippet(props) {
-  var copy = props.copy,
+  var _props$copy = props.copy,
+    copy = _props$copy === void 0 ? false : _props$copy,
     _props$code = props.code,
     code = _props$code === void 0 ? '{}' : _props$code,
     _props$language = props.language,
     language = _props$language === void 0 ? 'json' : _props$language,
-    showLineNumbers = props.showLineNumbers,
+    _props$showLineNumber = props.showLineNumbers,
+    showLineNumbers = _props$showLineNumber === void 0 ? false : _props$showLineNumber,
     _props$theme = props.theme,
     theme = _props$theme === void 0 ? 'light' : _props$theme,
     _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    _props$onClick = props.onClick,
-    _onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
-    parentKeyToSelect = props.parentKeyToSelect;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    parentNode = _useState2[0],
-    setParentNode = _useState2[1];
-  var alertRef = useRef(Alert$1);
-  var onCopy = function onCopy() {
-    var _alertRef$current;
-    navigator.clipboard.writeText(code);
-    (_alertRef$current = alertRef.current) === null || _alertRef$current === void 0 || _alertRef$current.alert({
-      title: "".concat(language === null || language === void 0 ? void 0 : language.toUpperCase()),
-      description: 'The code has been copied to the clipboard',
-      type: 'info',
-      icon: function icon(args) {
-        return /*#__PURE__*/jsx(Copy, _objectSpread2({}, args));
-      }
-    });
-  };
-  function findKeyPath(obj, targetKey) {
-    var currentPath = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-    var keys = Object.keys(obj);
-    // eslint-disable-next-line no-restricted-syntax
-    for (var _i = 0, _keys = keys; _i < _keys.length; _i++) {
-      var key = _keys[_i];
-      var newPath = currentPath ? "".concat(currentPath, "/").concat(key) : key;
-      if (key === targetKey) {
-        // Display the full path of the key from the object
-        return newPath;
-      }
-      if (parentKeyToSelect && !currentPath) {
-        var nestedPath = findKeyPath(obj[parentKeyToSelect], targetKey, parentKeyToSelect);
-        if (nestedPath) {
-          return nestedPath;
-        }
-      }
-      if (obj[key] && _typeof$1(obj[key]) === 'object') {
-        // Recursively search nested keys
-        var _nestedPath = findKeyPath(obj[key], targetKey, newPath);
-        if (_nestedPath) {
-          return _nestedPath;
-        }
-      }
-    }
-    return '';
-  }
-  var handleCodeClick = function handleCodeClick(event) {
-    var _event$target$childre;
-    var hasNoChildren = ((_event$target$childre = event.target.children) === null || _event$target$childre === void 0 ? void 0 : _event$target$childre.length) === 0;
-    if (language === 'json' && hasNoChildren) {
-      try {
-        var parsedCode = JSON.parse(code);
-        var clickedKey = event.target.textContent.replace(/"/g, '').trim();
-
-        // Check for a direct match in top-level keys
-        var matchingKey = Object.keys(parsedCode).find(function (key) {
-          return String(parsedCode[key]) === clickedKey;
-        });
-        if (matchingKey) {
-          return matchingKey;
-        }
-        // Check for nested keys
-        var keyPath = findKeyPath(parsedCode, clickedKey);
-        if (keyPath) {
-          event.target.parentNode.style.backgroundColor = theme === 'light' ? '#333' : 'white';
-          if (parentNode) {
-            parentNode.style.backgroundColor = '';
-            if (event.target.parentNode === parentNode) {
-              setParentNode(null);
-              return null;
-            }
-          }
-          setParentNode(event.target.parentNode);
-          return keyPath;
-        }
-        return clickedKey;
-      } catch (error) {
-        return error;
-      }
-    }
-    return null;
-  };
+    className = _props$className === void 0 ? '' : _props$className;
   var syntaxHighlighterProps = {
     showLineNumbers: showLineNumbers,
     language: language,
@@ -15780,38 +15792,17 @@ var CodeSnippet = function CodeSnippet(props) {
     codeTagProps: {
       className: classes(modules_c548043f.code, className)
     },
-    style: theme === 'light' ? coldarkCold : coldarkDark,
-    onClick: function onClick(event) {
-      return _onClick(event, handleCodeClick);
-    }
+    style: theme === 'light' ? coldarkCold : coldarkDark
   };
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs("div", {
-      className: modules_c548043f.root,
-      children: [/*#__PURE__*/jsx(Prism, _objectSpread2(_objectSpread2({}, syntaxHighlighterProps), {}, {
-        children: code
-      })), copy && /*#__PURE__*/jsx("div", {
-        className: modules_c548043f.copy,
-        onClick: onCopy,
-        children: /*#__PURE__*/jsx(Copy, {
-          className: classes(modules_c548043f.icon)
-        })
-      })]
-    }), /*#__PURE__*/jsx(Alert$1, {
-      ref: alertRef
+  return jsxs("div", {
+    className: modules_c548043f.root,
+    children: [jsx(Prism, _objectSpread2(_objectSpread2({}, syntaxHighlighterProps), {}, {
+      children: code
+    })), copy && jsx(CopyButton, {
+      code: code
     })]
   });
 };
-CodeSnippet.propTypes = {
-  copy: propTypesExports.bool,
-  code: propTypesExports.string,
-  language: propTypesExports.string,
-  showLineNumbers: propTypesExports.bool,
-  theme: propTypesExports.string,
-  className: propTypesExports.string,
-  onClick: propTypesExports.func,
-  parentKeyToSelect: propTypesExports.string
-};
 
 var useOutsideClickListener = function useOutsideClickListener(callback, ref) {
   useEffect(function () {
@@ -18212,6 +18203,7 @@ var Tooltip = /*#__PURE__*/forwardRef(function (props, propRef) {
     children: [clonedChildren, jsx(Popper, {
       open: open && content != null,
       backdrop: false,
+      lockScroll: false,
       wrapperId: 'tooltip',
       children: jsxs(motion.div, _objectSpread2(_objectSpread2({}, getFloatingProps({
         ref: floating,
@@ -18278,7 +18270,6 @@ var TextField = /*#__PURE__*/forwardRef(function (props, inputRef) {
     feedback = props.feedback,
     maxLength = props.maxLength,
     onKeyDown = props.onKeyDown,
-    autocomplete = props.autocomplete,
     autocompleteOptions = props.autocompleteOptions;
   var _useRef = useRef(value !== undefined),
     isControlled = _useRef.current;
@@ -18290,21 +18281,17 @@ var TextField = /*#__PURE__*/forwardRef(function (props, inputRef) {
     _useState4 = _slicedToArray(_useState3, 2),
     inputType = _useState4[0],
     setInputType = _useState4[1];
-  var _useState5 = useState(null),
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    anchorEl = _useState6[0],
-    setAnchorEl = _useState6[1];
-  var checkAndOpenAutocomplete = function checkAndOpenAutocomplete(inputString) {
-    if (autocomplete) {
-      var _autocompleteOptions$, _autocompleteOptions$2, _autocompleteOptions$3;
-      var shouldOpen = (_autocompleteOptions$ = autocompleteOptions === null || autocompleteOptions === void 0 || (_autocompleteOptions$2 = autocompleteOptions.predicate) === null || _autocompleteOptions$2 === void 0 ? void 0 : _autocompleteOptions$2.call(autocompleteOptions, inputString)) !== null && _autocompleteOptions$ !== void 0 ? _autocompleteOptions$ : inputString.length > 0;
-      autocompleteOptions === null || autocompleteOptions === void 0 || (_autocompleteOptions$3 = autocompleteOptions.setOpen) === null || _autocompleteOptions$3 === void 0 || _autocompleteOptions$3.call(autocompleteOptions, !!shouldOpen);
-    }
-  };
+    showAutocompleteOptions = _useState6[0],
+    setShowAutocompleteOptions = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    anchorEl = _useState8[0],
+    setAnchorEl = _useState8[1];
   var handleChange = function handleChange(event) {
     var _inputHelper = inputHelper(event),
       fieldValue = _inputHelper.fieldValue;
-    checkAndOpenAutocomplete(fieldValue);
     if (isControlled) {
       onChange === null || onChange === void 0 || onChange(event, fieldValue);
     } else {
@@ -18345,11 +18332,9 @@ var TextField = /*#__PURE__*/forwardRef(function (props, inputRef) {
           type: 'button',
           leftComponent: function leftComponent() {
             return inputType === 'password' ? jsx(HidePassword, {
-              className: classes(modules_c1d23762.icon, feedback !== null && feedback !== void 0 && feedback.error ? modules_c1d23762.error : ''),
-              position: 'left'
+              className: classes(modules_c1d23762.icon, feedback !== null && feedback !== void 0 && feedback.error ? modules_c1d23762.error : '')
             }) : jsx(ViewPasswordIcon, {
-              className: classes(modules_c1d23762.icon, feedback !== null && feedback !== void 0 && feedback.error ? modules_c1d23762.error : ''),
-              position: 'left'
+              className: classes(modules_c1d23762.icon, feedback !== null && feedback !== void 0 && feedback.error ? modules_c1d23762.error : '')
             });
           },
           onClick: function onClick() {
@@ -18388,6 +18373,10 @@ var TextField = /*#__PURE__*/forwardRef(function (props, inputRef) {
     }
     return RightComponent ? jsx(RightComponent, {}) : null;
   };
+  var handleOnBlur = function handleOnBlur() {
+    onBlur === null || onBlur === void 0 || onBlur();
+    setShowAutocompleteOptions(false);
+  };
   var inputValue = isControlled ? String(value !== null && value !== void 0 ? value : '') : uncontrolledValue;
   var commonProps = _objectSpread2({
     id: id,
@@ -18395,10 +18384,10 @@ var TextField = /*#__PURE__*/forwardRef(function (props, inputRef) {
     disabled: disabled,
     placeholder: placeholder,
     onFocus: function onFocus() {
-      checkAndOpenAutocomplete(inputValue);
       _onFocus === null || _onFocus === void 0 || _onFocus();
+      setShowAutocompleteOptions(true);
     },
-    onBlur: onBlur,
+    onBlur: handleOnBlur,
     onKeyDown: onKeyDown,
     required: required,
     'data-elem': 'input',
@@ -18430,12 +18419,13 @@ var TextField = /*#__PURE__*/forwardRef(function (props, inputRef) {
       }, (RightComponent !== null && RightComponent !== void 0 ? RightComponent : type === 'password' || feedback) && {
         component3: getRightComponent()
       }))]
-    }), autocomplete && jsx(Popover, {
+    }), autocompleteOptions && jsx(Popover, {
       anchorEl: anchorEl,
-      open: autocompleteOptions === null || autocompleteOptions === void 0 ? void 0 : autocompleteOptions.open,
-      setOpen: autocompleteOptions === null || autocompleteOptions === void 0 ? void 0 : autocompleteOptions.setOpen,
-      placement: autocompleteOptions === null || autocompleteOptions === void 0 ? void 0 : autocompleteOptions.placement,
-      middlewareOptions: autocompleteOptions === null || autocompleteOptions === void 0 ? void 0 : autocompleteOptions.middlewareOptions,
+      open: showAutocompleteOptions,
+      placement: autocompleteOptions.placement,
+      middlewareOptions: autocompleteOptions.middlewareOptions,
+      withOverlay: false,
+      lockScroll: false,
       children: AutocompletePopover && jsx(AutocompletePopover, {
         name: name,
         value: value
@@ -21583,7 +21573,7 @@ var TableCell = /*#__PURE__*/forwardRef(function (props, ref) {
   var isCentered = (style === null || style === void 0 ? void 0 : style.justifyContent) === 'center';
   return jsx(BaseCell, {
     ref: ref,
-    className: classes(modules_7ba8d001.root, modules_7ba8d001["".concat(type, "-cell")], modules_7ba8d001["sticky-".concat(String(sticky))], sort && modules_7ba8d001.sortable, isCentered && modules_7ba8d001.centered, className),
+    className: classes(modules_7ba8d001.root, modules_7ba8d001["".concat(type, "-cell")], modules_7ba8d001["sticky-".concat(String(sticky))], type === 'header' && sort && modules_7ba8d001.sortable, isCentered && modules_7ba8d001.centered, className),
     attrs: _objectSpread2({
       style: style
     }, attrs),
@@ -21662,9 +21652,14 @@ var TableRow = /*#__PURE__*/forwardRef(function (props, ref) {
     var cellContent = null;
     if (type === 'header') {
       cellContent = item.title;
-    } else {
-      var _datum$item$id;
-      cellContent = (_datum$item$id = datum[item.id]) !== null && _datum$item$id !== void 0 ? _datum$item$id : item.fallbackValue;
+    }
+    if (type === 'body') {
+      if (item.formatter) {
+        cellContent = item.formatter(datum[item.id], _index, datum);
+      } else {
+        var _datum$item$id;
+        cellContent = (_datum$item$id = datum[item.id]) !== null && _datum$item$id !== void 0 ? _datum$item$id : item.fallbackValue;
+      }
     }
     var cellProps = _objectSpread2(_objectSpread2({}, props), item);
     var getCustomCell = customCells === null || customCells === void 0 ? void 0 : customCells[type];