@economic/taco 2.27.2 → 2.28.0

package/dist/taco.cjs.development.js

@@ -10,7 +10,7 @@ var cn = _interopDefault(require('clsx'));
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
-var ReactDayPicker = _interopDefault(require('react-day-picker'));
+var reactDayPicker = require('react-day-picker');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var uuid = require('uuid');
 var PopoverPrimitive = require('@radix-ui/react-popover');
@@ -23,9 +23,10 @@ var focus = require('@react-aria/focus');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var HoverCardPrimitive = require('@radix-ui/react-hover-card');
+var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
+var PrimitiveSwitch = require('@radix-ui/react-switch');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
-var PrimitiveSwitch = require('@radix-ui/react-switch');
 var reactPortal = require('@radix-ui/react-portal');
 var reactTable = require('@tanstack/react-table');
 var reactVirtual = require('@tanstack/react-virtual');
@@ -2126,6 +2127,24 @@ function IconLine(props, svgRef) {
 }
 var Line = /*#__PURE__*/React.forwardRef(IconLine);
 
+function IconLinkExternal(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M11 5.5H7.25A1.75 1.75 0 005.5 7.25v9.5c0 .966.784 1.75 1.75 1.75h9.5a1.75 1.75 0 001.75-1.75V13H17v3.75a.25.25 0 01-.25.25h-9.5a.25.25 0 01-.25-.25v-9.5A.25.25 0 017.25 7H11V5.5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M17.75 5.5a.75.75 0 01.743.648l.007.102v3.5a.75.75 0 01-1.493.102L17 9.75V8.06l-3.97 3.97a.75.75 0 01-1.133-.976l.073-.084L15.938 7H14.25a.75.75 0 01-.743-.648L13.5 6.25a.75.75 0 01.648-.743l.102-.007h3.5z",
+    clipRule: "evenodd"
+  }));
+}
+var LinkExternal = /*#__PURE__*/React.forwardRef(IconLinkExternal);
+
 function IconListBulleted(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3520,6 +3539,7 @@ const icons = {
   'ledger-card': LedgerCard,
   lightbulb: Lightbulb,
   line: Line,
+  'link-external': LinkExternal,
   'list-bulleted': ListBulleted,
   'list-search': ListSearch,
   list: List,
@@ -4330,8 +4350,8 @@ const defaultLocalisationTexts = {
   },
   calendar: {
     months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-    weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-    weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    weekdaysShort: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    weekdays: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
     actions: {
       previousMonth: 'Previous month',
       nextMonth: 'Next month',
@@ -4722,8 +4742,6 @@ for (let i = thisYear - 50; i <= thisYear + 10; i += 1) {
 }
 const Navbar = /*#__PURE__*/React.memo(({
   onMonthChange,
-  onNextClick,
-  onPreviousClick,
   value = new Date()
 }) => {
   const {
@@ -4734,15 +4752,21 @@ const Navbar = /*#__PURE__*/React.memo(({
       }
     }
   } = useLocalization();
-  const handleChange = function handleChange(event) {
+  const handleChange = event => {
     const {
       year,
       month
     } = event.target.form;
     onMonthChange(new Date(year.value, month.value));
   };
+  const onNextClick = () => {
+    onMonthChange(new Date(value.getFullYear(), value.getMonth() + 1, value.getDay()));
+  };
+  const onPreviousClick = () => {
+    onMonthChange(new Date(value.getFullYear(), value.getMonth() - 1, value.getDay()));
+  };
   return /*#__PURE__*/React.createElement("div", {
-    className: "mb-1 flex items-center justify-between"
+    className: "mb-3 flex items-center justify-between"
   }, /*#__PURE__*/React.createElement("form", {
     className: "inline-flex space-x-1"
   }, /*#__PURE__*/React.createElement("select", {
@@ -4767,7 +4791,7 @@ const Navbar = /*#__PURE__*/React.memo(({
     appearance: "discrete",
     icon: "chevron-left",
     "aria-label": actions.previousMonth,
-    onClick: () => onPreviousClick(),
+    onClick: onPreviousClick,
     rounded: true
   })), /*#__PURE__*/React.createElement(Tooltip, {
     title: actions.nextMonth
@@ -4775,22 +4799,40 @@ const Navbar = /*#__PURE__*/React.memo(({
     appearance: "discrete",
     icon: "chevron-right",
     "aria-label": actions.nextMonth,
-    onClick: () => onNextClick(),
+    onClick: onNextClick,
     rounded: true
   }))));
 });
-const Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
+const TodayButton = ({
+  handleChange
+}) => {
+  const {
+    texts
+  } = useLocalization();
+  const handleCalendarClickToday = () => {
+    const today = new Date();
+    // set to midday to avoid UTC offset causing dates to be mismatched server side
+    today.setHours(12);
+    today.setMinutes(0);
+    today.setSeconds(0);
+    handleChange(today);
+  };
+  return /*#__PURE__*/React.createElement(reactDayPicker.Button, {
+    className: "cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300",
+    onClick: handleCalendarClickToday
+  }, texts.calendar.actions.today);
+};
+const Calendar$1 = props => {
   const {
     onChange: handleChange,
     value,
     disabledDays,
     ...otherProps
   } = props;
+  const [visibleMonth, setVisibleMonth] = React.useState(value !== null && value !== void 0 ? value : new Date());
   const {
-    locale,
     texts
   } = useLocalization();
-  const [visibleMonth, setVisibleMonth] = React.useState(value !== null && value !== void 0 ? value : new Date());
   React.useEffect(() => {
     if (visibleMonth !== value) {
       setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
@@ -4803,40 +4845,41 @@ const Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
     }
     handleChange(date, event);
   };
-  const handleCalendarClickToday = () => {
-    const today = new Date();
-    // set to midday to avoid UTC offset causing dates to be mismatched server side
-    today.setHours(12);
-    today.setMinutes(0);
-    today.setSeconds(0);
-    handleChange(today);
-  };
   const className = cn('flex bg-white text-xs p-2', otherProps.className);
   return /*#__PURE__*/React.createElement("div", {
     "data-taco": "calendar"
-  }, /*#__PURE__*/React.createElement(ReactDayPicker, Object.assign({}, otherProps, {
+  }, /*#__PURE__*/React.createElement(reactDayPicker.DayPicker, {
     className: className,
+    captionLayout: "dropdown-buttons",
+    weekStartsOn: 1,
     month: visibleMonth,
-    selectedDays: value,
-    locale: locale.substring(0, 2),
-    firstDayOfWeek: 1,
-    months: texts.calendar.months,
-    weekdaysLong: texts.calendar.weekdays,
-    weekdaysShort: texts.calendar.weekdaysShort,
-    navbarElement: navProps => /*#__PURE__*/React.createElement(Navbar, Object.assign({}, navProps, {
-      onMonthChange: setVisibleMonth,
-      value: visibleMonth
-    })),
-    onDayClick: handleDayClick,
-    onMonthChange: setVisibleMonth,
-    onTodayButtonClick: handleCalendarClickToday,
-    captionElement: () => null,
-    todayButton: texts.calendar.actions.today,
     numberOfMonths: 1,
-    ref: ref,
-    disabledDays: disabledDays
-  })));
-});
+    components: {
+      Caption: props => /*#__PURE__*/React.createElement(Navbar, Object.assign({}, props, {
+        onMonthChange: setVisibleMonth,
+        value: visibleMonth
+      })),
+      Footer: () => ( /*#__PURE__*/React.createElement("tfoot", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+        colSpan: 7,
+        className: "text-center"
+      }, /*#__PURE__*/React.createElement(TodayButton, {
+        handleChange: handleChange
+      }))))),
+      HeadRow: () => ( /*#__PURE__*/React.createElement("tr", null, texts.calendar.weekdaysShort.map((weekday, index) => {
+        const label = texts.calendar.weekdays && texts.calendar.weekdays[index];
+        return /*#__PURE__*/React.createElement("th", {
+          key: weekday,
+          "aria-label": label,
+          className: "rdp-head_cell",
+          title: label
+        }, weekday);
+      })))
+    },
+    onDayClick: handleDayClick,
+    selected: value,
+    disabled: disabledDays
+  }));
+};
 
 const isElementTruncated = targetElement => {
   if (targetElement !== null) {
@@ -6716,7 +6759,7 @@ const Title$2 = /*#__PURE__*/React__default.forwardRef(function DrawerTitle(prop
    * 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.
    *  */
-  const cName = cn('grow-0 py-4 pl-4 justyfy-self-start mb-0 border-b-[1px] border-grey-300', className);
+  const cName = cn('grow-0 py-4 pl-4 justify-self-start mb-0 border-b-[1px] border-grey-300 flex items-center', className);
   return /*#__PURE__*/React__default.createElement(DialogPrimitive.Title, Object.assign({
     className: cName
   }, otherProps, {
@@ -7252,6 +7295,228 @@ const HoverCard = props => {
 HoverCard.Trigger = Trigger$5;
 HoverCard.Content = Content$7;
 
+const Group$1 = /*#__PURE__*/React__default.forwardRef(function Group(props, ref) {
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+    "data-taco": "list-group",
+    ref: ref
+  }));
+});
+
+const Item$1 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
+  const {
+    as: Tag = 'div',
+    control,
+    description,
+    disabled,
+    icon,
+    color,
+    tabIndex = 0,
+    title,
+    ...attributes
+  } = props;
+  const iconClassName = cn('flex shrink-0 h-10 w-10 items-center justify-center rounded-md border border-black/10', getSubtleColorShadeClasses(color !== null && color !== void 0 ? color : 'transparent'));
+  return /*#__PURE__*/React__default.createElement(Tag, Object.assign({}, attributes, {
+    "aria-disabled": disabled ? true : undefined,
+    "data-taco": "list-item",
+    ref: ref,
+    tabIndex: disabled ? -1 : tabIndex
+  }), icon ? ( /*#__PURE__*/React__default.createElement("span", {
+    className: iconClassName
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: icon
+  }))) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex grow flex-col justify-center"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "font-bold text-black"
+  }, title), description ? /*#__PURE__*/React__default.createElement("span", {
+    className: "text-grey-700"
+  }, description) : null), /*#__PURE__*/React__default.createElement("div", {
+    className: "text-grey-700 flex shrink-0 items-center"
+  }, control));
+});
+
+const Link = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
+  const control = /*#__PURE__*/React__default.createElement(Icon, {
+    name: props.href.startsWith('http') ? 'link-external' : 'chevron-right'
+  });
+  return /*#__PURE__*/React__default.createElement(Item$1, Object.assign({}, props, {
+    as: "a",
+    control: control,
+    ref: ref
+  }));
+});
+
+const Collapsible = /*#__PURE__*/React__default.forwardRef(function Accordion(props, ref) {
+  const {
+    defaultOpen = false,
+    ...attributes
+  } = props;
+  const [open, setOpen] = React__default.useState(defaultOpen);
+  const control = /*#__PURE__*/React__default.createElement(Icon, {
+    name: open ? 'chevron-up' : 'chevron-down'
+  });
+  return /*#__PURE__*/React__default.createElement(CollapsiblePrimitive.Root, {
+    "data-taco": "list-item-collapsible",
+    disabled: props.disabled,
+    open: open,
+    onOpenChange: setOpen
+  }, /*#__PURE__*/React__default.createElement(CollapsiblePrimitive.Trigger, {
+    asChild: true
+  }, /*#__PURE__*/React__default.createElement(Item$1, Object.assign({}, attributes, {
+    as: "button",
+    control: control,
+    ref: ref
+  }))), /*#__PURE__*/React__default.createElement(CollapsiblePrimitive.Content, null, props.children));
+});
+
+const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
+  const {
+    label,
+    onChange,
+    ...otherProps
+  } = props;
+  const id = useId(props.id);
+  const className = cn('group h-5 w-9 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus', {
+    'mr-2': !!label,
+    'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,
+    'bg-grey-500/50 aria-checked:bg-blue-500/50 cursor-not-allowed': props.disabled
+  }, props.className);
+  let labelledByProps = null;
+  if (label) {
+    labelledByProps = {
+      'aria-labelledby': `${id}-label`,
+      id
+    };
+  }
+  const element = /*#__PURE__*/React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, labelledByProps, {
+    className: className,
+    "data-taco": "switch",
+    onCheckedChange: onChange,
+    ref: ref
+  }), /*#__PURE__*/React.createElement(PrimitiveSwitch.Thumb, {
+    className: "'will-change-transform mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform group-disabled:opacity-50 group-aria-checked:translate-x-[1.1rem]"
+  }));
+  if (label) {
+    const labelContainerClassName = cn('flex self-start cursor-pointer', {
+      'cursor-not-allowed text-grey-300': props.disabled
+    });
+    return /*#__PURE__*/React.createElement("span", {
+      className: labelContainerClassName,
+      "data-taco": "switch-container"
+    }, element, /*#__PURE__*/React.createElement("label", {
+      htmlFor: id,
+      id: `${id}-label`
+    }, label));
+  }
+  return element;
+});
+Switch.displayName = 'Switch';
+
+const ToggleItem = /*#__PURE__*/React__default.forwardRef(function Toggle(props, ref) {
+  const {
+    controlRef,
+    ...attributes
+  } = props;
+  function handleClick(event) {
+    var _controlRef$current;
+    if (typeof props.onClick === 'function') {
+      props.onClick(event);
+    }
+    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();
+      return;
+    }
+  }
+  function handleKeyDown(event) {
+    var _controlRef$current3;
+    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();
+      return;
+    }
+  }
+  const className = cn('group/toggle', props.className);
+  return /*#__PURE__*/React__default.createElement(Item$1, Object.assign({}, attributes, {
+    className: className,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    ref: ref
+  }));
+});
+const Switch$1 = /*#__PURE__*/React__default.forwardRef(function Switch$1(props, ref) {
+  const {
+    checked,
+    onChange,
+    ...attributes
+  } = props;
+  const switchRef = React__default.useRef(null);
+  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,
+    ref: switchRef,
+    tabIndex: -1
+  });
+  return /*#__PURE__*/React__default.createElement(ToggleItem, Object.assign({}, attributes, {
+    control: control,
+    controlRef: switchRef,
+    ref: ref
+  }));
+});
+const Checkbox$1 = /*#__PURE__*/React__default.forwardRef(function Switch(props, ref) {
+  const {
+    checked,
+    onChange,
+    ...attributes
+  } = props;
+  const checkboxRef = React__default.useRef(null);
+  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,
+    ref: checkboxRef,
+    tabIndex: -1
+  });
+  return /*#__PURE__*/React__default.createElement(ToggleItem, Object.assign({}, attributes, {
+    control: control,
+    controlRef: checkboxRef,
+    ref: ref
+  }));
+});
+
+const Button$2 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
+  return /*#__PURE__*/React__default.createElement(Item$1, Object.assign({}, props, {
+    as: "button",
+    ref: ref
+  }));
+});
+
+function List$1(props) {
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+    "data-taco": "list"
+  }));
+}
+List$1.Button = Button$2;
+List$1.Link = Link;
+List$1.Collapsible = Collapsible;
+List$1.Switch = Switch$1;
+List$1.Checkbox = Checkbox$1;
+List$1.Group = Group$1;
+
 function useTimer(duration = 0, callback) {
   const timer = React.useRef();
   const [tracker, setTracker] = React.useState({
@@ -7784,7 +8049,7 @@ const useItemStyling = ({
     'cursor-not-allowed hover:bg-white text-grey-300': disabled
   }, className);
 };
-const Item$1 = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
+const Item$2 = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
   var _props$disabled;
   const {
     dialog,
@@ -7856,7 +8121,7 @@ const Item$1 = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
   return button;
 });
 
-const Link = /*#__PURE__*/React.forwardRef(function MenuLink(props, ref) {
+const Link$1 = /*#__PURE__*/React.forwardRef(function MenuLink(props, ref) {
   const {
     href,
     icon,
@@ -7909,7 +8174,7 @@ const Trigger$6 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref)
   }));
 });
 
-const Checkbox$1 = /*#__PURE__*/React.forwardRef(function MenuCheckboxItem(props, ref) {
+const Checkbox$2 = /*#__PURE__*/React.forwardRef(function MenuCheckboxItem(props, ref) {
   const {
     checked,
     children,
@@ -8152,9 +8417,9 @@ const Menu$1 = /*#__PURE__*/React.forwardRef(function Menu(externalProps, ref) {
 });
 Menu$1.Trigger = Trigger$6;
 Menu$1.Content = Content$8;
-Menu$1.Item = Item$1;
-Menu$1.Link = Link;
-Menu$1.Checkbox = Checkbox$1;
+Menu$1.Item = Item$2;
+Menu$1.Link = Link$1;
+Menu$1.Checkbox = Checkbox$2;
 Menu$1.Separator = Separator;
 Menu$1.Header = Header;
 Menu$1.RadioGroup = RadioGroup$1;
@@ -8280,7 +8545,7 @@ const useDropTarget = onDrop => {
   return [isDraggedOver, props];
 };
 
-const Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
+const Item$3 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
   const {
     active,
     children,
@@ -8388,7 +8653,7 @@ const Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(pr
   }), children);
 });
 Navigation.Menu = Menu$2;
-Navigation.Item = Item$2;
+Navigation.Item = Item$3;
 Navigation.Panel = Panel;
 
 const useIntersectionObserver = (ref, offset) => {
@@ -10325,7 +10590,7 @@ function _finallyRethrows(body, finalizer) {
 }
 
 const DEFAULT_PAGE_SIZE = 100;
-function useTableDataLoader(fetchPage, fetchAll, options = {
+function useTableDataLoader(fetch, fetchAll, options = {
   pageSize: DEFAULT_PAGE_SIZE
 }) {
   const {
@@ -10341,11 +10606,11 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
   const _lastUsedFilters = React__default.useRef([]);
   const _lastUsedSearch = React__default.useRef();
   const _forceReset = React__default.useRef(false);
-  const loadPage = function (pageIndex, sorting, filters) {
+  const loadPage = function (pageIndex, sorting, filters, search) {
     try {
       let reset = false;
       // sorting or filters changed, reset everything
-      if (_forceReset.current || JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current)) {
+      if (_forceReset.current || search !== _lastUsedSearch.current || JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current)) {
         _pendingPageRequests.current = {};
         // nuke the dataset so that we "start again" after sorting
         reset = true;
@@ -10361,9 +10626,11 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
       _lastUsedSorting.current = sorting;
       // set the filters so we can track if it changed between loads
       _lastUsedFilters.current = filters;
+      // set the search so we can track if it changed between loads
+      _lastUsedSearch.current = search;
       const _temp = _finallyRethrows(function () {
         return _catch(function () {
-          return Promise.resolve(fetchPage(pageIndex, pageSize, sorting, filters)).then(function (response) {
+          return Promise.resolve(fetch(pageIndex, pageSize, sorting, filters, search)).then(function (response) {
             // update state, here we do some "magic" to support "load in place"
             setData(currentData => {
               let nextData;
@@ -10392,14 +10659,10 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
       return Promise.reject(e);
     }
   };
-  const loadAll = function (sorting, filters) {
+  const loadAll = function (sorting, filters, search) {
     try {
-      // set the sorting so we can track if it changed between loads
-      _lastUsedSorting.current = sorting;
-      // set the filters so we can track if it changed between loads
-      _lastUsedFilters.current = filters;
       const _temp2 = _catch(function () {
-        return Promise.resolve(fetchAll(sorting, filters)).then(function (response) {
+        return Promise.resolve(fetchAll(sorting, filters, search)).then(function (response) {
           length.current = response.length;
           setData(() => {
             let nextData;
@@ -10421,52 +10684,22 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
   const invalidate = function () {
     try {
       _forceReset.current = true;
-      return loadPage(0, _lastUsedSorting.current, _lastUsedFilters.current);
+      return loadPage(0, _lastUsedSorting.current, _lastUsedFilters.current, _lastUsedSearch.current);
     } catch (e) {
       return Promise.reject(e);
     }
   };
-  // search works client side - it fetches all then works client side - so these handlers are a little "weird"
-  // if a search is currently "active", we need to re load all because
+  // we reset the page to 0 whenever sorting, filtering or search changes
   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);
-      } else {
-        // reset the page to 0 whenever sorting
-        loadPage(0, sorting, _lastUsedFilters.current);
-      }
-      return Promise.resolve();
+      return loadPage(0, sorting, _lastUsedFilters.current, _lastUsedSearch.current);
     } catch (e) {
       return Promise.reject(e);
     }
   };
   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);
-      } else {
-        // reset the page to 0 whenever sorting
-        loadPage(0, _lastUsedSorting.current, filters);
-      }
-      return Promise.resolve();
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  const handleSearch = function (search) {
-    try {
-      // set the search so we can track if it changed between loads
-      _lastUsedSearch.current = search || undefined;
-      // search works client side, and focusing the search field triggers a load of all so we don't actually
-      // want to load anything when search gets changed, we just store the value for other handlers
-      return Promise.resolve();
+      return loadPage(0, _lastUsedSorting.current, filters, _lastUsedSearch.current);
     } catch (e) {
       return Promise.reject(e);
     }
@@ -10477,7 +10710,6 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
     loadAll,
     loadPage,
     onChangeFilter: handleFilter,
-    onChangeSearch: handleSearch,
     onChangeSort: handleSort,
     pageSize
   }, invalidate];
@@ -10768,18 +11000,14 @@ function resetHighlightedColumnIndexes(value, table) {
   return firstRowIndex;
 }
 
-function useTableSearchListener(table, onChangeSearch) {
+function useTableSearchListener(table) {
   const meta = table.options.meta;
   // recalculates highlighted indexes whenever something important changes
   React__default.useEffect(() => {
     if (meta.search.isEnabled) {
-      const query = table.getState().globalFilter;
-      resetHighlightedColumnIndexes(query, table);
-      if (typeof onChangeSearch === 'function') {
-        onChangeSearch(query);
-      }
+      resetHighlightedColumnIndexes(table.getState().globalFilter, table);
     }
-  }, [meta.server.loadAllStatus, meta.search.isEnabled, meta.search.enableGlobalFilter, table.getRowModel().rows.length, table.getState().globalFilter, JSON.stringify(table.getState().sorting), JSON.stringify(table.getState().columnVisibility), onChangeSearch]);
+  }, [meta.server.loadAllStatus, meta.search.isEnabled, meta.search.enableGlobalFilter, table.getRowModel().rows.length, table.getState().globalFilter, JSON.stringify(table.getState().sorting), JSON.stringify(table.getState().columnVisibility)]);
 }
 
 function useTableSettingsListener(table, onChangeSettings) {
@@ -10865,10 +11093,11 @@ function useTableSortingListener(table, onSort) {
 function useTableServerLoadingListener(table, loadPage) {
   const sorting = table.getState().sorting;
   const columnFilters = table.getState().columnFilters;
+  const search = table.getState().globalFilter;
   // trigger load of the first page on mount
   React__default.useEffect(() => {
     if (loadPage) {
-      loadPage(0, sorting, columnFilters);
+      loadPage(0, sorting, columnFilters, search);
     }
   }, []);
 }
@@ -10969,7 +11198,7 @@ function useTableManager(props, meta, internalColumns) {
   useTableFontSizeListener(instance);
   useTableRowHeightListener(instance);
   useTableRowSelectionListener(instance, props.onRowSelect);
-  useTableSearchListener(instance, props.onChangeSearch);
+  useTableSearchListener(instance);
   useTableServerLoadingListener(instance, server.loadPage);
   useTableSettingsListener(instance, setSettings);
   useTableShortcutsListener(instance, props.shortcuts);
@@ -11265,7 +11494,7 @@ function RowWithServerLoading(props) {
   React__default.useEffect(() => {
     if (inView) {
       var _tableMeta$server$loa, _tableMeta$server;
-      (_tableMeta$server$loa = (_tableMeta$server = tableMeta.server).loadPage) === null || _tableMeta$server$loa === void 0 ? void 0 : _tableMeta$server$loa.call(_tableMeta$server, pageIndex, table.getState().sorting, table.getState().columnFilters);
+      (_tableMeta$server$loa = (_tableMeta$server = tableMeta.server).loadPage) === null || _tableMeta$server$loa === void 0 ? void 0 : _tableMeta$server$loa.call(_tableMeta$server, pageIndex, table.getState().sorting, table.getState().columnFilters, table.getState().globalFilter);
     }
   }, [inView]);
   return /*#__PURE__*/React__default.createElement(Skeleton, {
@@ -11739,7 +11968,7 @@ function Header$4(context) {
         const _temp = function () {
           if (tableMeta.server.loadAllIfNeeded) {
             // don't pass the search query because we need all data - not filtered data
-            return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters)).then(function () {});
+            return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
           }
         }();
         // load all data if that is possible
@@ -11813,7 +12042,7 @@ function Cell$3(context) {
                 const _temp3 = function () {
                   if (tableMeta.server.loadAllIfNeeded && selectedRows.some(row => row.original === undefined)) {
                     // don't pass the search query because we need all data - not filtered data
-                    return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters)).then(function () {});
+                    return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
                   }
                 }();
                 return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
@@ -12806,7 +13035,7 @@ function Body(props) {
       const isFirstRow = tableMeta.rowActive.rowActiveIndex === 0;
       const isLastRow = tableMeta.rowActive.rowActiveIndex === tableMeta.length - 1;
       if (event.key === 'Tab' || enableHorizontalArrowKeyNavigation && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
-        if (event.key === 'Tab' && !hasFocusableElement(event.target.closest('tr'))) {
+        if (event.key === 'Tab' && !hasFocusableElement(event.target.closest('tr[data-row-id]'))) {
           return;
         }
         tableMeta.rowActive.setHoverStatePaused(true);
@@ -13132,49 +13361,6 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
   return input;
 });
 
-const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
-  const {
-    label,
-    onChange,
-    ...otherProps
-  } = props;
-  const id = useId(props.id);
-  const className = cn('group h-5 w-9 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus', {
-    'mr-2': !!label,
-    'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,
-    'bg-grey-500/50 aria-checked:bg-blue-500/50 cursor-not-allowed': props.disabled
-  }, props.className);
-  let labelledByProps = null;
-  if (label) {
-    labelledByProps = {
-      'aria-labelledby': `${id}-label`,
-      id
-    };
-  }
-  const element = /*#__PURE__*/React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, labelledByProps, {
-    className: className,
-    "data-taco": "switch",
-    onCheckedChange: onChange,
-    ref: ref
-  }), /*#__PURE__*/React.createElement(PrimitiveSwitch.Thumb, {
-    className: "'will-change-transform mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform group-disabled:opacity-50 group-aria-checked:translate-x-[1.1rem]"
-  }));
-  if (label) {
-    const labelContainerClassName = cn('flex self-start cursor-pointer', {
-      'cursor-not-allowed text-grey-300': props.disabled
-    });
-    return /*#__PURE__*/React.createElement("span", {
-      className: labelContainerClassName,
-      "data-taco": "switch-container"
-    }, element, /*#__PURE__*/React.createElement("label", {
-      htmlFor: id,
-      id: `${id}-label`
-    }, label));
-  }
-  return element;
-});
-Switch.displayName = 'Switch';
-
 function Search$1(props) {
   var _tableMeta$search$hig, _tableMeta$search$hig2;
   const {
@@ -13201,7 +13387,7 @@ function Search$1(props) {
       const _temp = function () {
         if (tableMeta.server.loadAllIfNeeded) {
           // don't pass the search query because we need all data - not filtered data
-          return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters)).then(function () {});
+          return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
         }
       }();
       // load all data if that is possible
@@ -13340,7 +13526,7 @@ const isFormElement = element => {
   const formElementNodeNames = ['BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'FIELDSET'];
   return formElementNodeNames.includes(element.nodeName);
 };
-function Item$3(props) {
+function Item$4(props) {
   const {
     asChild,
     children,
@@ -13379,9 +13565,9 @@ function Item$3(props) {
   }
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, elProps), children);
 }
-Item$3.displayName = 'SortableListItem';
+Item$4.displayName = 'SortableListItem';
 
-function List$1(externalProps) {
+function List$2(externalProps) {
   const {
     children,
     id,
@@ -13401,7 +13587,7 @@ function List$1(externalProps) {
     ref: id ? setNodeRef : undefined
   }), children));
 }
-List$1.displayName = 'SortableList';
+List$2.displayName = 'SortableList';
 
 const Column = /*#__PURE__*/React__default.forwardRef(function Column(props, ref) {
   var _column$parent, _column$parent$column, _column$columnDef$met;
@@ -13485,12 +13671,12 @@ function HideOrOrderPopover(props) {
     value: query
   })) : null, tableMeta.columnOrdering.isEnabled && columns.length && !(query !== null && query !== void 0 && query.length) ? ( /*#__PURE__*/React__default.createElement(Container, {
     reorder: handleReorder
-  }, /*#__PURE__*/React__default.createElement(List$1, {
+  }, /*#__PURE__*/React__default.createElement(List$2, {
     id: "columns",
     className: listClassName
   }, columns.filter(column => !column.getIsGrouped()).map(column => {
     var _column$columnDef$met4, _column$columnDef$met5;
-    return /*#__PURE__*/React__default.createElement(Item$3, {
+    return /*#__PURE__*/React__default.createElement(Item$4, {
       key: column.id,
       id: column.id,
       disabled: !((_column$columnDef$met4 = column.columnDef.meta) !== null && _column$columnDef$met4 !== void 0 && _column$columnDef$met4.enableOrdering),
@@ -13885,7 +14071,7 @@ const Option = /*#__PURE__*/React__default.forwardRef(function Listbox2Option(pr
   }));
 });
 
-const Group$1 = /*#__PURE__*/React__default.forwardRef(function Listbox2Group(props, ref) {
+const Group$2 = /*#__PURE__*/React__default.forwardRef(function Listbox2Group(props, ref) {
   const [labelledById, setLabelledById] = React__default.useState();
   return /*#__PURE__*/React__default.createElement(Listbox2GroupContext.Provider, {
     value: {
@@ -14249,7 +14435,7 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
   })) : null);
 });
 
-const Group$2 = /*#__PURE__*/React__default.forwardRef(function Select2Group(props, ref) {
+const Group$3 = /*#__PURE__*/React__default.forwardRef(function Select2Group(props, ref) {
   const {
     children,
     heading,
@@ -14259,7 +14445,7 @@ const Group$2 = /*#__PURE__*/React__default.forwardRef(function Select2Group(pro
   const className = cn(createCollectionClassName(), {
     "last:after:content-none after:content-[''] after:bg-grey-300 after:mx-2 after:my-1 after:h-px": hasSeparator && children.length
   }, props.className);
-  return /*#__PURE__*/React__default.createElement(Group$1, Object.assign({}, attributes, {
+  return /*#__PURE__*/React__default.createElement(Group$2, Object.assign({}, attributes, {
     className: className,
     ref: ref
   }), /*#__PURE__*/React__default.createElement(Title$4, {
@@ -14301,7 +14487,7 @@ const Trigger$7 = /*#__PURE__*/React__default.forwardRef(function Select2Trigger
     value: value
   }));
 });
-const Button$2 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerButton(props, ref) {
+const Button$3 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerButton(props, ref) {
   var _props$className;
   const {
     children,
@@ -14386,7 +14572,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
       })) : currentValue.props.prefix : null, currentValue.props.children);
     }
   }
-  return /*#__PURE__*/React__default.createElement(Button$2, Object.assign({}, buttonProps, {
+  return /*#__PURE__*/React__default.createElement(Button$3, Object.assign({}, buttonProps, {
     ref: ref
   }), /*#__PURE__*/React__default.createElement("div", {
     className: contentClassName
@@ -14450,7 +14636,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     style: {
       width: open ? (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.offsetWidth : undefined
     }
-  }, /*#__PURE__*/React__default.createElement(Button$2, Object.assign({}, buttonProps, {
+  }, /*#__PURE__*/React__default.createElement(Button$3, Object.assign({}, buttonProps, {
     className: className,
     ref: buttonRef
   }), content));
@@ -15064,7 +15250,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
   }) : null)))))));
 });
 Select2.Option = Option$1;
-Select2.Group = Group$2;
+Select2.Group = Group$3;
 Select2.Title = Title$5;
 const ControlledHiddenField = props => {
   const {
@@ -15249,7 +15435,7 @@ function Print$1(props) {
       const _temp2 = function () {
         if (tableMeta.server.isEnabled && tableMeta.server.loadAllIfNeeded) {
           const _temp = _catch(function () {
-            return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters)).then(function () {});
+            return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
           }, function (error) {
             const errorMessage = `${texts.table.print.error}: ${error}`;
             console.error(errorMessage);
@@ -15942,7 +16128,7 @@ function TableGrid(props) {
 function Column$1(_) {
   return null;
 }
-function Group$3(_) {
+function Group$4(_) {
   return null;
 }
 const BaseReport = /*#__PURE__*/fixedForwardRef(function BaseReport(props, ref) {
@@ -15965,7 +16151,7 @@ const Report$1 = /*#__PURE__*/fixedForwardRef(function Report(props, ref) {
   }));
 });
 Report$1.Column = Column$1;
-Report$1.Group = Group$3;
+Report$1.Group = Group$4;
 
 const sanitizeRowProps = (row, rowExpansionRenderer) => {
   var _row$subRows;
@@ -18679,10 +18865,10 @@ function Column$3(_) {
   return null;
 }
 Column$3.displayName = 'Table3Column';
-function Group$4(_) {
+function Group$5(_) {
   return null;
 }
-Group$4.displayName = 'Table3Group';
+Group$5.displayName = 'Table3Group';
 const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref) {
   var _table3$meta$editing, _table3$meta$editing2;
   const table3 = useTable3(props, ref);
@@ -18723,7 +18909,7 @@ const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   }));
 });
 Table3.Column = Column$3;
-Table3.Group = Group$4;
+Table3.Group = Group$5;
 
 const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
   const {
@@ -18934,7 +19120,7 @@ const Tour = props => {
 };
 Tour.Step = TourStep;
 
-const Button$3 = /*#__PURE__*/React__default.forwardRef(function Button(props, ref) {
+const Button$4 = /*#__PURE__*/React__default.forwardRef(function Button(props, ref) {
   const {
     ...attributes
   } = props;
@@ -18950,7 +19136,7 @@ const getButtonClasses$1 = (rounded = true) => cn('!h-9 !w-9 flex-shrink-0 flex-
   '!rounded-full': rounded
 });
 
-const Link$1 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
+const Link$2 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
   const {
     children,
     icon,
@@ -19346,8 +19532,8 @@ const Header$6 = /*#__PURE__*/React__default.forwardRef(function Header(props, r
 });
 Header$6.AgreementDisplay = AgreementDisplay$1;
 Header$6.AgreementSelector = AgreementSelector;
-Header$6.Button = Button$3;
-Header$6.Link = Link$1;
+Header$6.Button = Button$4;
+Header$6.Link = Link$2;
 Header$6.Logo = Logo;
 Header$6.LogoLegacy = LogoLegacy;
 Header$6.PrimaryNavigation = PrimaryNavigation;
@@ -19481,7 +19667,7 @@ Layout$1.Page = Page;
 Layout$1.Sidebar = Sidebar;
 Layout$1.Content = Content$9;
 
-const Group$5 = /*#__PURE__*/React__default.forwardRef(function Group(props, ref) {
+const Group$6 = /*#__PURE__*/React__default.forwardRef(function Group(props, ref) {
   const {
     children,
     defaultExpanded = false,
@@ -19539,7 +19725,7 @@ const getNavigationLinkClasses = (isDraggedOver = false) => cn('group relative f
   'hover:bg-black/[.06] aria-current-page:bg-blue-500/[.1]': !isDraggedOver,
   '!bg-blue-500 !text-white [&>*]:!text-white': isDraggedOver
 });
-const Link$2 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
+const Link$3 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
   const {
     active,
     children,
@@ -19640,8 +19826,8 @@ const Navigation2 = /*#__PURE__*/React__default.forwardRef(function Navigation2(
     }
   }), children);
 });
-Navigation2.Group = Group$5;
-Navigation2.Link = Link$2;
+Navigation2.Group = Group$6;
+Navigation2.Link = Link$3;
 Navigation2.Section = Section;
 Navigation2.Content = Content$a;
 
@@ -19703,6 +19889,7 @@ exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Input = Input;
 exports.Layout = Layout$1;
+exports.List = List$1;
 exports.Listbox = Listbox;
 exports.LocalizationContext = LocalizationContext;
 exports.LocalizationProvider = LocalizationProvider;