@economic/taco 1.30.0 → 1.30.2

package/dist/taco.cjs.development.js

@@ -1613,13 +1613,18 @@ var Inbox = /*#__PURE__*/React.forwardRef(IconInbox);
 
 function IconInfo(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: "M11.917 9.355c.406-.018.793.073 1.133.31.962.674.524 2.404-.048 3.869l-.158.391-.237.55-.455 1.002-.078.188c-.01.027-.02.051-.027.073-.561 1.637.086 2.057 1.037 1.797l.103-.03-.069.77c-1.848 1.337-4.443.961-3.364-2.283.052-.156.122-.33.204-.52l.176-.393.398-.867.2-.457c.385-.92.675-1.867.453-2.548-.164-.5-.684-.534-1.214-.352l-.114.042.068-.711c.543-.42 1.177-.732 1.79-.813l.202-.018zM13.148 5c.747 0 1.352.609 1.352 1.362 0 .75-.605 1.36-1.352 1.36a1.357 1.357 0 01-1.354-1.36c0-.753.605-1.362 1.354-1.362z",
-    fill: "currentColor",
-    fillRule: "evenodd"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.75 18.249A.75.75 0 0114 19h-4a.75.75 0 010-1.503h1.233V11H10a.75.75 0 010-1.503h1.983a.75.75 0 01.75.752v7.248H14a.75.75 0 01.75.752z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12.733 6.002a1 1 0 11-2.001.001 1 1 0 012.001-.001z",
+    fill: "currentColor"
   }));
 }
 var Info = /*#__PURE__*/React.forwardRef(IconInfo);
@@ -2330,6 +2335,19 @@ function IconProjects(props, svgRef) {
 }
 var Projects = /*#__PURE__*/React.forwardRef(IconProjects);
 
+function IconQuestionMark(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: "M12 14.489c.5 0 .838-.302.832-.764v-1.998c.052-.665.604-.8 1.548-1.413C15.415 9.649 16 8.885 16 7.78 16 6.011 14.077 5 12.139 5c-.822 0-1.831.145-2.639.466a3.39 3.39 0 00-.803.438 1.94 1.94 0 00-.317.3c-.076.09-.14.188-.189.29a1.904 1.904 0 00-.132.356c-.04.153-.059.304-.059.448a.65.65 0 00.022.173c.076.335.34.55.748.55a.806.806 0 00.792-.55c.278-.902 1.709-1.078 2.502-1.078.96 0 2.183.555 2.183 1.405 0 .764-.44 1.163-1.268 1.706-.856.573-1.848 1.137-1.848 2.074v2.147c0 .492.369.764.869.764zM12 19c.579 0 1.047-.457 1.047-1.018 0-.566-.468-1.012-1.047-1.012-.573 0-1.042.446-1.042 1.012 0 .561.47 1.018 1.042 1.018z",
+    fill: "currentColor"
+  }));
+}
+var QuestionMark = /*#__PURE__*/React.forwardRef(IconQuestionMark);
+
 function IconQuicklinks(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2943,11 +2961,12 @@ var Unreconciled = /*#__PURE__*/React.forwardRef(IconUnreconciled);
 
 function IconWarning(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: "M9.527 17.197c.157-.827.938-1.344 1.771-1.177a1.515 1.515 0 011.213 1.772c-.157.826-.939 1.343-1.771 1.177a1.515 1.515 0 01-1.213-1.772zm2.265-11.05c.164-.863.784-1.276 1.607-1.112.815.163 1.23.782 1.066 1.646l-.038.183-.025.097-1.368 6.473c-.179.793-.67 1.182-1.43 1.03-.712-.142-1.032-.634-.96-1.356l.02-.147 1.1-6.628.028-.185z",
+    d: "M13 18a1 1 0 11-2 0 1 1 0 012 0zM11.055 5.99A.97.97 0 0112.03 5a.97.97 0 01.971 1l-.23 7.76a.768.768 0 01-.77.74.768.768 0 01-.77-.748l-.175-7.763z",
     fill: "currentColor"
   }));
 }
@@ -3186,6 +3205,7 @@ const icons = {
   profile: Profile,
   'project-cards': ProjectCards,
   projects: Projects,
+  'question-mark': QuestionMark,
   quicklinks: Quicklinks,
   'rating-bankruptcy': RatingBankruptcy,
   'rating-payment-problems': RatingPaymentProblems,
@@ -3266,12 +3286,21 @@ const BadgeIcon = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
     color,
     icon,
     subtle,
+    small,
     ...otherProps
   } = props;
-  const className = cn(`rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center w-5 h-5 border-transparent [&>*]:max-h-full`, {
+  const className = cn(`rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center border-transparent [&>*]:max-h-full`, {
+    'w-5 h-5': !small
+  }, {
+    'w-4 h-4 text-xs': small
+  }, {
     [getSubtleColorShadeClasses(color)]: subtle,
     [getColorShadeClasses(color)]: !subtle
   }, props.className);
+  const iconProps = {
+    strokeWidth: 1,
+    stroke: 'currentColor'
+  };
   return /*#__PURE__*/React.createElement("span", Object.assign({}, otherProps, {
     "aria-label": "icon",
     className: className,
@@ -3279,9 +3308,9 @@ const BadgeIcon = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
     ref: ref,
     role: "status",
     title: props['aria-label']
-  }), /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/React.createElement(Icon, Object.assign({
     name: icon
-  }));
+  }, iconProps)));
 });
 
 const getIconName = state => {
@@ -3295,7 +3324,7 @@ const getIconName = state => {
     case 'success':
       return 'tick';
     default:
-      return 'refresh';
+      return 'question-mark';
   }
 };
 const Alert = /*#__PURE__*/React__default.forwardRef(function Alert(props, ref) {
@@ -3583,30 +3612,34 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
 });
 
 const getBannerIcon = type => {
-  switch (type) {
-    case 'success':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "tick",
-        className: "yt-green-solid mt-1 self-start rounded-full"
-      });
-    case 'error':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "warning",
-        className: "yt-red-solid mt-1 self-start rounded-full"
-      });
-    case 'warning':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "warning",
-        className: "yt-yellow-solid mt-1 self-start rounded-full"
-      });
-    case 'information':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "info",
-        className: "yt-blue-solid mt-1 self-start rounded-full"
-      });
-    default:
-      return null;
-  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-[5px] self-start"
+  }, (() => {
+    switch (type) {
+      case 'success':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "tick",
+          color: "green"
+        });
+      case 'error':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "close",
+          color: "red"
+        });
+      case 'warning':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "warning",
+          color: "yellow"
+        });
+      case 'information':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "info",
+          color: "blue"
+        });
+      default:
+        return null;
+    }
+  })());
 };
 
 const Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
@@ -4008,10 +4041,11 @@ const Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
 
 const Base$1 = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   const {
+    appearance,
     fluid,
     ...otherProps
   } = props;
-  const className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
+  const className = cn(getButtonClasses(), getAppearanceClasses(appearance), 'rounded px-3', {
     'cursor-not-allowed opacity-50': props.disabled,
     'focus:yt-focus active:focus:yt-focus': !props.disabled,
     'w-full': fluid
@@ -8066,36 +8100,39 @@ const Progress = ({
 };
 
 const getBadgeIcon = type => {
-  const css = 'rounded-full flex-shrink-0 mr-2 mt-1 self-start';
-  switch (type) {
-    case 'success':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "tick",
-        className: cn(css, 'yt-green-solid ')
-      });
-    case 'warning':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "warning",
-        className: cn(css, 'yt-yellow-solid')
-      });
-    case 'error':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "warning",
-        className: cn(css, 'yt-red-solid')
-      });
-    case 'information':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "info",
-        className: cn(css, 'yt-blue-solid')
-      });
-    case 'loading':
-      return /*#__PURE__*/React__default.createElement(Spinner, {
-        delay: 0,
-        className: cn(css, 'h-6 w-6')
-      });
-    default:
-      return null;
-  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mr-2 mt-[5px] flex-shrink-0 self-start"
+  }, (() => {
+    switch (type) {
+      case 'success':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "tick",
+          color: "green"
+        });
+      case 'error':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "close",
+          color: "red"
+        });
+      case 'warning':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "warning",
+          color: "yellow"
+        });
+      case 'information':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "info",
+          color: "blue"
+        });
+      case 'loading':
+        return /*#__PURE__*/React__default.createElement(Spinner, {
+          delay: 0,
+          className: "h-5 w-5"
+        });
+      default:
+        return null;
+    }
+  })());
 };
 const getToastEmptyContentWarning = content => `Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${content === '' ? 'empty string' : content}.`;
 
@@ -9791,6 +9828,12 @@ const ControlledHiddenField = props => {
 };
 Select2.displayName = 'Select2';
 
+const replaceWithShortform = key => {
+  if (key === 'Delete') {
+    return 'Del';
+  }
+  return key;
+};
 const Shortcut$1 = ({
   keys,
   ...props
@@ -9801,7 +9844,7 @@ const Shortcut$1 = ({
   }), keys.map(key => /*#__PURE__*/React__default.createElement("kbd", {
     key: key,
     className: "wcag-blue-900 inline-flex h-4 items-center rounded px-1 font-mono text-xs font-normal"
-  }, key)));
+  }, replaceWithShortform(key))));
 };
 
 const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
@@ -11656,7 +11699,10 @@ const RowActionsCell = /*#__PURE__*/React__default.memo(({
       }
     },
     tabIndex: tabIndex,
-    tooltip: getActionPropertyValue(action.text, row.original)
+    tooltip: action.shortcutKey ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, getActionPropertyValue(action.text, row.original), /*#__PURE__*/React__default.createElement(Shortcut$1, {
+      className: "ml-2",
+      keys: [action.shortcutKey]
+    })) : getActionPropertyValue(action.text, row.original)
   })), visibleMoreActions.length ? /*#__PURE__*/React__default.createElement(IconButton, {
     className: actionClassName,
     "aria-label": texts.table2.columns.actions.tooltip,
@@ -13152,6 +13198,14 @@ const useActiveRowStateListener = (table, rows, activeRowIndex) => {
   }, [table.getState().columnFilters, rows.length]);
 };
 
+const useFilterStateListener = (table, onRowSelect) => {
+  React__default.useEffect(() => {
+    if (onRowSelect) {
+      table.resetRowSelection();
+    }
+  }, [table.getState().columnFilters, table.getState().globalFilter]);
+};
+
 function useTable$1(children, props, ref) {
   var _settings$frozenColum, _settings$columnOrder, _settings$columnSizin, _settings$columnVisib, _settings$rowDensity;
   const {
@@ -13203,6 +13257,15 @@ function useTable$1(children, props, ref) {
     expandedRowRenderer,
     onRowDrag
   }, ref);
+  const actionShortcuts = actionsForRow === null || actionsForRow === void 0 ? void 0 : actionsForRow.reduce((shortcuts, action) => {
+    if (action.shortcutKey) {
+      return {
+        ...shortcuts,
+        [action.shortcutKey]: action.ariaLabel
+      };
+    }
+    return shortcuts;
+  }, {});
   const lastSortedOrFilteredRows = React__default.useRef(null);
   const totalFrozenColumns = internalFrozenColumnCount + ((_settings$frozenColum = settings === null || settings === void 0 ? void 0 : settings.frozenColumnCount) !== null && _settings$frozenColum !== void 0 ? _settings$frozenColum : 0);
   const frozenColumns = columns.slice(0, totalFrozenColumns).map(column => column.id);
@@ -13342,12 +13405,14 @@ function useTable$1(children, props, ref) {
   // state listeners
   useActiveRowStateListener(table, rows, activeRow);
   useColumnOffsetStateListener(table, setColumnOffsets);
+  useFilterStateListener(table, onRowSelect);
   useRowSelectionListener(table, onRowSelect);
   useSettingsStateListener(table, onChangeSettings);
   return {
     rows,
     table,
-    footers
+    footers,
+    actionShortcuts
   };
 }
 
@@ -14614,7 +14679,8 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
   const {
     rows,
     table,
-    footers
+    footers,
+    actionShortcuts
   } = useTable$1(props.children, props, tableRef);
   const meta = table.options.meta;
   const {
@@ -14653,6 +14719,14 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
   const editButtonRef = React__default.useRef(null);
   // support grid like keyboard navigation between cells
   const handleKeyDown = event => {
+    if (!meta.editMode.isEditing && actionShortcuts[event.key]) {
+      var _tableRef$current;
+      const rowAction = (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.querySelector(`[role="row"][aria-current="true"] [role="cell"]:last-child [aria-label="${actionShortcuts[event.key]}"]`);
+      if (rowAction) {
+        rowAction.click();
+      }
+      return;
+    }
     if (document.activeElement === tableRef.current) {
       if (event.key === 'ArrowUp') {
         event.preventDefault();
@@ -14676,8 +14750,8 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
             meta.setShouldPauseHoverState(true);
             // the virtualiser doesn't always scroll right to the bottom for the last row
             if (nextIndex === rows.length - 1) {
-              var _tableRef$current;
-              (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.scrollTo(0, tableRef.current.scrollHeight);
+              var _tableRef$current2;
+              (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.scrollTo(0, tableRef.current.scrollHeight);
             } else {
               virtualiser.scrollToIndex(nextIndex + 2);
             }
@@ -14781,14 +14855,11 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
               const _temp3 = function () {
                 if (typeof loadMore === 'function') {
                   const scrollY = event.currentTarget.scrollTop;
-                  const isVerticalScrolling = scrollY !== prevScrollY.current;
+                  const isScrollingDown = scrollY > prevScrollY.current;
                   prevScrollY.current = scrollY;
+                  const scrolledPercentage = Math.round(100 / event.currentTarget.scrollHeight * scrollY);
                   const _temp2 = function () {
-                    if (
-                    // This condition will also prevent triggering of loadMore function when scrolled upwards
-                    event.currentTarget.scrollHeight - event.currentTarget.scrollTop - event.currentTarget.clientHeight < 600 && !loadingRef.current &&
-                    // We don't want to trigger loadMore function on horizontal scrolling
-                    isVerticalScrolling) {
+                    if (isScrollingDown && !loadingRef.current && scrolledPercentage >= 80) {
                       const _temp = _finallyRethrows(function () {
                         return _catch(function () {
                           const isAllRowsSelected = table.getIsAllRowsSelected();