@economic/taco 2.45.0-alpha.5 → 2.45.0-alpha.8

package/dist/taco.cjs.development.js

@@ -59,6 +59,8 @@ const getColorByState = state => {
       return 'yellow';
     case 'error':
       return 'red';
+    case 'experiment':
+      return 'purple';
     case 'success':
       return 'green';
     default:
@@ -391,6 +393,36 @@ function IconAttach(props, svgRef) {
 }
 var Attach = /*#__PURE__*/React.forwardRef(IconAttach);
 
+function IconAutopayPaused(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.356 2.503a.743.743 0 10.449 1.417 9.323 9.323 0 011.909-.391 8.998 8.998 0 011.883.013.743.743 0 10.168-1.476 10.484 10.484 0 00-2.195-.016 10.81 10.81 0 00-2.214.453zM7.46 5.037a.743.743 0 10-.817-1.241c-.628.413-1.215.893-1.747 1.433-.52.528-.978 1.103-1.366 1.712a.743.743 0 101.253.798 8.928 8.928 0 011.17-1.467A9.28 9.28 0 017.46 5.037zm9.14-2.22a.743.743 0 00-.59 1.363 7.904 7.904 0 011.611.935c.484.363.914.776 1.287 1.229a.743.743 0 001.147-.945 9.004 9.004 0 00-1.54-1.472 9.387 9.387 0 00-1.915-1.11zM3.767 10.008a.743.743 0 10-1.432-.396A9.316 9.316 0 002 11.795a.743.743 0 101.485.048 7.83 7.83 0 01.282-1.835zm17.716-2.152a.743.743 0 10-1.389.529c.21.549.353 1.126.425 1.723a.743.743 0 101.476-.18 8.81 8.81 0 00-.512-2.072zm-9.28-.732c-.26 0-.527.127-.527.505v.406c-1.567.145-2.577 1.085-2.577 2.426 0 1.125.639 1.862 1.907 2.182l1.296.285c.836.18 1.167.435 1.167.87 0 .558-.441.923-1.26.923-.586 0-1.154-.244-1.67-.714-.332-.278-.54-.36-.796-.36-.412 0-.743.256-.743.709 0 .348.186.684.51.98.482.447 1.26.72 2.143.796v.354c0 .371.272.505.533.505.262 0 .529-.134.529-.505v-.366c1.625-.191 2.64-1.143 2.64-2.519 0-1.133-.652-1.845-1.978-2.156l-1.3-.27c-.738-.145-1.075-.424-1.075-.859 0-.488.436-.876 1.12-.876.581 0 .999.185 1.492.655.29.25.528.36.842.36.366 0 .667-.267.667-.65 0-.325-.174-.667-.499-.975-.43-.418-1.12-.685-1.892-.783v-.418c0-.372-.267-.505-.528-.505zm8.802 8.025a.743.743 0 00-.946.457 7.718 7.718 0 01-2.763 3.704 8.23 8.23 0 01-4.48 1.548 8.628 8.628 0 01-4.69-1.152c-.906-.524-1.649-1.03-2.262-1.749l.79.276a.743.743 0 10.49-1.404l-2.732-.952a.743.743 0 00-.946.458l-.997 2.86a.743.743 0 101.403.49l.45-1.294c.84 1.193 1.88 1.918 3.06 2.601a10.114 10.114 0 005.5 1.35 9.715 9.715 0 005.287-1.83 9.204 9.204 0 003.293-4.417.743.743 0 00-.457-.946z",
+    fill: "currentColor"
+  }));
+}
+var AutopayPaused = /*#__PURE__*/React.forwardRef(IconAutopayPaused);
+
+function IconAutopay(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M1.367 6.142a.734.734 0 011.003.269l.83 1.438a9.885 9.885 0 017.774-5.769 9.993 9.993 0 015.73.975 10.135 10.135 0 014.249 4.002.734.734 0 01-1.272.734 8.667 8.667 0 00-3.633-3.422 8.525 8.525 0 00-4.888-.832 8.417 8.417 0 00-6.355 4.376l.749-.433a.734.734 0 01.734 1.271l-2.56 1.479a.734.734 0 01-1.004-.269L1.098 7.145a.734.734 0 01.27-1.003zm2.895 10.273a.734.734 0 011.003.269 7.627 7.627 0 003.384 3.09 8.195 8.195 0 004.668.668 8.64 8.64 0 004.376-2.005c.792-.684 1.427-1.318 1.895-2.138l-.731.422a.734.734 0 01-.734-1.27l2.495-1.442a.734.734 0 011.003.27l1.501 2.6a.734.734 0 01-1.271.734l-.683-1.183c-.6 1.326-1.485 2.229-2.516 3.118a10.107 10.107 0 01-5.122 2.346 9.664 9.664 0 01-5.504-.79 9.095 9.095 0 01-4.032-3.686.734.734 0 01.268-1.003zm7.382-8.75c0-.372.264-.498.522-.498s.521.132.521.499v.413c.763.097 1.446.361 1.87.774.321.304.493.642.493.963 0 .379-.298.643-.66.643-.309 0-.544-.11-.83-.356-.488-.464-.901-.648-1.475-.648-.676 0-1.107.384-1.107.866 0 .43.333.706 1.062.849l1.285.267c1.31.307 1.955 1.01 1.955 2.13 0 1.36-1.004 2.3-2.61 2.489v.361c0 .367-.264.5-.522.5s-.527-.133-.527-.5v-.35c-.872-.074-1.64-.344-2.116-.785-.322-.293-.505-.625-.505-.97 0-.447.327-.7.734-.7.252 0 .459.081.786.357.51.464 1.072.705 1.651.705.809 0 1.245-.361 1.245-.912 0-.43-.327-.682-1.153-.86l-1.281-.282c-1.253-.316-1.885-1.044-1.885-2.155 0-1.325.998-2.254 2.547-2.398v-.401z",
+    fill: "currentColor"
+  }));
+}
+var Autopay = /*#__PURE__*/React.forwardRef(IconAutopay);
+
 function IconAutotextInsert(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1585,6 +1617,22 @@ function IconExpenses(props, svgRef) {
 }
 var Expenses = /*#__PURE__*/React.forwardRef(IconExpenses);
 
+function IconExperiment(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.962 9.26V5.313h2.843V9.28c0 .376.796 1.24 1.049 1.511L14.5 12.5c-.507.218-3.166-1.19-4.341-.211C7.159 14.789 6 13 6.5 12c.316-.632 2.462-1.803 2.462-2.74zm.24-4.469a.762.762 0 00-.752.772v3.696a.61.61 0 01-.177.43l-2.592 2.6c-.911.913-.281 2.502.992 2.502h7.154c1.25 0 1.89-1.538 1.027-2.466l-2.446-2.63a.61.61 0 01-.162-.415V5.563a.762.762 0 00-.752-.772H9.202z",
+    fill: "currentColor",
+    stroke: "currentColor"
+  }));
+}
+var Experiment = /*#__PURE__*/React.forwardRef(IconExperiment);
+
 function IconExportToExcel(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2626,6 +2674,21 @@ function IconPersonPlus(props, svgRef) {
 }
 var PersonPlus = /*#__PURE__*/React.forwardRef(IconPersonPlus);
 
+function IconPersonSolid(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 11.5c4.553 0 7.21 2.43 7.969 7.29.24 1.537-.928 2.962-2.608 3.182-.144.018-.29.028-.435.028H7.074C5.376 22 4 20.74 4 19.187c0-.133.01-.266.03-.398C4.79 13.93 7.448 11.5 12 11.5zM12 2c2.112 0 3.825 1.903 3.825 4.25S14.112 10.5 12 10.5c-2.113 0-3.825-1.903-3.825-4.25S9.887 2 12 2z",
+    fill: "currentColor"
+  }));
+}
+var PersonSolid = /*#__PURE__*/React.forwardRef(IconPersonSolid);
+
 function IconPersonTick(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2639,6 +2702,21 @@ function IconPersonTick(props, svgRef) {
 }
 var PersonTick = /*#__PURE__*/React.forwardRef(IconPersonTick);
 
+function IconPerson(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 11.5c4.553 0 7.21 2.43 7.969 7.29.24 1.537-.928 2.962-2.608 3.182-.144.018-.29.028-.435.028H7.074C5.376 22 4 20.74 4 19.187c0-.133.01-.266.03-.398C4.79 13.93 7.448 11.5 12 11.5zm0 1.5c-3.684 0-5.696 1.84-6.346 6.002-.01.061-.015.123-.015.186 0 .68.565 1.238 1.288 1.305l.147.007h9.852c.068 0 .136-.004.203-.013.784-.103 1.329-.768 1.217-1.485C17.696 14.84 15.684 13 12 13zm0-11c2.112 0 3.825 1.903 3.825 4.25S14.112 10.5 12 10.5c-2.113 0-3.825-1.903-3.825-4.25S9.887 2 12 2zm0 1.5c-1.13 0-2.186 1.174-2.186 2.75S10.87 9 12 9s2.186-1.174 2.186-2.75S13.129 3.5 12 3.5z",
+    fill: "currentColor"
+  }));
+}
+var Person = /*#__PURE__*/React.forwardRef(IconPerson);
+
 function IconPhoneSolid(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
@@ -3408,6 +3486,21 @@ function IconUnreconciled(props, svgRef) {
 }
 var Unreconciled = /*#__PURE__*/React.forwardRef(IconUnreconciled);
 
+function IconWallet(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.75 4.5h14.5a.25.25 0 01.25.25V7H16a5 5 0 000 10h3.5v2.25a.25.25 0 01-.25.25H4.75a.25.25 0 01-.25-.25V4.75a.25.25 0 01.25-.25zM22 7h-1V4.75A1.75 1.75 0 0019.25 3H4.75A1.75 1.75 0 003 4.75v14.5c0 .966.784 1.75 1.75 1.75h14.5A1.75 1.75 0 0021 19.25V17h1a1 1 0 001-1V8a1 1 0 00-1-1zm-.5 1.5H16a3.5 3.5 0 100 7h5.5v-7zm-5.5 5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z",
+    fill: "currentColor"
+  }));
+}
+var Wallet = /*#__PURE__*/React.forwardRef(IconWallet);
+
 function IconWarning(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
@@ -3505,6 +3598,8 @@ const icons = {
   'attach-cancel': AttachCancel,
   'attach-warning': AttachWarning,
   attach: Attach,
+  'autopay-paused': AutopayPaused,
+  autopay: Autopay,
   'autotext-insert': AutotextInsert,
   autotext: Autotext,
   'basic-tabs': BasicTabs,
@@ -3595,6 +3690,7 @@ const icons = {
   envelope: Envelope,
   'expand-view': ExpandView,
   expenses: Expenses,
+  experiment: Experiment,
   'export-to-excel': ExportToExcel,
   'export-to-pdf': ExportToPdf,
   export: Export,
@@ -3671,7 +3767,9 @@ const icons = {
   'person-change': PersonChange,
   'person-minus': PersonMinus,
   'person-plus': PersonPlus,
+  'person-solid': PersonSolid,
   'person-tick': PersonTick,
+  person: Person,
   'phone-solid': PhoneSolid,
   phone: Phone,
   play: Play,
@@ -3730,6 +3828,7 @@ const icons = {
   undo: Undo,
   undock: Undock,
   unreconciled: Unreconciled,
+  wallet: Wallet,
   warning: Warning,
   webshop: Webshop,
   website: Website,
@@ -3799,6 +3898,8 @@ const getIconName = state => {
       return 'warning';
     case 'error':
       return 'close';
+    case 'experiment':
+      return 'experiment';
     case 'success':
       return 'tick';
     default:
@@ -4083,10 +4184,10 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
     ...otherProps
   } = props;
   const isTransparent = color === 'transparent';
-  const className = cn('rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center', {
+  const className = cn('rounded-full border box-border overflow-hidden whitespace-nowrap inline-flex items-center justify-center', {
     [`border ${getOutlineColorShadeClasses(color)}`]: outline,
-    [`border-transparent font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,
-    [`border-transparent ${getColorShadeClasses(color)}`]: !outline && !subtle,
+    [`border-none font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,
+    [`border-none ${getColorShadeClasses(color)}`]: !outline && !subtle,
     'h-4 min-w-0 py-0 px-1 text-xs': small,
     'h-2 w-2 min-w-0': compact,
     'font-bold': outline || !subtle,
@@ -4098,12 +4199,15 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
     if (compact) {
       return /*#__PURE__*/React.createElement(VisuallyHidden, null, children);
     }
+    const contentToRender = typeof children === 'string' ? /*#__PURE__*/React.createElement("span", {
+      className: "items-center truncate"
+    }, children) : children;
     if (status) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: cn('mr-1 h-2 w-2 rounded-full', getColorShadeClasses(color))
-      }), children);
+        className: cn('mr-1 h-2 w-2 shrink-0 rounded-full', getColorShadeClasses(color))
+      }), contentToRender);
     }
-    return children;
+    return contentToRender;
   };
   return /*#__PURE__*/React.createElement("span", Object.assign({}, otherProps, {
     "aria-atomic": "true",
@@ -4131,6 +4235,11 @@ const getBannerIcon = type => {
           icon: "close",
           color: "red"
         });
+      case 'experiment':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "experiment",
+          color: "purple"
+        });
       case 'warning':
         return /*#__PURE__*/React__default.createElement(BadgeIcon, {
           icon: "warning",
@@ -4223,6 +4332,9 @@ function isElementTriggeredFromContainer(element, container) {
       return true;
     }
     const elementInDocument = document.querySelector(escapedSelector);
+    if (elementInDocument === container) {
+      return true;
+    }
     // if the element does exist, see if it is itself connected to somethng that was triggered from the container
     if (elementInDocument) {
       return isElementTriggeredFromContainer(elementInDocument, container);
@@ -4245,7 +4357,15 @@ function isElementInteractive(element) {
   if (!element) {
     return false;
   }
-  return ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'].includes(element.tagName) && !element.hidden && !element.disabled && !element.readOnly;
+  const interactiveElements = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'];
+  const isInteractive = interactiveElements.includes(element.tagName) && !element.hidden && !element.disabled && !element.readOnly;
+  // sometimes buttons contain content like an icon, and we can't rely on pointer events being disabled
+  // so search for a focusable parent
+  if (!isInteractive) {
+    const focusableParent = element.closest(FOCUSABLE_ELEMENTS.join(','));
+    return focusableParent ? interactiveElements.includes(focusableParent.tagName) : false;
+  }
+  return isInteractive;
 }
 function isElementInsideTable3OrReport(element) {
   return !!(element !== null && element !== void 0 && element.closest('[data-taco^=table]'));
@@ -4276,9 +4396,12 @@ function shouldTriggerShortcut(event, key) {
   }
   return event.key.toLowerCase() === keyOptions.key.toLowerCase();
 }
-function createShortcutKeyDownHandler(key, handler, stopPropagation = true) {
+function createShortcutKeyDownHandler(key, handler, stopPropagation = true, element) {
   return function (event) {
-    if (event.target !== event.currentTarget && isElementInteractive(event.target) && !isPressingMetaKey(event)) {
+    const dialog = document.querySelector('[role="dialog"]');
+    const isOutsideDialog = element && dialog && !dialog.contains(element);
+    if (event.target !== event.currentTarget && isElementInteractive(event.target) && !isPressingMetaKey(event) || isOutsideDialog // Avoid triggering shortcut if dialog is open and element is outside the dialog
+    ) {
       return;
     }
     const condition = shouldTriggerShortcut(event, key);
@@ -4299,11 +4422,11 @@ const isMacOs = () => {
   return (_window = window) === null || _window === void 0 ? void 0 : _window.navigator.userAgent.includes('Mac');
 };
 
-const useGlobalKeyDown = (shortcut, handler) => {
+const useGlobalKeyDown = (shortcut, handler, element) => {
   React__default.useEffect(() => {
     let handleKeyDown;
     if (shortcut) {
-      handleKeyDown = createShortcutKeyDownHandler(shortcut, handler, false);
+      handleKeyDown = createShortcutKeyDownHandler(shortcut, handler, false, element);
       document.addEventListener('keydown', handleKeyDown);
     }
     return () => {
@@ -4326,13 +4449,8 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   useGlobalKeyDown(shortcut, event => {
     var _internalRef$current;
     event === null || event === void 0 ? void 0 : event.preventDefault();
-    const dialog = document.querySelector('[role="dialog"]');
-    // Don't trigger the click on the button if it is outside of the dialog
-    if (dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(internalRef.current))) {
-      return;
-    }
     (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.click();
-  });
+  }, internalRef.current);
   const Tag = props.href ? 'a' : 'button';
   return /*#__PURE__*/React.createElement(Tag, Object.assign({}, otherProps, {
     href: disabled ? undefined : props.href,
@@ -4859,7 +4977,8 @@ const Base$1 = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   }, props.className);
   return createButtonWithTooltip({
     ...otherProps,
-    'data-taco': 'button'
+    'data-taco': 'button',
+    'data-appearance': appearance
   }, className, ref);
 });
 const Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
@@ -4982,22 +5101,23 @@ const TodayButton = ({
   }, texts.calendar.actions.today);
 };
 const Calendar$1 = props => {
+  var _ref;
   const {
     onChange: handleChange,
     value,
     disabledDays,
+    visibleMonth,
     ...otherProps
   } = props;
-  const [visibleMonth, setVisibleMonth] = React.useState(value !== null && value !== void 0 ? value : new Date());
+  const [internalVisibleMonth, setInternalVisibleMonth] = React.useState((_ref = visibleMonth !== null && visibleMonth !== void 0 ? visibleMonth : value) !== null && _ref !== void 0 ? _ref : new Date());
   const {
     texts
   } = useLocalization();
   React.useEffect(() => {
-    if (visibleMonth !== value) {
-      setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
+    if (visibleMonth && visibleMonth !== internalVisibleMonth) {
+      setInternalVisibleMonth(visibleMonth);
     }
-    // visibleMonth in deps array breaking month switching logic. It should not be in deps array.
-  }, [value]);
+  }, [visibleMonth]);
   const handleDayClick = (date, modifiers, event) => {
     if (modifiers.outside || modifiers.disabled) {
       return;
@@ -5011,13 +5131,13 @@ const Calendar$1 = props => {
     className: className,
     captionLayout: "dropdown-buttons",
     weekStartsOn: 1,
-    month: visibleMonth,
+    month: internalVisibleMonth,
     numberOfMonths: 1,
     components: {
-      Caption: props => /*#__PURE__*/React.createElement(Navbar, Object.assign({}, props, {
-        onMonthChange: setVisibleMonth,
-        value: visibleMonth
-      })),
+      Caption: props => (/*#__PURE__*/React.createElement(Navbar, Object.assign({}, props, {
+        onMonthChange: setInternalVisibleMonth,
+        value: internalVisibleMonth
+      }))),
       Footer: () => (/*#__PURE__*/React.createElement("tfoot", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
         colSpan: 7,
         className: "text-center"
@@ -5943,7 +6063,6 @@ const useCombobox = ({
   }, [open]);
   // event handlers
   const handleInputBlur = event => {
-    event.persist();
     if (listRef.current && event.relatedTarget === listRef.current) {
       event.preventDefault();
       return;
@@ -5956,7 +6075,14 @@ const useCombobox = ({
       if (parents !== null && parents.length > 0) {
         event.detail.parents = parents;
       }
-      onChange(event);
+      const isComboboxChangeEvent = event => {
+        return !event.isTrusted; // this makes sure we only take our own custom event, and not the browser default blur on tab.
+      };
+      // Only trigger onChange if this is our custom event (not a browser blur event)
+      // or if the input was cleared.
+      if (isComboboxChangeEvent(event) || event.target.value === '' && !inline) {
+        onChange(event);
+      }
     }
     if (props.onBlur) {
       props.onBlur(event);
@@ -5970,12 +6096,10 @@ const useCombobox = ({
       setOpen(true);
     }
     if (onClick) {
-      event.persist();
       onClick(event);
     }
   };
   const handleInputKeyDown = event => {
-    event.persist();
     if (!event.ctrlKey && !event.metaKey) {
       switch (event.key) {
         case 'Backspace':
@@ -6044,7 +6168,6 @@ const useCombobox = ({
       }
     }
     if (!event.isDefaultPrevented() && onKeyDown) {
-      event.persist();
       onKeyDown(event);
     }
   };
@@ -6272,14 +6395,18 @@ const useDatepicker = ({
   } = useLocalization();
   const [internalValue, setInternalValue] = React.useState((_format = format(value, formatting.date)) !== null && _format !== void 0 ? _format : '');
   const originalValueAsDate = parse(value);
-  // update internal value if it changed 'externally'
+  // Track the current view date (month/year) in the calendar
+  const [calendarViewDate, setCalendarViewDate] = React.useState(originalValueAsDate || new Date());
   React.useEffect(() => {
-    const formattedValue = format(value, formatting.date);
-    if (formattedValue !== internalValue) {
-      setInternalValue(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '');
+    // Only update the internal value when the input is not focused
+    // This prevents the input value from being reset while user is typing
+    if (inputRef.current !== document.activeElement) {
+      const formattedValue = format(value, formatting.date);
+      if (formattedValue !== internalValue) {
+        setInternalValue(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '');
+      }
     }
   }, [value]);
-  // event handlers
   const handleInputBlur = event => {
     event.persist();
     const valueAsDate = parseFromCustomString(event.target.value, 'dd.mm.yy', originalValueAsDate === null || originalValueAsDate === void 0 ? void 0 : originalValueAsDate.getMonth(), originalValueAsDate === null || originalValueAsDate === void 0 ? void 0 : originalValueAsDate.getFullYear());
@@ -6300,6 +6427,8 @@ const useDatepicker = ({
     setInternalValue(event.target.value);
   };
   const handleChange = date => {
+    // Update both the input value and calendar view date when selecting a date
+    setCalendarViewDate(date);
     setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');
   };
   const handleKeyDown = event => {
@@ -6325,7 +6454,8 @@ const useDatepicker = ({
   const calendarProps = {
     ...calendar,
     onChange: handleChange,
-    value: originalValueAsDate
+    value: originalValueAsDate,
+    visibleMonth: calendarViewDate
   };
   return {
     input: inputProps,
@@ -8214,7 +8344,7 @@ const Content$8 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref)
             var _childrenRefs$current, _childrenRefs$current2;
             return (_childrenRefs$current = childrenRefs.current[index]) === null || _childrenRefs$current === void 0 ? void 0 : (_childrenRefs$current2 = _childrenRefs$current.current) === null || _childrenRefs$current2 === void 0 ? void 0 : _childrenRefs$current2.click();
           }, 1);
-        }));
+        }, true, childrenRefs.current[index].current));
       }
     });
     shortcuts.forEach(handler => document.addEventListener('keydown', handler));
@@ -8283,7 +8413,7 @@ const Shortcut = ({
     className: className
   }), texts.map(key => (/*#__PURE__*/React__default.createElement("kbd", {
     key: key,
-    className: "font-display text-grey-700 [[data-taco=tooltip]_&]:bg-grey-300/[0.25] rounded-sm bg-black/[0.09] px-1 text-center font-bold [[data-taco=tooltip]_&]:text-white"
+    className: "font-display text-grey-700 [[data-taco=tooltip]_&]:bg-grey-300/[0.25] rounded-sm bg-black/[0.09] px-1 text-center font-bold [[data-appearance=danger]_&]:text-white [[data-appearance=primary]_&]:text-white [[data-taco=tooltip]_&]:text-white"
   }, key))));
 };
 
@@ -9865,9 +9995,13 @@ const dataTypes = {
       if (value === undefined) {
         return '';
       }
-      return new Intl.NumberFormat(options === null || options === void 0 ? void 0 : (_options$localization2 = options.localization) === null || _options$localization2 === void 0 ? void 0 : _options$localization2.locale, {
+      const formatter = new Intl.NumberFormat(options === null || options === void 0 ? void 0 : (_options$localization2 = options.localization) === null || _options$localization2 === void 0 ? void 0 : _options$localization2.locale, {
         minimumFractionDigits: 2
-      }).format(Number(value));
+      });
+      const decimalSeperator = formatter.format(1.1).substring(1, 2);
+      const localisedValue = formatter.format(Number(value));
+      const localisedValueWithoutThousandsSeperator = decimalSeperator === '.' ? localisedValue.replace(',', '') : localisedValue.replace('.', '');
+      return [localisedValue, localisedValueWithoutThousandsSeperator];
     }
   }
 };
@@ -10015,7 +10149,13 @@ function isMatched(searchQuery, cellValue, dataType, localization) {
         const cellDisplayValue = dataTypeProperties.getDisplayValue(cellValue, {
           localization
         });
-        if (cellDisplayValue !== undefined && isWeakContains(cellDisplayValue, searchQuery)) {
+        if (Array.isArray(cellDisplayValue)) {
+          for (const displayValue of cellDisplayValue) {
+            if (isWeakContains(displayValue, searchQuery)) {
+              return true;
+            }
+          }
+        } else if (cellDisplayValue !== undefined && isWeakContains(cellDisplayValue, searchQuery)) {
           return true;
         }
       }
@@ -10313,10 +10453,15 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
       column.cell = info => renderer(info.getValue(), info.row.original);
     } else if (dataTypeProperties.getDisplayValue) {
       const dataTypeRenderer = value => {
-        var _dataTypeProperties$g, _dataTypeProperties$g2;
-        return (_dataTypeProperties$g = (_dataTypeProperties$g2 = dataTypeProperties.getDisplayValue) === null || _dataTypeProperties$g2 === void 0 ? void 0 : _dataTypeProperties$g2.call(dataTypeProperties, value, {
+        var _dataTypeProperties$g;
+        const displayValue = (_dataTypeProperties$g = dataTypeProperties.getDisplayValue) === null || _dataTypeProperties$g === void 0 ? void 0 : _dataTypeProperties$g.call(dataTypeProperties, value, {
           localization
-        })) !== null && _dataTypeProperties$g !== void 0 ? _dataTypeProperties$g : value;
+        });
+        if (Array.isArray(displayValue)) {
+          var _displayValue$;
+          return (_displayValue$ = displayValue[0]) !== null && _displayValue$ !== void 0 ? _displayValue$ : value;
+        }
+        return displayValue !== null && displayValue !== void 0 ? displayValue : value;
       };
       column.cell = info => dataTypeRenderer(info.getValue());
       column.meta.renderer = dataTypeRenderer;
@@ -10526,6 +10671,7 @@ const DEFAULT_PRESET = {
   enableColumnHiding: false,
   enableColumnResizing: false,
   enableRowExpansion: false,
+  enableRowExpansionAll: true,
   enableRowSelection: false,
   // custom -- common between all table types
   enableColumnOrdering: false,
@@ -10552,6 +10698,7 @@ const presets = {
     enableColumnHiding: true,
     enableColumnResizing: true,
     enableRowExpansion: true,
+    enableRowExpansionAll: true,
     enableRowSelection: true,
     // custom -- common between all table types
     enableColumnOrdering: true,
@@ -10577,6 +10724,7 @@ const presets = {
     enableColumnHiding: false,
     enableColumnResizing: false,
     enableRowExpansion: true,
+    enableRowExpansionAll: true,
     enableRowSelection: true,
     // custom -- common between all table types
     enableColumnOrdering: false,
@@ -10602,6 +10750,7 @@ const presets = {
     enableColumnHiding: false,
     enableColumnResizing: false,
     enableRowExpansion: true,
+    enableRowExpansionAll: true,
     enableRowSelection: false,
     // custom -- common between all table types
     enableColumnOrdering: false,
@@ -10619,7 +10768,7 @@ const presets = {
   }
 };
 function getTableFeaturePreset(props) {
-  var _props$enableRowActio, _props$enableRowClick, _props$enableRowDrag, _props$enableRowDrop, _props$enableRowGoto, _props$enableRowExpan, _props$enableRowSelec, _props$enableFilterin, _props$enableSearch, _props$enableSorting, _props$enableColumnFr, _props$enableColumnHi, _props$enableColumnRe, _props$enableColumnOr, _props$enableFontSize, _props$enableFooter, _props$enablePrinting, _props$enableRowActiv, _props$rowActions, _props$enableRowHeigh, _props$enableSaveSett;
+  var _props$enableRowActio, _props$enableRowClick, _props$enableRowDrag, _props$enableRowDrop, _props$enableRowGoto, _props$enableRowExpan, _props$enableRowExpan2, _props$enableRowSelec, _props$enableFilterin, _props$enableSearch, _props$enableSorting, _props$enableColumnFr, _props$enableColumnHi, _props$enableColumnRe, _props$enableColumnOr, _props$enableFontSize, _props$enableFooter, _props$enablePrinting, _props$enableRowActiv, _props$rowActions, _props$enableRowHeigh, _props$enableSaveSett;
   const presetOptions = props.preset ? presets[props.preset] : DEFAULT_PRESET;
   const enableRowActions = (_props$enableRowActio = props.enableRowActions) !== null && _props$enableRowActio !== void 0 ? _props$enableRowActio : presetOptions.enableRowActions;
   const enableRowClick = (_props$enableRowClick = props.enableRowClick) !== null && _props$enableRowClick !== void 0 ? _props$enableRowClick : presetOptions.enableRowClick;
@@ -10627,6 +10776,7 @@ function getTableFeaturePreset(props) {
   const enableRowDrop = (_props$enableRowDrop = props.enableRowDrop) !== null && _props$enableRowDrop !== void 0 ? _props$enableRowDrop : presetOptions.enableRowDrop;
   const enableRowGoto = (_props$enableRowGoto = props.enableRowGoto) !== null && _props$enableRowGoto !== void 0 ? _props$enableRowGoto : presetOptions.enableRowGoto;
   const enableRowExpansion = (_props$enableRowExpan = props.enableRowExpansion) !== null && _props$enableRowExpan !== void 0 ? _props$enableRowExpan : presetOptions.enableRowExpansion;
+  const enableRowExpansionAll = (_props$enableRowExpan2 = props.enableRowExpansionAll) !== null && _props$enableRowExpan2 !== void 0 ? _props$enableRowExpan2 : presetOptions.enableRowExpansionAll;
   const enableRowSelection = (_props$enableRowSelec = props.enableRowSelection) !== null && _props$enableRowSelec !== void 0 ? _props$enableRowSelec : presetOptions.enableRowSelection;
   return {
     // react-table built-in
@@ -10651,6 +10801,7 @@ function getTableFeaturePreset(props) {
     enableRowDrag: enableRowDrag && !!props.onRowDrag,
     enableRowDrop: enableRowDrop && !!props.onRowDrop,
     enableRowGoto: enableRowGoto && !!props.onRowGoto,
+    enableRowExpansionAll: enableRowExpansion && enableRowExpansionAll && !!props.rowExpansionRenderer,
     enableRowHeight: (_props$enableRowHeigh = props.enableRowHeight) !== null && _props$enableRowHeigh !== void 0 ? _props$enableRowHeigh : presetOptions.enableRowHeight,
     enableSaveSettings: (_props$enableSaveSett = props.enableSaveSettings) !== null && _props$enableSaveSett !== void 0 ? _props$enableSaveSett : presetOptions.enableSaveSettings
   };
@@ -10895,9 +11046,10 @@ function useTableRowClick(isEnabled = false, onRowClick) {
   };
 }
 
-function useTableRowExpansion(isEnabled = false, rowExpansionRenderer) {
+function useTableRowExpansion(isEnabled = false, canExpandAll = true, rowExpansionRenderer) {
   return {
     isEnabled,
+    canExpandAll,
     rowExpansionRenderer: isEnabled ? rowExpansionRenderer : undefined
   };
 }
@@ -11361,6 +11513,7 @@ function useTableServerLoading(loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE)
         const _temp = function () {
           if (typeof loadPage === 'function') {
             return Promise.resolve(loadPage(...args)).then(function () {
+              setLoadedStatus(exports.TableServerLoadAllState.Incomplete);
               setReady(true);
             });
           }
@@ -11481,7 +11634,7 @@ function useLazyEffect(effect, deps) {
   const readyRef = React__default.useRef(false);
   React__default.useEffect(() => {
     if (readyRef.current) {
-      effect();
+      return effect();
     } else {
       readyRef.current = true;
     }
@@ -11523,7 +11676,8 @@ function useTableFontSizeListener(table) {
     table.setColumnSizing(sizes => {
       return Object.fromEntries(Object.entries(sizes).map(([columnName, prevColumnSize]) => {
         var _column$columnDef$min;
-        const column = table.getColumn(columnName);
+        // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505
+        const column = table.getAllColumns().find(x => x.id === columnName);
         if (isInternalColumn(columnName)) {
           var _column$getSize;
           return [columnName, (_column$getSize = column === null || column === void 0 ? void 0 : column.getSize()) !== null && _column$getSize !== void 0 ? _column$getSize : prevColumnSize];
@@ -11738,7 +11892,7 @@ function useTableManager(props, meta, internalColumns) {
   const rowClick = useTableRowClick(options.enableRowClick, props.onRowClick);
   const rowDrag = useTableRowDrag(options.enableRowDrag && !(meta !== null && meta !== void 0 && (_meta$editing = meta.editing) !== null && _meta$editing !== void 0 && _meta$editing.isEditing), props.onRowDrag);
   const rowDrop = useTableRowDrop(options.enableRowDrop, props.onRowDrop);
-  const rowExpansion = useTableRowExpansion(options.enableRowExpansion, props.rowExpansionRenderer);
+  const rowExpansion = useTableRowExpansion(options.enableRowExpansion, options.enableRowExpansionAll, props.rowExpansionRenderer);
   const rowGoto = useTableRowGoto(options.enableRowGoto, props.onRowGoto);
   const rowGroups = useTableRowGroups(props.rowActionsForGroup);
   const rowHeight = useTableRowHeight(options.enableRowHeight, settings.rowHeight);
@@ -12480,6 +12634,10 @@ function Header$3(context) {
   const {
     table
   } = context;
+  const tableMeta = table.options.meta;
+  if (!tableMeta.rowExpansion.canExpandAll) {
+    return null;
+  }
   const isSomeRowsExpanded = table.getIsSomeRowsExpanded();
   const handleClick = event => {
     event.stopPropagation();
@@ -13786,8 +13944,13 @@ function Summary(props) {
 }
 
 function Foot(props) {
-  const nonGroupedHeaders = props.table.getFooterGroups()[0].headers.filter(header => !header.column.getIsGrouped());
-  return /*#__PURE__*/React__default.createElement("tfoot", null, /*#__PURE__*/React__default.createElement("tr", null, nonGroupedHeaders.map((header, index) => (/*#__PURE__*/React__default.createElement(Footer$3, {
+  const {
+    children,
+    table,
+    ...attributes
+  } = props;
+  const nonGroupedHeaders = table.getFooterGroups()[0].headers.filter(header => !header.column.getIsGrouped());
+  return /*#__PURE__*/React__default.createElement("tfoot", Object.assign({}, attributes), children, /*#__PURE__*/React__default.createElement("tr", null, nonGroupedHeaders.map((header, index) => (/*#__PURE__*/React__default.createElement(Footer$3, {
     key: header.id,
     header: header,
     index: index
@@ -13835,22 +13998,29 @@ const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(prop
 });
 
 function EmptyStateBody(props) {
+  var _ref$current, _ref$current$parentNo;
   const {
     emptyState: Placeholder,
     isReady,
     reason,
     ...attributes
   } = props;
+  const ref = React__default.useRef(null);
   if (!isReady) {
     return /*#__PURE__*/React__default.createElement("tbody", Object.assign({}, attributes, {
       className: "!auto-rows-fr"
     }));
   }
   return /*#__PURE__*/React__default.createElement("tbody", Object.assign({}, attributes, {
-    className: "!auto-rows-fr"
+    ref: ref,
+    className: "!auto-rows-fr",
+    "data-taco": "empty-state"
   }), /*#__PURE__*/React__default.createElement("tr", {
-    className: "!auto-rows-fr"
+    className: "!auto-rows-fr "
   }, /*#__PURE__*/React__default.createElement("td", {
+    style: {
+      maxWidth: ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : (_ref$current$parentNo = _ref$current.parentNode) === null || _ref$current$parentNo === void 0 ? void 0 : _ref$current$parentNo.clientWidth
+    },
     className: "col-span-full !border-0 !p-0 hover:!bg-white"
   }, Placeholder ? /*#__PURE__*/React__default.createElement(Placeholder, {
     reason: reason
@@ -14817,14 +14987,16 @@ const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     ref: ref,
     "data-taco": "tag"
   }), /*#__PURE__*/React__default.createElement("span", {
-    className: "truncate px-2",
+    className: "flex items-center truncate px-2",
     ref: textRef
   }, icon ? typeof icon === 'string' ? (/*#__PURE__*/React__default.createElement(Icon, {
     name: icon,
-    className: "-ml-1 -mt-0.5 mr-1 !h-5 !w-5"
+    className: "-ml-1 mr-1 !h-5 !w-5"
   })) : (/*#__PURE__*/React__default.cloneElement(icon, {
-    className: 'mr-1 -ml-1 -mt-0.5 !h-5 !w-5'
-  })) : null, children), onDelete ? (/*#__PURE__*/React__default.createElement(Icon, {
+    className: 'mr-1 -ml-1 !h-5 !w-5'
+  })) : null, /*#__PURE__*/React__default.createElement("span", {
+    className: "truncate"
+  }, children)), onDelete ? (/*#__PURE__*/React__default.createElement(Icon, {
     name: "close",
     onClick: onDelete,
     className: "-ml-1.5 !h-6 !w-5 flex-shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5"
@@ -15101,12 +15273,13 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
   }), hasValue ? (/*#__PURE__*/React__default.createElement(Icon, {
     name: "tick",
     className: "pointer-events-none invisible -mx-0.5 !h-4 !w-4 group-aria-selected:visible"
-  })) : null, isTag ? (/*#__PURE__*/React__default.createElement(Tag$1, {
+  })) : null, typeof children !== 'string' ? (/*#__PURE__*/React__default.createElement("span", null, children)) : isTag ? (/*#__PURE__*/React__default.createElement(Tag$1, {
     className: "pointer-events-none my-1",
     color: color,
     icon: prefix
   }, children)) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, prefix ? typeof prefix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
-    name: prefix
+    name: prefix,
+    className: "!h-5 !w-5"
   }) : prefix : null, /*#__PURE__*/React__default.createElement("span", {
     className: "flex w-full justify-between"
   }, /*#__PURE__*/React__default.createElement("span", {
@@ -15115,9 +15288,10 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
     className: "text-grey-700 -mt-1.5 mb-1.5 text-xs"
   }, description) : null), /*#__PURE__*/React__default.createElement("span", {
     className: "flex flex-col self-center"
-  }, postfix ? typeof postfix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
-    name: postfix
-  }) : postfix : null)))), popover ? (/*#__PURE__*/React__default.createElement(IconButton, {
+  }, postfix ? typeof postfix === 'string' ? (/*#__PURE__*/React__default.createElement(Icon, {
+    name: postfix,
+    className: "!h-5 !w-5"
+  })) : postfix : null)))), popover ? (/*#__PURE__*/React__default.createElement(IconButton, {
     icon: "ellipsis-vertical",
     appearance: "discrete",
     className: cn('group-aria-current:visible invisible -mr-1 ml-auto !h-5 min-h-[theme(spacing.6)] !w-5 min-w-[theme(spacing.6)] hover:!bg-black/[.08] focus:!shadow-none group-hover:visible', {
@@ -15283,7 +15457,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
     readOnly,
     tags
   } = useSelect2Context();
-  const contentClassName = cn('truncate items-center gap-1');
+  const contentClassName = cn('truncate flex items-center gap-1');
   const currentValue = children.find(matchesValue(value));
   let output;
   if (placeholder && currentValue === undefined) {
@@ -15293,13 +15467,13 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
     }, placeholder);
   } else if (currentValue) {
     if (tags && emptyValue !== value) {
-      output = /*#__PURE__*/React__default.createElement(Tag$1, {
+      if (typeof currentValue.props.children === 'string') output = /*#__PURE__*/React__default.createElement(Tag$1, {
         className: "truncate",
         color: currentValue.props.color,
         disabled: disabled,
         icon: currentValue.props.prefix,
         readOnly: readOnly
-      }, currentValue.props.children);
+      }, currentValue.props.children);else output = currentValue.props.children;
     } else {
       output = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, currentValue.props.prefix ? typeof currentValue.props.prefix === 'string' ? (/*#__PURE__*/React__default.createElement(Icon, {
         name: currentValue.props.prefix,
@@ -15350,7 +15524,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     }, valuesAsChildren.length === 0 ? (/*#__PURE__*/React__default.createElement(Placeholder, {
       disabled: disabled,
       readOnly: readOnly
-    }, placeholder)) : valuesAsChildren.map(child => (/*#__PURE__*/React__default.createElement(Tag$1, {
+    }, placeholder)) : valuesAsChildren.map(child => typeof child.props.children === 'string' ? (/*#__PURE__*/React__default.createElement(Tag$1, {
       key: String(child.props.value),
       className: "truncate",
       color: tags ? child.props.color : undefined,
@@ -15364,7 +15538,23 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
         }
       },
       readOnly: readOnly
-    }, child.props.children)))));
+    }, child.props.children)) : (/*#__PURE__*/React__default.cloneElement(child.props.children, {
+      key: String(child.props.value),
+      className: '!pr-0 !pl-1.5',
+      children: (/*#__PURE__*/React__default.createElement("span", {
+        className: "flex items-center"
+      }, child.props.children.props.children, /*#__PURE__*/React__default.createElement(Icon, {
+        name: "close",
+        onClick: event => {
+          event === null || event === void 0 ? void 0 : event.stopPropagation();
+          event === null || event === void 0 ? void 0 : event.preventDefault();
+          if (!disabled && !readOnly) {
+            setValue(child.props.value);
+          }
+        },
+        className: "ml-0.5 !h-5 !w-5 shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5"
+      })))
+    })))));
   } else {
     content = /*#__PURE__*/React__default.createElement(MultipleValue, {
       onClick: forwardClick,
@@ -15395,6 +15585,18 @@ const MultipleValue = ({
   } = useSelect2Context();
   const [contentRef, setContentRef] = React__default.useState(null);
   const boundaryIndex = contentRef ? getIndexOfFirstChildOverflowingParent(contentRef, 30) : undefined;
+  // Retrieves the relevant text content from any JSX.Element passed as a select option, handling nested elements, arrays, and direct text
+  const getTooltipTitle = child => {
+    const children = child.props.children;
+    if (typeof children === 'string') return children;
+    if (typeof children.props.children === 'string') {
+      return children.props.children;
+    }
+    if (Array.isArray(children.props.children)) {
+      return children.props.children.filter(item => typeof item === 'string');
+    }
+    return '';
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: "relative flex w-full items-center gap-1 overflow-hidden",
     onClick: onClick
@@ -15405,26 +15607,35 @@ const MultipleValue = ({
     disabled: disabled,
     readOnly: readOnly
   }, placeholder)) : valuesAsChildren.map((child, index) => {
-    const tag = /*#__PURE__*/React__default.createElement(Tag$1, {
-      key: String(child.props.value),
+    const classNames = {
+      truncate: index === boundaryIndex,
+      hidden: boundaryIndex !== undefined && boundaryIndex !== null ? index > boundaryIndex : false
+    };
+    let output;
+    if (typeof child.props.children === 'string') {
+      output = /*#__PURE__*/React__default.createElement(Tag$1, {
+        key: String(child.props.value),
+        className: cn('cursor-pointer', classNames),
+        color: tags ? child.props.color : undefined,
+        disabled: disabled,
+        icon: child.props.prefix,
+        readOnly: readOnly
+      }, child.props.children);
+    } else output = /*#__PURE__*/React__default.cloneElement(child.props.children, {
       className: cn('cursor-pointer', {
-        truncate: index === boundaryIndex,
-        hidden: boundaryIndex !== undefined && boundaryIndex !== null ? index > boundaryIndex : false
-      }),
-      color: tags ? child.props.color : undefined,
-      disabled: disabled,
-      icon: child.props.prefix,
-      readOnly: readOnly
-    }, child.props.children);
+        'shrink-0': index !== boundaryIndex
+      }, classNames),
+      key: String(child.props.value)
+    });
     if (index === boundaryIndex) {
       return /*#__PURE__*/React__default.createElement(Tooltip, {
         key: String(child.props.value),
-        title: String(child.props.children)
-      }, tag);
+        title: String(getTooltipTitle(child))
+      }, output);
     }
-    return tag;
+    return output;
   })), boundaryIndex !== undefined && boundaryIndex !== null && boundaryIndex < valuesAsChildren.length - 1 ? (/*#__PURE__*/React__default.createElement(Tooltip, {
-    title: valuesAsChildren.slice(boundaryIndex + 1).map(child => child ? String(child.props.children) : '').join(', ')
+    title: valuesAsChildren.slice(boundaryIndex + 1).map(child => child ? String(getTooltipTitle(child)) : '').join(', ')
   }, /*#__PURE__*/React__default.createElement(Badge, {
     className: "flex-shrink-0"
   }, "+", valuesAsChildren.length - (boundaryIndex + 1)))) : null);
@@ -15489,7 +15700,7 @@ const BubbleSelect = props => {
     if (prevValue !== value && setValue) {
       if (Array.isArray(value)) {
         value.forEach(v => {
-          const option = select.querySelector(`option[value='${v}']`);
+          const option = select.querySelector(`option[value='${CSS.escape(v)}']`);
           if (option) {
             option.selected = true;
           }
@@ -16299,10 +16510,11 @@ function guessComparatorsBasedOnControl(column) {
   return getDataTypeProperties(columnMeta.dataType).filterComparators;
 }
 
+const FilterContext = /*#__PURE__*/React__default.createContext([]);
+
 const FilterColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     allColumns,
-    filters,
     onChange: handleChange,
     value = null,
     ...attributes
@@ -16310,6 +16522,7 @@ const FilterColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     texts
   } = useLocalization();
+  const filters = React__default.useContext(FilterContext);
   const selectedColumn = allColumns.find(column => column.id === value);
   const warning = selectedColumn && !selectedColumn.getIsVisible();
   return /*#__PURE__*/React__default.createElement("div", {
@@ -16475,6 +16688,7 @@ function Control(props) {
   } = props;
   const controlRenderer = column === null || column === void 0 ? void 0 : (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.control;
   const dataType = column === null || column === void 0 ? void 0 : (_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.dataType;
+  const filters = React__default.useContext(FilterContext);
   const ref = React__default.useRef(null);
   React.useEffect(() => {
     // Set value to false only after first render of the control (when it's undefined) after setting the FilterColumn value, because we don't want to change then the value every time filter is opened
@@ -16488,7 +16702,7 @@ function Control(props) {
       setValue: value => onChange(value),
       value,
       ref
-    }), {
+    }, undefined, filters), {
       ['data-query-selector']: querySelector,
       className: 'focus:yt-focus'
     });
@@ -16530,7 +16744,6 @@ function Filter$1(props) {
   const {
     allColumns,
     filter,
-    filters,
     onChange: handleChange,
     onRemove,
     position
@@ -16605,7 +16818,6 @@ function Filter$1(props) {
     className: "flex min-h-[theme(spacing.8)] w-14 flex-shrink-0 items-center justify-end pr-2 text-right"
   }, position > 0 ? texts.table.filters.conditions.and : texts.table.filters.conditions.where), /*#__PURE__*/React__default.createElement(FilterColumn, {
     allColumns: allColumns,
-    filters: filters,
     onChange: handleChangeColumn,
     value: id,
     ref: ref
@@ -16709,7 +16921,9 @@ function ManageFiltersPopover(props) {
   };
   return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
     onChange: handleClose
-  }), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement(FilterContext.Provider, {
+    value: filters
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex w-[40rem] flex-col gap-4"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex h-8"
@@ -16725,7 +16939,6 @@ function ManageFiltersPopover(props) {
     key: `filter_${index}`,
     allColumns: allColumns,
     filter: filter,
-    filters: filters,
     position: index,
     onChange: handleChangeFilter,
     onRemove: filters.length > 0 && filters.some(f => f.id) || filters.length > 1 ? handleRemoveFilter : undefined
@@ -16741,7 +16954,7 @@ function ManageFiltersPopover(props) {
   }, texts.table.filters.buttons.clear), /*#__PURE__*/React__default.createElement(Button$1, {
     appearance: "primary",
     onClick: handleApply
-  }, texts.table.filters.buttons.apply)))));
+  }, texts.table.filters.buttons.apply))))));
 }
 
 function Filters(props) {
@@ -16861,6 +17074,7 @@ function TableGrid(props) {
   var _table$state$grouping;
   const {
     enableHorizontalArrowKeyNavigation,
+    footerRows,
     table,
     ...attributes
   } = props;
@@ -16907,7 +17121,7 @@ function TableGrid(props) {
     } : table.renderer.style
   }, table.renderer.rows, props.children), table.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Foot, {
     table: table.instance
-  }) : null)))));
+  }, footerRows) : null)))));
 }
 
 function Column$1(_) {
@@ -18500,20 +18714,25 @@ const shortcut = {
   meta: true,
   shift: false
 };
+function isTableScrolled(ref) {
+  if (ref.current) {
+    var _ref$current, _ref$current$querySel, _ref$current2, _ref$current2$querySe;
+    const height = parseFloat(((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : (_ref$current$querySel = _ref$current.querySelector('tbody')) === null || _ref$current$querySel === void 0 ? void 0 : _ref$current$querySel.style.height) || '0') + parseFloat(((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : (_ref$current2$querySe = _ref$current2.querySelector('tbody')) === null || _ref$current2$querySe === void 0 ? void 0 : _ref$current2$querySe.style.paddingBottom) || '0');
+    return height > ref.current.scrollHeight;
+  }
+  return false;
+}
 
 function useTableEditingListener(table, tableRef, scrollToIndex) {
   const tableMeta = table.options.meta;
   const localization = useLocalization();
-  // save when the row changes
-  // store the last row active index, otherwise everytime tableMeta.editing.saveChanges changes the hook runs again
-  const lastRowActiveIndexRef = React__default.useRef(tableMeta.rowActive.rowActiveIndex);
   useLazyEffect(() => {
-    if (tableMeta.rowActive.rowActiveIndex !== lastRowActiveIndexRef.current) {
-      lastRowActiveIndexRef.current = tableMeta.rowActive.rowActiveIndex;
-      if (tableMeta.editing.isEditing && lastRowActiveIndexRef.current !== undefined) {
-        tableMeta.editing.saveChanges(table);
+    return () => {
+      if (tableMeta.editing.isEditing && tableMeta.rowActive.rowActiveIndex !== undefined) {
+        var _table$getRowModel$ro;
+        tableMeta.editing.saveChanges(table, (_table$getRowModel$ro = table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex]) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.id);
       }
-    }
+    };
   }, [tableMeta.rowActive.rowActiveIndex]);
   // show a warning if the user navigates away without triggering save, such as using the browser back/forward button
   const hasChanges = tableMeta.editing.hasChanges();
@@ -18728,6 +18947,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
       const _temp9 = _forOf(Object.keys(changes), function (rowId) {
         const status = getRowStatus(rowId);
         return _catch(function () {
+          var _changes$rowId;
           function _temp8(_result) {
             return _exit ? _result : Promise.resolve(handleSave(changeSet)).then(function () {
               // cleanup changes, we don't need them after saving
@@ -18739,14 +18959,15 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
               }, DELAY_BEFORE_REMOVING_SAVE_STATUS);
             });
           }
+          const rowChanges = (_changes$rowId = changes[rowId]) !== null && _changes$rowId !== void 0 ? _changes$rowId : {};
           // don't try to save if - already saving, or there are known errors
-          if (status === 'saving' || status === 'errored') {
+          if (!Object.keys(rowChanges).length || status === 'saving' || status === 'errored') {
             return;
           }
           setRowStatus(rowId, 'saving');
           const changeSet = {
             ...state.changes.originals[rowId],
-            ...changes[rowId]
+            ...rowChanges
           };
           // if we had to create a temporary id, delete it first - it's our data, not theirs
           if (isTemporaryRow(changeSet[rowIdentityAccessor])) {
@@ -18809,7 +19030,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
       return Promise.reject(e);
     }
   };
-  const onCellChanged = function (cell, rowIndex, shouldRunUpdaters = true) {
+  const onCellChanged = function (cell, rowIndex, nextValue, shouldRunUpdaters = true) {
     try {
       function _temp6() {
         var _state$changes$errors11;
@@ -18851,7 +19072,7 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
         }
         // create a projection of the next state, so we can act against it
         const nextChanges = {
-          ...state.changes.rows[cell.row.id],
+          ...changes,
           ...updatesForOtherCells
         };
         const nextMoveReasons = {
@@ -18860,10 +19081,11 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
         const nextCellErrors = {
           ...((_state$changes$errors11 = state.changes.errors[cell.row.id]) === null || _state$changes$errors11 === void 0 ? void 0 : _state$changes$errors11.cells)
         };
-        // run validation
+        // run validation - if there are changes, and if there is an original stored
         let validationErrors = {};
         const _temp3 = function () {
-          if (validator) {
+          if (validator && Object.keys(nextChanges).length && state.changes.originals[cell.row.id]) {
+            // merge with the original so we get a full row
             const nextRowValue = {
               ...state.changes.originals[cell.row.id],
               ...changes,
@@ -18876,8 +19098,13 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
         }();
         return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
       }
-      const changes = state.changes.rows[cell.row.id];
-      if (!changes) {
+      const changes = nextValue !== undefined ? {
+        ...state.changes.rows[cell.row.id],
+        [cell.column.id]: nextValue
+      } : {
+        ...state.changes.rows[cell.row.id]
+      };
+      if (!Object.keys(changes).length) {
         return Promise.resolve();
       }
       let updatesForOtherCells = {};
@@ -19089,30 +19316,44 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
 function useTableEditing(isEnabled = false, handleSave, handleChange, handleCreate, rowIdentityAccessor, validator) {
   const createRow = function (table, scrollToIndex, row) {
     try {
-      if (!handleCreate) {
-        return Promise.resolve();
-      }
-      const tableMeta = table.options.meta;
-      return Promise.resolve(tableMeta.editing.saveChanges(table)).then(function (saved) {
-        if (!saved) {
-          return;
-        }
+      let _exit = false;
+      function _temp2(_result) {
+        if (_exit) return _result;
         const changeset = row !== null && row !== void 0 ? row : handleCreate();
         try {
           if (changeset) {
-            const rowId = pendingChangesFns.insertTemporaryRow(changeset);
-            table.getRow(rowId).pin('bottom');
+            const newRowId = pendingChangesFns.insertTemporaryRow(changeset);
+            // reset before changing row otherwise the cell changes and validation might run
+            setLastFocusedCellIndex(undefined);
             // set the active row to the new row before toggling editing on
             const temporaryRows = tableMeta.editing.temporaryRows;
             const nextRowIndex = temporaryRows.length ? tableMeta.length + 1 : tableMeta.length;
             tableMeta.rowActive.setRowActiveIndex(nextRowIndex);
-            toggleEditing(true, table, scrollToIndex);
-            setLastFocusedCellIndex(undefined);
+            // wait until set states have run
+            requestAnimationFrame(() => {
+              toggleEditing(true, table, scrollToIndex, false);
+              table.getRow(newRowId).pin('bottom');
+            });
           }
         } catch (error) {
           console.error(error);
         }
-      });
+      }
+      if (!handleCreate) {
+        return Promise.resolve();
+      }
+      const tableMeta = table.options.meta;
+      const _temp = function () {
+        if (tableMeta.rowActive.rowActiveIndex !== undefined) {
+          var _table$getRowModel$ro2;
+          return Promise.resolve(tableMeta.editing.saveChanges(table, (_table$getRowModel$ro2 = table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex]) === null || _table$getRowModel$ro2 === void 0 ? void 0 : _table$getRowModel$ro2.id)).then(function (saved) {
+            if (!saved) {
+              _exit = true;
+            }
+          });
+        }
+      }();
+      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -19126,24 +19367,26 @@ function useTableEditing(isEnabled = false, handleSave, handleChange, handleCrea
   // store the last focused cell, so that up/down arrow key navigation remains in the same column
   const [lastFocusedCellIndex, setLastFocusedCellIndex] = React__default.useState(undefined);
   const pendingChangesFns = usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, validator);
-  function toggleEditing(enabled, table, scrollToIndex) {
-    var _tableMeta$rowActive$, _table$getRowModel$ro;
-    if (!enabled) {
-      // save
-      pendingChangesFns.saveChanges(table);
+  function toggleEditing(enabled, table, scrollToIndex, doSave = true) {
+    const tableMeta = table.options.meta;
+    if (enabled) {
+      var _tableMeta$rowActive$, _table$getRowModel$ro;
+      const index = (_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0;
+      if (tableMeta.rowActive.rowActiveIndex === undefined) {
+        tableMeta.rowActive.setRowActiveIndex(index);
+      }
+      if (!isTemporaryRow((_table$getRowModel$ro = table.getRowModel().rows[index]) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.id)) {
+        scrollToIndex(index);
+      }
+    } else if (!enabled) {
       // reset detailed mode
       toggleDetailedMode(false);
       // reset the last index back to the first focusable element, when editing gets turned off
       setLastFocusedCellIndex(undefined);
     }
-    const tableMeta = table.options.meta;
-    const index = (_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0;
-    if (tableMeta.rowActive.rowActiveIndex === undefined) {
-      tableMeta.rowActive.setRowActiveIndex(index);
-    }
     setEditing(enabled);
-    if (!isTemporaryRow((_table$getRowModel$ro = table.getRowModel().rows[index]) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.id)) {
-      scrollToIndex(index);
+    if (doSave) {
+      pendingChangesFns.saveChanges(table);
     }
   }
   return {
@@ -19415,20 +19658,26 @@ function EditingControlCell(props) {
     if (nextValue !== value) {
       tableMeta.editing.setCellValue(cell, nextValue);
       if (hasNonTextControl) {
-        tableMeta.editing.onCellChanged(cell, rowIndex);
+        requestAnimationFrame(() => tableMeta.editing.onCellChanged(cell, rowIndex, nextValue));
       }
     }
   };
-  const handleBlur = () => {
+  function blur() {
     tableMeta.editing.toggleDetailedMode(false);
-    tableMeta.editing.onCellChanged(cell, rowIndex, !hasNonTextControl);
+    tableMeta.editing.onCellChanged(cell, rowIndex, undefined, !hasNonTextControl);
+  }
+  const handleBlur = event => {
+    if (isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget)) {
+      return;
+    }
+    blur();
   };
   // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)
   React__default.useEffect(() => {
     const ref = cellRef.current;
     return () => {
       if (document.activeElement === ref || isElementInsideOrTriggeredFromContainer(document.activeElement, ref)) {
-        handleBlur();
+        blur();
       }
     };
   }, []);
@@ -19852,14 +20101,13 @@ function useTable3(props, ref) {
         hasChanges: editing.hasChanges(rowId),
         hasErrors: editing.hasRowErrors(rowId),
         onDiscard: () => {
+          editing.discardChanges(rowId, table);
           if (editing.temporaryRows.length) {
-            tableMeta.rowActive.setRowActiveIndex(undefined);
-            setTimeout(() => {
+            requestAnimationFrame(() => {
               var _editing$createRowBut;
               return (_editing$createRowBut = editing.createRowButtonRef.current) === null || _editing$createRowBut === void 0 ? void 0 : _editing$createRowBut.focus();
-            }, 50);
+            });
           }
-          editing.discardChanges(rowId, table);
         },
         onEditingSave: function () {
           try {
@@ -19925,7 +20173,9 @@ function Alert$1(props) {
   // generate links to each invalid row, to go into the error message
   const links = [];
   const visibleColumns = table.getVisibleFlatColumns().map(c => c.id);
-  const rowIdentityColumn = tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor)) ? table.getColumn(String(tableMeta.rowIdentityAccessor)) : undefined;
+  const rowIdentityColumn = tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor)) ?
+  // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505
+  table.getAllColumns().find(x => x.id === String(tableMeta.rowIdentityAccessor)) : undefined;
   pendingChangesWithErrors.forEach((pendingChangeWithError, index) => {
     // if appropriate, concatenate the item with the text "and"
     if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {
@@ -20047,10 +20297,10 @@ function CreateNewRow(props) {
   var _temporaryRows$0$tabl, _temporaryRows$, _table$getState$colum;
   const {
     buttonRef,
+    isScrolled,
     scrollToIndex,
     table,
-    tableMeta,
-    tableRef
+    tableMeta
   } = props;
   const {
     texts
@@ -20083,11 +20333,9 @@ function CreateNewRow(props) {
       keys: shortcut
     });
   }
-  const isScrolled = tableRef.current ? tableRef.current.scrollHeight > tableRef.current.clientHeight : false;
   const className = cn('group/row border-grey-300 !sticky z-[21]', {
     'bottom-10': tableMeta.footer.isEnabled,
     'bottom-0': !tableMeta.footer.isEnabled,
-    'border-t-2': isScrolled,
     'border-b': !isScrolled
   });
   return /*#__PURE__*/React__default.createElement("tr", {
@@ -20112,6 +20360,7 @@ function CreateNewRow(props) {
 function TemporaryRow(props) {
   const {
     createRowButtonRef,
+    isScrolled,
     table,
     tableMeta,
     tableRef
@@ -20174,10 +20423,9 @@ function TemporaryRow(props) {
       }
     }
   };
-  const isScrolled = tableRef.current ? tableRef.current.scrollHeight > tableRef.current.clientHeight : false;
   const className = cn('group/row border-grey-300 !sticky z-[22]', {
-    'bottom-[calc(5rem_+_3px)] data-[row-editing-move]:bottom-[calc(5rem_+_2px)]': tableMeta.footer.isEnabled,
-    'bottom-[calc(2.5rem_+_3px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_2px)]': !tableMeta.footer.isEnabled,
+    'bottom-[calc(5rem_+_2px)] data-[row-editing-move]:bottom-[calc(5rem_+_2px)]': tableMeta.footer.isEnabled,
+    'bottom-[calc(2.5rem_+_2px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_2px)]': !tableMeta.footer.isEnabled,
     'border-t-2 shadow-[0px_-5px_20px_0px_rgba(0,0,0,0.1)] [&>td]:!border-b-0': isScrolled
   });
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, table.getBottomRows().map(row => (/*#__PURE__*/React__default.createElement(Row, {
@@ -20213,6 +20461,17 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
   };
   const hasAlertErrors = table3.meta.editing.getErrorsShownInAlert().length;
   const hasCreateWorkflow = table3.meta.editing.isEnabled && props.onEditingCreate;
+  const isScrolled = isTableScrolled(table3.ref);
+  let createWorkflow;
+  if (hasCreateWorkflow) {
+    createWorkflow = /*#__PURE__*/React__default.createElement(CreateNewRow, {
+      buttonRef: table3.meta.editing.createRowButtonRef,
+      isScrolled: isScrolled,
+      scrollToIndex: table3.renderer.scrollToIndex,
+      table: table3.instance,
+      tableMeta: table3.meta
+    });
+  }
   return /*#__PURE__*/React__default.createElement(Table, null, /*#__PURE__*/React__default.createElement(Table.Toolbar, {
     table: table3
   }, table3.meta.editing.isEnabled ? (/*#__PURE__*/React__default.createElement(Editing, {
@@ -20225,19 +20484,15 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
     tableRef: table3.ref
   })) : null, /*#__PURE__*/React__default.createElement(Table.Grid, Object.assign({}, gridAttributes, {
     "data-taco": "table3",
+    footerRows: hasCreateWorkflow && isScrolled ? createWorkflow : undefined,
     table: table3
   }), hasCreateWorkflow ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TemporaryRow, {
     createRowButtonRef: table3.meta.editing.createRowButtonRef,
+    isScrolled: isScrolled,
     table: table3.instance,
     tableMeta: table3.meta,
     tableRef: table3.ref
-  }), /*#__PURE__*/React__default.createElement(CreateNewRow, {
-    buttonRef: table3.meta.editing.createRowButtonRef,
-    scrollToIndex: table3.renderer.scrollToIndex,
-    table: table3.instance,
-    tableMeta: table3.meta,
-    tableRef: table3.ref
-  }))) : null));
+  }), !isScrolled ? createWorkflow : null)) : null));
 });
 const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const stringifiedChildren = String(props.children);