@economic/taco 2.34.0 → 2.35.0

package/dist/taco.cjs.development.js

@@ -1239,6 +1239,21 @@ function IconDocumentRejectedRequest(props, svgRef) {
 }
 var DocumentRejectedRequest = /*#__PURE__*/React.forwardRef(IconDocumentRejectedRequest);
 
+function IconDocumentSigned(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: "M14.293 2.293A1 1 0 0013.586 2H5.75A1.75 1.75 0 004 3.75v16.5c0 .966.784 1.75 1.75 1.75h12.5A1.75 1.75 0 0020 20.25V8.414a1 1 0 00-.293-.707l-5.414-5.414zM5.75 3.5H13v3.75l.006.144A1.75 1.75 0 0014.75 9h3.75v11.25l-.007.057a.25.25 0 01-.243.193H5.75l-.057-.007a.25.25 0 01-.193-.243V3.75l.007-.057A.25.25 0 015.75 3.5zm8.75 1.121V7.25a.25.25 0 00.193.243l.057.007h2.63L14.5 4.621zm-6.693 9.425C8.183 12.37 9.194 11 10.43 11c1.547 0 1.796 1.624 1 3.337a6.972 6.972 0 01-1.424 2.009l-.156.148.138-.007.17-.017c1.058-.13 1.702-.687 2.014-1.725l.044-.16.026-.08c.239-.613 1.208-.407 1.13.292a10.03 10.03 0 00-.074 1.205l.006.168.084-.093.202-.245c.451-.532.863-.748 1.332-.404.185.135.278.313.343.543l.019.072.033.156.064.387.087-.088.147-.16.172-.202.197-.242.22-.284.23-.312.057-.067a.59.59 0 01.898.758l-.133.182-.252.334-.127.162c-.665.834-1.147 1.225-1.605 1.266-.419.037-.725-.198-.889-.556a1.83 1.83 0 01-.128-.403l-.016-.081-.08.09-.093.096c-.583.591-1.13.773-1.585.251l-.068-.084-.054-.08a1.31 1.31 0 01-.128-.29l-.011-.04-.098.082-.152.112c-.568.398-1.28.616-2.126.645l-.2.003-.167-.005a1.862 1.862 0 01-.843-.253l-.016-.01-.077.046-.256.137a6.378 6.378 0 01-.8.342l-.222.072-.078.018a.59.59 0 01-.267-1.145 5.16 5.16 0 00.806-.324l.15-.08-.043-.116-.056-.188c-.133-.511-.144-1.121-.036-1.775l.031-.17.038-.181zm2.617-.347c.422-.975.323-1.52.004-1.52-.545 0-1.255 1.006-1.502 2.273-.09.462-.108.86-.061 1.178l.025.14.082-.07.197-.186a5.84 5.84 0 001.1-1.488l.091-.185.064-.142z",
+    fill: "currentColor"
+  }));
+}
+var DocumentSigned = /*#__PURE__*/React.forwardRef(IconDocumentSigned);
+
 function IconDocumentSplit(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1763,6 +1778,21 @@ function IconHeightTall(props, svgRef) {
 }
 var HeightTall = /*#__PURE__*/React.forwardRef(IconHeightTall);
 
+function IconHome2(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: "M11.116 2.823a1.25 1.25 0 011.768 0L17.25 7.19V6a.75.75 0 011.5 0v2.69l2.78 2.78a.75.75 0 01-1.06 1.06l-2.994-2.993-.013-.013L12 4.061l-8.47 8.47a.75.75 0 01-1.06-1.061l8.646-8.647zm1.768 3.25l7 7c.234.235.366.553.366.884v6.293c0 .69-.56 1.25-1.25 1.25h-4c-.69 0-1.25-.56-1.25-1.25V16.5h-3.5v3.75c0 .69-.56 1.25-1.25 1.25H5c-.69 0-1.25-.56-1.25-1.25v-6.293c0-.332.132-.65.366-.884l7-7a1.25 1.25 0 011.768 0zM12 7.311l-6.75 6.75V20h3.5v-3.75c0-.69.56-1.25 1.25-1.25h4c.69 0 1.25.56 1.25 1.25V20h3.5v-5.94L12 7.31z",
+    fill: "currentColor"
+  }));
+}
+var Home2 = /*#__PURE__*/React.forwardRef(IconHome2);
+
 function IconHome(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1776,6 +1806,21 @@ function IconHome(props, svgRef) {
 }
 var Home = /*#__PURE__*/React.forwardRef(IconHome);
 
+function IconId(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: "M20.25 5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0120.25 19H3.75A1.75 1.75 0 012 17.25V6.75C2 5.784 2.784 5 3.75 5h16.5zm0 1.5H3.75a.25.25 0 00-.243.193L3.5 6.75v10.5a.25.25 0 00.193.243l.057.007h16.5a.25.25 0 00.243-.193l.007-.057V6.75a.25.25 0 00-.193-.243L20.25 6.5zm-9.268 7.993c-.316-1.81-1.31-2.714-2.982-2.714-1.673 0-2.667.905-2.982 2.714a1.204 1.204 0 001.184 1.41h3.595a1.204 1.204 0 001.185-1.41zM8 8c.76 0 1.374.77 1.374 1.718 0 .949-.615 1.718-1.374 1.718-.759 0-1.374-.77-1.374-1.718C6.626 8.769 7.24 8 8 8zm11 .75a.75.75 0 00-.75-.75h-6a.75.75 0 000 1.5h6a.75.75 0 00.75-.75zM18.25 14a.75.75 0 010 1.5h-4.5a.75.75 0 010-1.5h4.5zm.75-2.25a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h4.5a.75.75 0 00.75-.75z",
+    fill: "currentColor"
+  }));
+}
+var Id = /*#__PURE__*/React.forwardRef(IconId);
+
 function IconImages(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2266,6 +2311,25 @@ function IconMarket(props, svgRef) {
 }
 var Market = /*#__PURE__*/React.forwardRef(IconMarket);
 
+function IconMastercardOs(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", {
+    d: "M14.698 7.314H9.286v9.66h5.412v-9.66z",
+    fill: "#FF5A00"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9.646 12.144c0-1.963.929-3.704 2.354-4.83A6.178 6.178 0 008.185 6C4.766 6 2 8.748 2 12.144s2.766 6.143 6.185 6.143A6.178 6.178 0 0012 16.973a6.117 6.117 0 01-2.354-4.83z",
+    fill: "#EB001B"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M22 12.144c0 3.396-2.766 6.143-6.185 6.143A6.178 6.178 0 0112 16.973a6.095 6.095 0 002.354-4.83A6.146 6.146 0 0012 7.315 6.168 6.168 0 0115.813 6C19.233 6 22 8.766 22 12.144z",
+    fill: "#F79E1B"
+  }));
+}
+var MastercardOs = /*#__PURE__*/React.forwardRef(IconMastercardOs);
+
 function IconMatchAmount(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2435,6 +2499,22 @@ function IconNote(props, svgRef) {
 }
 var Note = /*#__PURE__*/React.forwardRef(IconNote);
 
+function IconNovemberFirst(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", {
+    d: "M21.484 8.828C19.73 3.592 14.065.768 8.829 2.519 3.592 4.271.767 9.936 2.519 15.172c1.752 5.237 7.418 8.06 12.655 6.308a9.997 9.997 0 006.31-12.653z",
+    fill: "#0D2840"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M13.977 7.263v5.445l-4.14-5.445H7.264l.78 1.156v7.686h1.919v-5.619l4.28 5.62H15.9V7.262h-1.922z",
+    fill: "#2CD7B3"
+  }));
+}
+var NovemberFirst = /*#__PURE__*/React.forwardRef(IconNovemberFirst);
+
 function IconNumbers(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
@@ -3486,6 +3566,7 @@ const icons = {
   'document-preview': DocumentPreview,
   'document-received': DocumentReceived,
   'document-rejected-request': DocumentRejectedRequest,
+  'document-signed': DocumentSigned,
   'document-split': DocumentSplit,
   'document-time': DocumentTime,
   document: Document,
@@ -3525,7 +3606,9 @@ const icons = {
   'height-medium': HeightMedium,
   'height-short': HeightShort,
   'height-tall': HeightTall,
+  home2: Home2,
   home: Home,
+  id: Id,
   images: Images,
   import: Import,
   'inbox-einvoicing': InboxEinvoicing,
@@ -3562,6 +3645,7 @@ const icons = {
   'log-out': LogOut,
   log: Log,
   market: Market,
+  'mastercard-os': MastercardOs,
   'match-amount': MatchAmount,
   'match-entries': MatchEntries,
   menu: Menu,
@@ -3575,6 +3659,7 @@ const icons = {
   'note-follow-up': NoteFollowUp,
   'note-read': NoteRead,
   note: Note,
+  'november-first': NovemberFirst,
   numbers: Numbers,
   'partner-api': PartnerApi,
   'payment-paid': PaymentPaid,
@@ -4662,7 +4747,8 @@ const defaultLocalisationTexts = {
     open: 'Open'
   },
   drawer: {
-    close: 'Close'
+    close: 'Close',
+    back: 'Back'
   }
 };
 const defaultLocalizationContext = {
@@ -5217,6 +5303,11 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/React.forwardRef(function In
         event.preventDefault();
         const position = event.key === 'End' ? event.currentTarget.value.length : 0;
         event.currentTarget.setSelectionRange(position, position);
+        // Necessary for ensuring the cursor is scrolled into view when using Home/End keys on Windows
+        if (internalRef.current) {
+          const scrollPosition = event.key === 'End' ? internalRef.current.scrollWidth : 0;
+          internalRef.current.scrollLeft = scrollPosition;
+        }
       }
     }
     if (typeof onKeyDown === 'function') {
@@ -6312,6 +6403,13 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
     texts
   } = useLocalization();
   const className = cn('inline-flex w-full text-black font-normal', externalClassName);
+  const popoverContentRef = React.useRef(null);
+  const handleOpenAutofocus = React.useCallback(e => {
+    var _popoverContentRef$cu, _popoverContentRef$cu2;
+    e.preventDefault();
+    const currentDay = (_popoverContentRef$cu = popoverContentRef === null || popoverContentRef === void 0 ? void 0 : (_popoverContentRef$cu2 = popoverContentRef.current) === null || _popoverContentRef$cu2 === void 0 ? void 0 : _popoverContentRef$cu2.querySelector('table button[name="day"][aria-selected="true"]')) !== null && _popoverContentRef$cu !== void 0 ? _popoverContentRef$cu : null;
+    currentDay === null || currentDay === void 0 ? void 0 : currentDay.focus();
+  }, [popoverContentRef]);
   return /*#__PURE__*/React.createElement("span", {
     className: className,
     "data-taco": "datepicker",
@@ -6322,10 +6420,13 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
       disabled: input.disabled || input.readOnly,
       icon: "calendar",
       tabIndex: -1,
-      popover: props => ( /*#__PURE__*/React.createElement(Popover, Object.assign({}, props), /*#__PURE__*/React.createElement(Popover.Content, null, ({
+      popover: props => ( /*#__PURE__*/React.createElement(Popover, Object.assign({}, props), /*#__PURE__*/React.createElement(Popover.Content, {
+        onOpenAutoFocus: handleOpenAutofocus
+      }, ({
         close
       }) => ( /*#__PURE__*/React.createElement("div", {
-        className: "-m-3 flex"
+        className: '[&_button[name="day"]:focus]:yt-focus -m-3 flex',
+        ref: popoverContentRef
       }, /*#__PURE__*/React.createElement(Calendar$1, Object.assign({}, calendar, {
         onChange: (date, event) => {
           calendar.onChange(date, event);
@@ -6682,6 +6783,7 @@ const useCurrentMenu = () => {
 const DrawerContext = /*#__PURE__*/React.createContext({
   closeOnEscape: true,
   showCloseButton: true,
+  onClickBack: () => {},
   onClose: () => {},
   onResize: () => {},
   props: {},
@@ -6713,7 +6815,7 @@ const getDrawerContentClassNames = (size, variant, open) => {
 const getDrawerContainerClassNames = variant => {
   return cn('bg-white mx-auto absolute h-full w-full flex flex-col ', {
     'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]': variant === 'overlay',
-    'border-l border-grey h-full': variant === 'embedded'
+    'border-l border-grey-300 h-full': variant === 'embedded'
   });
 };
 const getDrawerDragHandlerClassNames = () => {
@@ -6779,24 +6881,55 @@ const RenderPropWrapper$2 = /*#__PURE__*/React__default.forwardRef(function Rend
     ...renderProps
   });
 });
-const Title$2 = /*#__PURE__*/React__default.forwardRef(function DrawerTitle(props, ref) {
+const Title$2 = /*#__PURE__*/React__default.forwardRef(function DrawerTitle(props, externalRef) {
   const {
     className,
     children,
     ...otherProps
   } = props;
+  const ref = useMergedRef(externalRef);
+  const [style, setStyle] = React__default.useState({});
+  const {
+    texts
+  } = useLocalization();
+  const {
+    onClickBack
+  } = useCurrentDrawer();
   /**
    * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,
-   * where we might want to hide the grey separator. For this reason separator was rendedr with using of classNames,
-   * so it can be easily overriden in exceptional scenarious.
+   * where we might want to hide the grey separator. For this reason separator was rendered with using of classNames,
+   * so it can be easily overriden in exceptional scenarios.
    *  */
-  const cName = cn('grow-0 py-4 pl-4 justify-self-start mb-0 border-b-[1px] border-grey-300 flex items-center', className);
+  const cName = cn('grow-0 py-4 px-4 justify-self-start mb-0 border-b-[1px] border-grey-300 flex items-start', className);
+  React__default.useEffect(() => {
+    var _ref$current, _drawer$querySelector, _closeButton$offsetWi, _drawer$querySelector2, _actionsWrapper$offse;
+    const drawer = ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.closest('[data-taco="drawer"]');
+    // This is the margin amount that we need to deduct from the margins to align with the design
+    const marginAdjust = 4;
+    const closeButton = (_drawer$querySelector = drawer === null || drawer === void 0 ? void 0 : drawer.querySelector(`[aria-label="${texts.drawer.close}"]`)) !== null && _drawer$querySelector !== void 0 ? _drawer$querySelector : null;
+    const closeButtonWidth = (_closeButton$offsetWi = closeButton === null || closeButton === void 0 ? void 0 : closeButton.offsetWidth) !== null && _closeButton$offsetWi !== void 0 ? _closeButton$offsetWi : 0;
+    const closeButtonRightMargin = 8;
+    const actionsWrapper = (_drawer$querySelector2 = drawer === null || drawer === void 0 ? void 0 : drawer.querySelector(`#taco-drawer-actions[data-taco="group"]`)) !== null && _drawer$querySelector2 !== void 0 ? _drawer$querySelector2 : null;
+    const actionsWrapperWidth = (_actionsWrapper$offse = actionsWrapper === null || actionsWrapper === void 0 ? void 0 : actionsWrapper.offsetWidth) !== null && _actionsWrapper$offse !== void 0 ? _actionsWrapper$offse : 0;
+    const actionsWrapperRightMargin = 8;
+    const marginRight = closeButtonWidth + actionsWrapperWidth + closeButtonRightMargin + actionsWrapperRightMargin - marginAdjust;
+    setStyle({
+      marginRight
+    });
+  }, [ref, texts.drawer.close]);
   return /*#__PURE__*/React__default.createElement(DialogPrimitive.Title, Object.assign({
     className: cName
   }, otherProps, {
     ref: ref
-  }), /*#__PURE__*/React__default.createElement("span", {
-    className: "line-clamp-2 inline-block w-4/6 overflow-y-hidden"
+  }), onClickBack ? ( /*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "discrete",
+    "aria-label": texts.drawer.back,
+    className: "mr-3 text-base",
+    icon: "chevron-left",
+    onClick: onClickBack
+  })) : null, /*#__PURE__*/React__default.createElement("span", {
+    className: "line-clamp-2 inline-block overflow-y-hidden",
+    style: style
   }, children));
 });
 const Footer$2 = /*#__PURE__*/React__default.forwardRef(function DrawerFooter(props, ref) {
@@ -6819,8 +6952,10 @@ const Actions = /*#__PURE__*/React__default.forwardRef(function Actions(props, r
     ...otherProps
   } = props;
   const cName = cn('absolute top-0 right-10 mr-[8px] mt-4', className);
+  // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title
   return /*#__PURE__*/React__default.createElement(Group, Object.assign({}, otherProps, {
     className: cName,
+    id: "taco-drawer-actions",
     ref: ref
   }));
 });
@@ -6934,8 +7069,8 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
     };
   }, [size, variant, open]);
   const handleEscapeKeyDown = event => {
-    var _ref$current;
-    const isTargetInsideDrawerContent = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contains(event.target);
+    var _ref$current2;
+    const isTargetInsideDrawerContent = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.contains(event.target);
     if (isTargetInsideDrawerContent) {
       if (!closeOnEscape) {
         event.preventDefault();
@@ -7065,6 +7200,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(props, ref) {
     closeOnEscape = true,
     onResize,
     onClose,
+    onClickBack,
     size = 'md',
     trigger,
     children,
@@ -7081,6 +7217,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(props, ref) {
   const [outlet, setOutlet] = React.useState();
   const context = React.useMemo(() => ({
     closeOnEscape,
+    onClickBack,
     onClose,
     onResize,
     props: otherProps,
@@ -7092,7 +7229,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(props, ref) {
     focusTrap,
     showCloseButton,
     outlet
-  }), [closeOnEscape, open, setOpen, otherProps, variant, onResize, onClose, size, focusTrap, showCloseButton, outlet]);
+  }), [closeOnEscape, open, setOpen, otherProps, variant, onResize, onClose, size, focusTrap, showCloseButton, outlet, onClickBack]);
   // this prevents two drawers being open at once and used when one drawer getting opened before another one got closed.
   const close = React.useCallback(() => {
     setOpen(false);
@@ -7456,6 +7593,7 @@ Switch.displayName = 'Switch';
 const ToggleItem = /*#__PURE__*/React__default.forwardRef(function Toggle(props, ref) {
   const {
     controlRef,
+    onToggle,
     ...attributes
   } = props;
   function handleClick(event) {
@@ -7466,25 +7604,23 @@ const ToggleItem = /*#__PURE__*/React__default.forwardRef(function Toggle(props,
     if (event.isDefaultPrevented()) {
       return;
     }
-    // If event target is not a control or not an element inside the control, then trigger click of the control
-    if (event.target !== controlRef.current || !((_controlRef$current = controlRef.current) !== null && _controlRef$current !== void 0 && _controlRef$current.contains(event.target))) {
-      var _controlRef$current2;
-      (_controlRef$current2 = controlRef.current) === null || _controlRef$current2 === void 0 ? void 0 : _controlRef$current2.click();
+    // If event target is not a control and not an element inside the control, then trigger click of the control
+    if (event.target !== controlRef.current && !((_controlRef$current = controlRef.current) !== null && _controlRef$current !== void 0 && _controlRef$current.contains(event.target))) {
+      onToggle();
       return;
     }
   }
   function handleKeyDown(event) {
-    var _controlRef$current3;
+    var _controlRef$current2;
     if (typeof props.onKeyDown === 'function') {
       props.onKeyDown(event);
     }
     if (event.isDefaultPrevented()) {
       return;
     }
-    // If event target is not a control or not an element inside the control, then send appropriate "activate" keyboard shortcuts to the control as a click
-    if ((event.key === 'Enter' || event.key === ' ') && (event.target !== controlRef.current || !((_controlRef$current3 = controlRef.current) !== null && _controlRef$current3 !== void 0 && _controlRef$current3.contains(event.target)))) {
-      var _controlRef$current4;
-      (_controlRef$current4 = controlRef.current) === null || _controlRef$current4 === void 0 ? void 0 : _controlRef$current4.click();
+    // If event target is not a control and not an element inside the control, then send appropriate "activate" keyboard shortcuts to the control as a click
+    if ((event.key === 'Enter' || event.key === ' ') && event.target !== controlRef.current && !((_controlRef$current2 = controlRef.current) !== null && _controlRef$current2 !== void 0 && _controlRef$current2.contains(event.target))) {
+      onToggle();
       return;
     }
   }
@@ -7498,44 +7634,56 @@ const ToggleItem = /*#__PURE__*/React__default.forwardRef(function Toggle(props,
 });
 const Switch$1 = /*#__PURE__*/React__default.forwardRef(function Switch$1(props, ref) {
   const {
-    checked,
+    checked: externalChecked,
     onChange,
     ...attributes
   } = props;
+  const [checked, setChecked] = React__default.useState(externalChecked);
   const switchRef = React__default.useRef(null);
+  const toggle = React__default.useCallback(() => {
+    setChecked(!checked);
+    onChange(!checked);
+  }, [checked, onChange]);
   const control = /*#__PURE__*/React__default.createElement(Switch, {
     checked: checked,
     className: "group-hover/toggle:[&[aria-checked=false]]:bg-grey-700 group-hover/toggle:[&[aria-checked=true]]:bg-blue-700",
     disabled: props.disabled,
-    onChange: onChange,
+    onChange: toggle,
     ref: switchRef,
     tabIndex: -1
   });
   return /*#__PURE__*/React__default.createElement(ToggleItem, Object.assign({}, attributes, {
     control: control,
     controlRef: switchRef,
-    ref: ref
+    ref: ref,
+    onToggle: toggle
   }));
 });
 const Checkbox$1 = /*#__PURE__*/React__default.forwardRef(function Switch(props, ref) {
   const {
-    checked,
+    checked: externalChecked,
     onChange,
     ...attributes
   } = props;
+  const [checked, setChecked] = React__default.useState(externalChecked);
   const checkboxRef = React__default.useRef(null);
+  const toggle = React__default.useCallback(() => {
+    setChecked(!checked);
+    onChange(!checked);
+  }, [checked, onChange]);
   const control = /*#__PURE__*/React__default.createElement(Checkbox, {
     checked: checked,
     className: "group-hover/toggle:[&[aria-checked=false]]:border-grey-700 group-hover/toggle:[&[aria-checked=true]]:border-blue-700 group-hover/checkbox:[&[aria-checked=true]]:bg-blue-700",
     disabled: props.disabled,
-    onChange: onChange,
+    onChange: toggle,
     ref: checkboxRef,
     tabIndex: -1
   });
   return /*#__PURE__*/React__default.createElement(ToggleItem, Object.assign({}, attributes, {
     control: control,
     controlRef: checkboxRef,
-    ref: ref
+    ref: ref,
+    onToggle: toggle
   }));
 });
 
@@ -10764,8 +10912,6 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
   // if a search is currently "active", we need to re load all because
   const handleSort = function (sorting) {
     try {
-      // set the sorting so we can track if it changed between loads
-      _lastUsedSorting.current = sorting;
       if (_lastUsedSearch.current) {
         // we're searching, which means we need to refetch all with the correct sorting applied
         loadAll(sorting, _lastUsedFilters.current);
@@ -10780,8 +10926,6 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
   };
   const handleFilter = function (filters) {
     try {
-      // set the filters so we can track if it changed between loads
-      _lastUsedFilters.current = filters;
       if (_lastUsedSearch.current) {
         // we're searching, which means we need to refetch all with the correct sorting applied
         loadAll(_lastUsedSorting.current, filters);
@@ -11073,8 +11217,8 @@ function resetHighlightedColumnIndexes(value, table) {
             }
           }
           if (column.getIsVisible() && column.columnDef.enableGlobalFilter && allowSearch) {
-            var _row$original, _column$columnDef$met;
-            const cellValue = getCellValueAsString((_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original[column.id], (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.dataType);
+            var _column$columnDef$met;
+            const cellValue = getCellValueAsString(get(row.original, column.id), (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.dataType);
             // indexes don't map to sorted data
             if (cellValue !== undefined && isWeakContains(cellValue, value)) {
               indexes.push([rowIndex, columnIndex]);
@@ -12423,7 +12567,7 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
   const handleClickCapture = React__default.useCallback(() => {
     // do this in the next frame, otherwise it remounts the row and prevents row actions on hover from being clickable
     requestAnimationFrame(() => tableMeta.rowActive.setRowActiveIndex(index));
-  }, []);
+  }, [index]);
   // row active
   if (tableMeta.rowActive.isEnabled) {
     attributes['data-row-active'] = tableMeta.rowActive.rowActiveIndex === index ? true : undefined;
@@ -12436,7 +12580,6 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
   }
   // row drag
   if (tableMeta.rowDrag.isEnabled) {
-    attributes.draggable = true;
     attributes['aria-grabbed'] = !!tableMeta.rowDrag.dragging[row.id];
   }
   // row drop
@@ -12866,7 +13009,15 @@ function HeaderMenu(props) {
     icon: "more",
     menu: popoverElement ? undefined : menuProps => ( /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, memoedMenuItems))),
     popover: popoverElement,
-    onClickCapture: event => event.preventDefault()
+    onClickCapture: event => event.preventDefault(),
+    onKeyDown: event => {
+      // Removes focus from the column header menu button so that active row shortcuts execute when Tab,
+      // Shift+Tab, or any other keydown event occurs.
+      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+        var _event$currentTarget;
+        (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.blur();
+      }
+    }
   });
 }
 
@@ -13100,16 +13251,22 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
   })) : null);
 });
 
-const FOCUS_MANAGER_OPTIONS = {
+const FOCUS_MANAGER_OPTIONS_TAB = {
   accept: element => !!element.closest('tr[data-row-active="true"]'),
   tabbable: true
 };
+const FOCUS_MANAGER_OPTIONS_ARROW_KEYS = {
+  accept: element => {
+    const acceptTabbable = isElementInteractive(element) ? element.getAttribute('tabindex') !== '-1' : true;
+    return !!element.closest('tr[data-row-active="true"]') && !hasFocusableElement(element) && acceptTabbable;
+  }
+};
 function useAugmentedFocusManager() {
   const focusManager = focus.useFocusManager();
-  const focusPrevious = () => focusManager.focusPrevious(FOCUS_MANAGER_OPTIONS);
-  const focusNext = () => focusManager.focusNext(FOCUS_MANAGER_OPTIONS);
-  const focusFirst = () => focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
-  const focusLast = () => focusManager.focusLast(FOCUS_MANAGER_OPTIONS);
+  const focusPrevious = (arrowNavigation = false) => focusManager.focusPrevious(arrowNavigation ? FOCUS_MANAGER_OPTIONS_ARROW_KEYS : FOCUS_MANAGER_OPTIONS_TAB);
+  const focusNext = (arrowNavigation = false) => focusManager.focusNext(arrowNavigation ? FOCUS_MANAGER_OPTIONS_ARROW_KEYS : FOCUS_MANAGER_OPTIONS_TAB);
+  const focusFirst = () => focusManager.focusFirst(FOCUS_MANAGER_OPTIONS_TAB);
+  const focusLast = () => focusManager.focusLast(FOCUS_MANAGER_OPTIONS_TAB);
   return {
     focusPrevious,
     focusNext,
@@ -13145,10 +13302,10 @@ function Body(props) {
         let focusedElement;
         switch (event.key) {
           case 'ArrowLeft':
-            focusedElement = isMetaKeyPressed ? focusManager.focusFirst() : focusManager.focusPrevious();
+            focusedElement = isMetaKeyPressed ? focusManager.focusFirst() : focusManager.focusPrevious(true);
             break;
           case 'ArrowRight':
-            focusedElement = isMetaKeyPressed ? focusManager.focusLast() : focusManager.focusNext();
+            focusedElement = isMetaKeyPressed ? focusManager.focusLast() : focusManager.focusNext(true);
             // Scrolls table all the way to the right
             if (isMetaKeyPressed && tableElement) {
               tableElement.scrollLeft = tableElement.scrollWidth;
@@ -15153,6 +15310,9 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     name,
     onChange,
     onCreate,
+    dialogTriggerTitle,
+    dialogTriggerDisabled,
+    dialog,
     onDelete,
     onEdit,
     placeholder,
@@ -15222,6 +15382,9 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     listboxRef,
     multiple,
     onCreate,
+    dialogTriggerTitle,
+    dialogTriggerDisabled,
+    dialog,
     onDelete,
     onEdit,
     open,
@@ -15323,21 +15486,34 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
       setValue(nextValue);
     }
   };
+  const handleCreateInDialog = function (name, color) {
+    try {
+      const _temp2 = function () {
+        if (onCreate && dialog) {
+          const _temp = _catch(function () {
+            return Promise.resolve(onCreate(name, color)).then(function (option) {
+              setValue(option.value);
+              // To avoid memory leak we should bind onClose of dialog with setOpen(false)
+              setOpen(false);
+            });
+          }, function (err) {
+            console.log(err);
+          });
+          if (_temp && _temp.then) return _temp.then(function () {});
+        }
+      }();
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none"', createCollectionClassName());
   return /*#__PURE__*/React__default.createElement(Select2Context.Provider, {
     value: context
   }, /*#__PURE__*/React__default.createElement(PopoverPrimitive.Root, {
     open: open,
     onOpenChange: setOpen
-  }, /*#__PURE__*/React__default.createElement(ControlledHiddenField, {
-    emptyValue: emptyValue,
-    multiple: multiple || tags,
-    name: name,
-    options: flattenedChildren.map(child => child.props.value),
-    parentRef: internalRef,
-    setValue: setValue,
-    value: value
-  }), /*#__PURE__*/React__default.createElement(PopoverPrimitive.Trigger, {
+  }, /*#__PURE__*/React__default.createElement(PopoverPrimitive.Trigger, {
     asChild: true,
     "data-taco": "Select2"
   }, /*#__PURE__*/React__default.createElement(Trigger$7, Object.assign({}, otherProps, {
@@ -15398,7 +15574,24 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
   }, searchQuery === '' ? ( /*#__PURE__*/React__default.createElement(Collection$1, null, initialChildren)) : ( /*#__PURE__*/React__default.createElement(Collection$1, null, filteredChildren)), onCreate ? /*#__PURE__*/React__default.createElement(Create, {
     onCreate: onCreate,
     options: flattenedChildren
-  }) : null)))))));
+  }) : null)), dialog && dialogTriggerTitle && ( /*#__PURE__*/React__default.createElement("span", {
+    className: "border-grey-300 h-9 border-t p-1.5"
+  }, /*#__PURE__*/React__default.createElement(Button$1, {
+    appearance: "discrete",
+    disabled: dialogTriggerDisabled,
+    dialog: dialog(handleCreateInDialog)
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    className: "text-xs",
+    name: "circle-plus"
+  }), " ", dialogTriggerTitle)))))), /*#__PURE__*/React__default.createElement(ControlledHiddenField, {
+    emptyValue: emptyValue,
+    multiple: multiple || tags,
+    name: name,
+    options: flattenedChildren.map(child => child.props.value),
+    parentRef: internalRef,
+    setValue: setValue,
+    value: value
+  })));
 });
 Select2.Option = Option$1;
 Select2.Group = Group$3;
@@ -15708,8 +15901,7 @@ const FilterColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     allColumns,
     filters,
     onChange: handleChange,
-    value = null,
-    ...attributes
+    value = null
   } = props;
   const {
     texts
@@ -15722,13 +15914,13 @@ const FilterColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     message: warning ? texts.table.filters.hiddenColumn : undefined,
     warning: warning,
     className: "min-h-[theme(spacing.8)]"
-  }, /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, attributes, {
+  }, /*#__PURE__*/React__default.createElement(Select2, {
     ref: ref,
     className: "focus:yt-focus !w-32 flex-shrink-0 ",
     emptyValue: null,
     onChange: handleChange,
     value: value
-  }), allColumns.map(column => {
+  }, allColumns.map(column => {
     var _column$columnDef$met, _column$parent, _column$parent$column;
     return /*#__PURE__*/React__default.createElement(Select2.Option, {
       key: column.id,
@@ -15748,19 +15940,18 @@ function FilterComparator(props) {
   const {
     column,
     onChange: handleChange,
-    value,
-    ...attributes
+    value
   } = props;
   const {
     texts
   } = useLocalization();
   const validComparators = guessComparatorsBasedOnControl(column);
-  return /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, attributes, {
+  return /*#__PURE__*/React__default.createElement(Select2, {
     className: "!w-32 flex-shrink-0",
     disabled: !column,
     onChange: handleChange,
     value: value
-  }), validComparators.map(comparator => ( /*#__PURE__*/React__default.createElement(Select2.Option, {
+  }, validComparators.map(comparator => ( /*#__PURE__*/React__default.createElement(Select2.Option, {
     key: comparator,
     value: comparator
   }, getComparatorText(comparator, texts, column)))));
@@ -16268,7 +16459,7 @@ function TableGrid(props) {
     key: props.id,
     header: props,
     scrollToIndex: table.renderer.scrollToIndex
-  }))))))), table.instance.getRowModel().rows.length ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Body, {
+  }))))))), table.instance.getCoreRowModel().rows.length ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Body, {
     enableHorizontalArrowKeyNavigation: enableHorizontalArrowKeyNavigation,
     table: table.instance,
     tableElement: table.ref.current,
@@ -17779,7 +17970,7 @@ const useTableRowCreation = (data, tableRef) => {
   };
 };
 
-function useTableEditingListener(table) {
+function useTableEditingListener(table, tableRef) {
   const tableMeta = table.options.meta;
   const saveChanges = () => {
     requestAnimationFrame(() => {
@@ -17821,6 +18012,20 @@ function useTableEditingListener(table) {
       window.removeEventListener('beforeunload', showUnsavedChangesWarning);
     };
   }, [tableMeta.editing.isEditing, hasChanges]);
+  React__default.useEffect(() => {
+    const onClickOutside = event => {
+      if (tableMeta.editing.isEditing) {
+        var _event$target$getAttr, _event$target;
+        const element = (_event$target$getAttr = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.getAttribute('data-taco')) !== null && _event$target$getAttr !== void 0 ? _event$target$getAttr : '';
+        const insideTable = isElementInsideOrTriggeredFromContainer(event.target, tableRef.current) || element === 'backdrop';
+        if (!insideTable) {
+          saveChanges();
+        }
+      }
+    };
+    document.addEventListener('click', onClickOutside);
+    return () => document.removeEventListener('click', onClickOutside);
+  }, [saveChanges, tableMeta.editing.isEditing]);
 }
 
 function willRowMove(cell, change, rowIndex) {
@@ -17899,14 +18104,6 @@ function useTableEditing(isEnabled = false, handleSave, validator) {
   // changes are saved as soon as the active row changes, so in most cases this will only contain the active row's changes
   // but not always - if validation or server requests fail when saving, those rows remain until the failure is resolved
   const pendingChangesFns = usePendingChanges(isEnabled, handleSave, validator);
-  // if focus leaves the table in any way, trigger a save
-  const handleBlur = React__default.useCallback(event => {
-    // custom event from datepicker, and it doesn't have the relatedTarget property set.
-    const isClosingDatepicker = dateFns.isDate(event.detail);
-    if (event.relatedTarget !== event.currentTarget && !isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget) && !isClosingDatepicker) {
-      pendingChangesFns.saveChanges();
-    }
-  }, [pendingChangesFns.saveChanges]);
   useGlobalKeyDown(isEnabled && isEditing ? {
     key: 's',
     meta: true,
@@ -17923,8 +18120,7 @@ function useTableEditing(isEnabled = false, handleSave, validator) {
     toggleEditing: isEnabled ? toggleEditing : () => undefined,
     lastFocusedCellIndex,
     setLastFocusedCellIndex,
-    ...pendingChangesFns,
-    handleBlur: isEnabled && isEditing ? handleBlur : () => undefined
+    ...pendingChangesFns
   };
 }
 function usePendingChanges(isEnabled, handleSave, validator) {
@@ -18248,7 +18444,7 @@ function RowMoveIndicator(props) {
     if (cellRef.current) {
       if (isActiveRow && !!moveReason) {
         var _cellRef$current$pare;
-        const firstChild = (_cellRef$current$pare = cellRef.current.parentElement) === null || _cellRef$current$pare === void 0 ? void 0 : _cellRef$current$pare.querySelector('td');
+        const firstChild = (_cellRef$current$pare = cellRef.current.parentElement) === null || _cellRef$current$pare === void 0 ? void 0 : _cellRef$current$pare.querySelector(`td[data-taco="cell-control"]`);
         if (cellRef.current === firstChild) {
           var _cellRef$current$pare2;
           setShow(true);
@@ -18448,7 +18644,7 @@ function useEditingCellAutofocus(props) {
         tableElement.scrollTo(props.cell.column.getStart() - columnFreezingOffset, tableElement.scrollTop);
       }
     }
-    if (event.target === event.currentTarget) {
+    if (event.target === event.currentTarget && hasFocusableElement(event.currentTarget)) {
       focusManager.focusNext();
     }
   };
@@ -18503,6 +18699,7 @@ function EditingControlCell(props) {
   const cellAttributes = {
     ...getCellAttributes(cell, index, isHighlighted),
     'data-cell-editing-invalid': error ? true : undefined,
+    'data-taco': 'cell-control',
     onFocus: handleFocus,
     ref: cellRef,
     tabIndex: -1
@@ -18700,16 +18897,24 @@ function EditingActionMenu(props) {
     hasErrors,
     onClear: handleClear,
     onExit: handleExit,
-    onSave: handleSave
+    onSave: handleSave,
+    isLastRow
   } = props;
   const {
     texts
   } = useLocalization();
+  const handleKeyDown = event => {
+    // normally we handle this on change of active row, but when tabbing out of the last row the active row state stays on the last one.
+    if (isLastRow && hasChanges && event.key === 'Tab') {
+      handleSave();
+    }
+  };
   return /*#__PURE__*/React__default.createElement(IconButton, {
     appearance: "transparent",
     "aria-label": texts.table3.editing.actions.tooltip,
     className: "group-[[data-row-editing-status]]/row:hidden",
     icon: "more",
+    onKeyDown: handleKeyDown,
     menu: menuProps => ( /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, /*#__PURE__*/React__default.createElement(Menu$1.Item, {
       icon: "tick",
       disabled: !hasChanges || hasErrors,
@@ -18806,7 +19011,7 @@ function Row$2(props) {
     }
   }, [tableMeta.editing.isEditing, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.lastFocusedCellIndex]);
   const handleFocus = React__default.useCallback(event => {
-    if (tableMeta.editing.isEditing && isActiveRow) {
+    if (tableMeta.editing.isEditing) {
       var _event$target$closest, _event$target$closest2;
       const cellIndex = Number((_event$target$closest = (_event$target$closest2 = event.target.closest('td')) === null || _event$target$closest2 === void 0 ? void 0 : _event$target$closest2.getAttribute('data-cell-index')) !== null && _event$target$closest !== void 0 ? _event$target$closest : undefined);
       if (!isNaN(cellIndex)) {
@@ -18839,7 +19044,8 @@ function useTable3(props, ref) {
       hasErrors: editing.hasRowErrors(rowId),
       onClear: () => editing.resetChanges(rowId),
       onSave: () => editing.saveChanges(rowId),
-      onExit: () => editing.toggleEditing(false)
+      onExit: () => editing.toggleEditing(false),
+      isLastRow: table.meta.rowActive.rowActiveIndex === table.meta.length - 1
     }))] : props.rowActions
   };
   const meta = {
@@ -18847,7 +19053,7 @@ function useTable3(props, ref) {
   };
   const table = useTable(extendedProps, ref, RENDERERS$1, meta);
   // listeners
-  useTableEditingListener(table.instance);
+  useTableEditingListener(table.instance, table.ref);
   React__default.useEffect(() => {
     if (table.ref.current) {
       table.ref.current.instance.toggleEditing = enabled => table.meta.editing.toggleEditing(enabled !== null && enabled !== void 0 ? enabled : editing => !editing);
@@ -19036,15 +19242,9 @@ Group$5.displayName = 'Table3Group';
 const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref) {
   var _table3$meta$editing, _table3$meta$editing2;
   const table3 = useTable3(props, ref);
-  const handleBlur = event => {
-    if (table3.meta.editing.isEditing) {
-      table3.meta.editing.handleBlur(event);
-    }
-  };
   const gridAttributes = {
     'data-table-editing-mode': (_table3$meta$editing = table3.meta.editing) !== null && _table3$meta$editing !== void 0 && _table3$meta$editing.isEditing ? (_table3$meta$editing2 = table3.meta.editing) !== null && _table3$meta$editing2 !== void 0 && _table3$meta$editing2.isDetailedMode ? 'detailed' : 'normal' : undefined,
-    enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing,
-    onBlur: handleBlur
+    enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing
   };
   const hasValidationErrors = table3.meta.editing.hasErrors(table3.instance, table3.ref);
   return /*#__PURE__*/React__default.createElement(Table, null, /*#__PURE__*/React__default.createElement(Table.Toolbar, {