@economic/taco 2.34.1 → 2.35.1

package/dist/taco.cjs.development.js

@@ -4747,7 +4747,8 @@ const defaultLocalisationTexts = {
     open: 'Open'
   },
   drawer: {
-    close: 'Close'
+    close: 'Close',
+    back: 'Back'
   }
 };
 const defaultLocalizationContext = {
@@ -6402,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",
@@ -6412,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);
@@ -6772,6 +6783,7 @@ const useCurrentMenu = () => {
 const DrawerContext = /*#__PURE__*/React.createContext({
   closeOnEscape: true,
   showCloseButton: true,
+  onClickBack: () => {},
   onClose: () => {},
   onResize: () => {},
   props: {},
@@ -6803,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 = () => {
@@ -6869,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) {
@@ -6909,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
   }));
 });
@@ -7024,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();
@@ -7155,6 +7200,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(props, ref) {
     closeOnEscape = true,
     onResize,
     onClose,
+    onClickBack,
     size = 'md',
     trigger,
     children,
@@ -7171,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,
@@ -7182,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);
@@ -7546,6 +7593,7 @@ Switch.displayName = 'Switch';
 const ToggleItem = /*#__PURE__*/React__default.forwardRef(function Toggle(props, ref) {
   const {
     controlRef,
+    onToggle,
     ...attributes
   } = props;
   function handleClick(event) {
@@ -7556,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;
     }
   }
@@ -7588,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
   }));
 });
 
@@ -10854,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);
@@ -10870,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);
@@ -11163,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]);
@@ -12955,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();
+      }
+    }
   });
 }
 
@@ -13189,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,
@@ -13234,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;
@@ -15418,15 +15486,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
   }, /*#__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, {
@@ -15487,7 +15547,15 @@ 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))))), /*#__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;
@@ -18542,7 +18610,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();
     }
   };
@@ -18909,7 +18977,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)) {