@economic/taco 2.30.1 → 2.31.0

package/dist/taco.cjs.development.js

@@ -4122,9 +4122,6 @@ function isElementInteractive(element) {
   }
   return ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'].includes(element.tagName) && !element.hidden && !element.disabled && !element.readOnly;
 }
-function isElementInsideTable3OrReport(element) {
-  return !!(element !== null && element !== void 0 && element.closest('[data-taco^=table]'));
-}
 
 function isPressingMetaKey(event) {
   return isMacOs() ? event.metaKey : event.ctrlKey;
@@ -5826,7 +5823,9 @@ const useCombobox = ({
     }
   };
   const handleInputKeyDown = event => {
+    var _inputRef$current;
     event.persist();
+    const insideTheTable = !!((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.closest('table, [role="rowgroup"]'));
     if (!event.ctrlKey && !event.metaKey) {
       switch (event.key) {
         case 'Backspace':
@@ -5848,7 +5847,7 @@ const useCombobox = ({
           }
         case 'Enter':
           {
-            if (isElementInsideTable3OrReport(event.currentTarget)) {
+            if (insideTheTable) {
               event.preventDefault();
               if (inline && !open) {
                 setOpen(true);
@@ -5866,7 +5865,7 @@ const useCombobox = ({
           if (open) {
             event.preventDefault();
           } else {
-            if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {
+            if (!inline && buttonRef.current && !insideTheTable) {
               buttonRef.current.click();
             }
           }
@@ -5886,7 +5885,7 @@ const useCombobox = ({
         listRef.current.dispatchEvent(createCustomKeyboardEvent(event));
       }
       if (inline && !open) {
-        if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && !isElementInsideTable3OrReport(event.currentTarget)) {
+        if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && !insideTheTable) {
           event.preventDefault();
           const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;
           setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);
@@ -5993,7 +5992,7 @@ const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
     ref: ref
   }), /*#__PURE__*/React.createElement(Input, Object.assign({}, input, {
     autoComplete: "off",
-    button: props.inline ? ( /*#__PURE__*/React.createElement(IconButton
+    button: props.readOnly ? undefined : props.inline ? ( /*#__PURE__*/React.createElement(IconButton
     // In case of inline combobox, this icon button acts only as visual chevron representation,
     // so should be taken out of screen reader scope.
     , {
@@ -6317,7 +6316,7 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
     "data-taco": "datepicker",
     style: style
   }, /*#__PURE__*/React.createElement(Input, Object.assign({}, input, {
-    button: /*#__PURE__*/React.createElement(IconButton, {
+    button: input.readOnly ? undefined : ( /*#__PURE__*/React.createElement(IconButton, {
       "aria-label": texts.datepicker.expand,
       disabled: input.disabled || input.readOnly,
       icon: "calendar",
@@ -6355,7 +6354,7 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
         }
       }, texts.datepicker.clear))))))))),
       tooltip: texts.datepicker.calendar
-    })
+    }))
   })));
 });
 Datepicker.displayName = 'Datepicker';
@@ -8195,13 +8194,12 @@ const Link$1 = /*#__PURE__*/React.forwardRef(function MenuLink(props, ref) {
 const Trigger$6 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref) {
   const menu = useCurrentMenu();
   const internalRef = useMergedRef(ref);
-  const handleKeyDown = event => {
-    if (event.key === 'ArrowDown') {
-      if (isElementInsideTable3OrReport(event.currentTarget)) {
-        var _event$currentTarget$;
-        event.preventDefault();
-        (_event$currentTarget$ = event.currentTarget.parentNode) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.dispatchEvent(createCustomKeyboardEvent(event));
-      }
+  const preventArrowDownShortcut = event => {
+    var _internalRef$current;
+    const isRenderedInTable = !!((_internalRef$current = internalRef.current) !== null && _internalRef$current !== void 0 && _internalRef$current.closest('tbody'));
+    if (isRenderedInTable && event.key === 'ArrowDown') {
+      var _internalRef$current2, _internalRef$current3;
+      internalRef === null || internalRef === void 0 ? void 0 : (_internalRef$current2 = internalRef.current) === null || _internalRef$current2 === void 0 ? void 0 : (_internalRef$current3 = _internalRef$current2.parentNode) === null || _internalRef$current3 === void 0 ? void 0 : _internalRef$current3.dispatchEvent(createCustomKeyboardEvent(event));
     }
   };
   React.useEffect(() => {
@@ -8212,7 +8210,7 @@ const Trigger$6 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref)
   return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Trigger, Object.assign({}, props, {
     asChild: true,
     ref: internalRef,
-    onKeyDown: handleKeyDown
+    onKeyDown: preventArrowDownShortcut
   }));
 });
 
@@ -8986,12 +8984,30 @@ const useSelect = ({
       onChange(event);
     }
   };
+  const handleButtonClick = event => {
+    if (readOnly) {
+      event.preventDefault();
+    }
+  };
+  // select the value text if the select is readonly
+  const handleButtonFocus = event => {
+    if (readOnly) {
+      const value = event.currentTarget.querySelector(':first-child');
+      if (value) {
+        var _window$getSelection, _window$getSelection$;
+        (_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : (_window$getSelection$ = _window$getSelection.selectAllChildren) === null || _window$getSelection$ === void 0 ? void 0 : _window$getSelection$.call(_window$getSelection, value);
+      }
+    }
+  };
   const button = {
     'aria-haspopup': 'listbox',
     'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,
     'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,
-    disabled: disabled || readOnly,
+    'aria-readonly': readOnly ? 'true' : undefined,
+    disabled: disabled,
     id: buttonId,
+    onClick: handleButtonClick,
+    onFocus: handleButtonFocus,
     onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,
     tabIndex,
     type: 'button'
@@ -9057,7 +9073,8 @@ const BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref)
     'yt-select--readonly': props.readOnly
   }, externalClassName);
   const inputClassname = cn(getInputClasses(props), 'h-8 text-left !pr-0', {
-    'border-blue-500': popover.open
+    'border-blue-500': popover.open,
+    'select-text': otherProps.readOnly
   });
   React.useEffect(() => {
     if (autoFocus && internalRef.current) {
@@ -10043,6 +10060,13 @@ function mapTableChildrenToColumns(props, settings, options, internalColumns) {
 function configureReactTableOptions(options, props) {
   var _options$enableFilter, _options$enableColumn, _options$enableRowExp, _options$enableColumn2, _options$enableColumn3, _options$enableSortin;
   const enableRowSelection = options.enableRowSelection || options.enableRowSelectionSingle;
+  const getRowIdentityColumnId = () => {
+    if (!props.rowIdentityColumnId) {
+      return undefined;
+    }
+    const rowIdentityColumnIds = [props.rowIdentityColumnId].flat();
+    return originalRow => rowIdentityColumnIds.map(identityColumnId => String(originalRow[identityColumnId])).join('_');
+  };
   const tableOptions = {
     defaultColumn: {
       enableColumnFilter: options.enableFiltering || true,
@@ -10067,6 +10091,8 @@ function configureReactTableOptions(options, props) {
     // models for default features
     getExpandedRowModel: reactTable.getExpandedRowModel(),
     getGroupedRowModel: reactTable.getGroupedRowModel(),
+    // Use row indentity column values as id for each row
+    getRowId: getRowIdentityColumnId(),
     groupedColumnMode: false
   };
   if (tableOptions.enableColumnResizing) {
@@ -10420,11 +10446,11 @@ function useTableRowActive(isEnabled = false, initialRowActiveIndex) {
   const [rowActiveIndex, setRowActiveIndex] = React__default.useState(initialRowActiveIndex);
   const [rowHoverIndex, setRowHoverIndex] = React__default.useState(undefined);
   const [isHoverStatePaused, setHoverStatePaused] = useIsHoverStatePaused();
-  const move = (direction, length, scrollToIndex) => {
-    const nextIndex = rowActiveIndex !== undefined ? getNextIndex(direction, rowActiveIndex, length) : 0;
-    scrollToIndex(nextIndex);
-    setTimeout(() => setRowActiveIndex(nextIndex), 50);
-  };
+  const move = (direction, length, scrollToIndex) => setRowActiveIndex(currentIndex => {
+    const nextIndex = currentIndex !== undefined ? getNextIndex(direction, currentIndex, length) : 0;
+    setTimeout(() => scrollToIndex(nextIndex), 1);
+    return nextIndex;
+  });
   const onKeyDown = React__default.useCallback((event, length, scrollToIndex) => {
     if (!isEnabled || event.defaultPrevented) {
       return;
@@ -11242,6 +11268,7 @@ function useTableManager(props, meta, internalColumns) {
   // ensure data is always valid
   const data = (_props$data = props.data) !== null && _props$data !== void 0 ? _props$data : [];
   const length = (_props$length = props.length) !== null && _props$length !== void 0 ? _props$length : data.length;
+  const rowIdentityColumnId = props.rowIdentityColumnId !== undefined ? [props.rowIdentityColumnId].flat() : [];
   // create a react-table instance
   const instance = reactTable.useReactTable({
     data,
@@ -11269,7 +11296,7 @@ function useTableManager(props, meta, internalColumns) {
       rowDrag,
       rowDrop: rowDrop,
       rowExpansion: rowExpansion,
-      rowIdentityColumnId: props.rowIdentityColumnId,
+      rowIdentityColumnId,
       rowGoto,
       rowGroups: rowGroups,
       rowHeight,
@@ -11646,12 +11673,11 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
   } = useRowHeightVirtualisation(table);
   // row groups
   const rangeExtractor = useRowGroupVirtualisation(table);
-  // account for thead and tfoot in the scroll area - both are always medium row height
+  // account for thead and tfoot in the scroll area
   const scrollPaddingStart = ROW_HEIGHT_ESTIMATES.medium;
   // column groups offset the bottom padding :shrug:, multiplying by 1.5 ensures the bottom padding remains
   // consistent when there are groups and when there aren't. 1.5 is relatively arbitrary, but it gives alignment
   const scrollPaddingEnd = ROW_HEIGHT_ESTIMATES.medium * (table.getHeaderGroups().length > 1 ? 1.5 : 1);
-  const scrollMargin = isTableRowGrouped ? 0 : scrollPaddingStart;
   const virtualiser = reactVirtual.useVirtualizer({
     count: rows.length,
     estimateSize,
@@ -11659,7 +11685,7 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
     overscan: tableMeta.printing.isPrinting ? rows.length : undefined,
     rangeExtractor,
     // correctly sets top and bottom spacing for the scroll container - very sensitive, don't change
-    scrollMargin,
+    scrollMargin: isTableRowGrouped ? 0 : scrollPaddingStart,
     // correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list
     scrollPaddingStart,
     scrollPaddingEnd: tableMeta.footer.isEnabled ? scrollPaddingEnd * 2 : scrollPaddingEnd
@@ -11688,7 +11714,7 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
   // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0
   const paddingStartIndex = isTableRowGrouped && rows.length > 1 ? 1 : 0;
   // styling for offsetting rows - this "is" the virtualisation
-  const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [Math.max(0, (_ref = ((_virtualItems$padding = virtualItems[paddingStartIndex]) === null || _virtualItems$padding === void 0 ? void 0 : _virtualItems$padding.start) - ((_virtualItems$padding2 = virtualItems[paddingStartIndex]) === null || _virtualItems$padding2 === void 0 ? void 0 : _virtualItems$padding2.size) - scrollMargin) !== null && _ref !== void 0 ? _ref : 0), Math.max(0, (_ref2 = totalSize - ((_virtualItems = virtualItems[virtualItems.length - 1]) === null || _virtualItems === void 0 ? void 0 : _virtualItems.end)) !== null && _ref2 !== void 0 ? _ref2 : 0)] : [0, 0];
+  const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [Math.max(0, (_ref = ((_virtualItems$padding = virtualItems[paddingStartIndex]) === null || _virtualItems$padding === void 0 ? void 0 : _virtualItems$padding.start) - ((_virtualItems$padding2 = virtualItems[paddingStartIndex]) === null || _virtualItems$padding2 === void 0 ? void 0 : _virtualItems$padding2.size)) !== null && _ref !== void 0 ? _ref : 0), Math.max(0, (_ref2 = totalSize - ((_virtualItems = virtualItems[virtualItems.length - 1]) === null || _virtualItems === void 0 ? void 0 : _virtualItems.end)) !== null && _ref2 !== void 0 ? _ref2 : 0)] : [0, 0];
   // ensure default active rows are scrolled to
   React__default.useEffect(() => {
     if (defaultRowActiveIndex) {
@@ -11703,7 +11729,7 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
   let content = null;
   if (rows.length) {
     style = {
-      height: `${totalSize - scrollMargin}px`,
+      height: `${totalSize}px`,
       paddingBottom,
       paddingTop
     };
@@ -14554,13 +14580,19 @@ const Title$5 = /*#__PURE__*/React__default.forwardRef(function Select2Title(pro
 
 const Placeholder = ({
   disabled,
+  readOnly,
   ...props
-}) => ( /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
-  className: cn({
-    'text-grey-700': disabled,
-    'text-grey-500': !disabled
-  })
-})));
+}) => {
+  if (readOnly) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+    className: cn({
+      'text-grey-700': disabled,
+      'text-grey-500': !disabled
+    })
+  }));
+};
 const Trigger$7 = /*#__PURE__*/React__default.forwardRef(function Select2Trigger(props, ref) {
   const {
     multiple,
@@ -14594,13 +14626,14 @@ const Button$3 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerB
     open,
     readOnly
   } = useSelect2Context();
-  const className = cn('cursor-pointer px-1.5 h-fit', getInputClasses({
+  const className = cn('px-1.5 h-fit', getInputClasses({
     ...props,
     disabled,
     highlighted,
     invalid,
     readOnly
   }).replace('w-full', '').replace('px-2', ''), getFontSize(fontSize), {
+    'select-text': readOnly,
     'w-full': !((_props$className = props.className) !== null && _props$className !== void 0 && _props$className.includes('w-'))
   }, props.className);
   const handleClick = event => {
@@ -14612,17 +14645,28 @@ const Button$3 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerB
       onClick(event);
     }
   };
+  // select the value text if the select is readonly
+  const handleFocus = event => {
+    if (readOnly) {
+      const value = event.currentTarget.querySelector(':first-child');
+      if (value) {
+        var _window$getSelection, _window$getSelection$;
+        (_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : (_window$getSelection$ = _window$getSelection.selectAllChildren) === null || _window$getSelection$ === void 0 ? void 0 : _window$getSelection$.call(_window$getSelection, value);
+      }
+    }
+  };
   return /*#__PURE__*/React__default.createElement("button", Object.assign({}, otherProps, {
     "aria-invalid": invalid ? true : undefined,
     "aria-readonly": readOnly ? true : undefined,
     className: className,
     disabled: disabled,
     onClick: handleClick,
+    onFocus: handleFocus,
     ref: ref,
     role: "combobox",
-    tabIndex: disabled || readOnly ? -1 : tabIndex,
+    tabIndex: disabled ? -1 : tabIndex,
     type: "button"
-  }), children, /*#__PURE__*/React__default.createElement(Icon, {
+  }), children, readOnly ? null : /*#__PURE__*/React__default.createElement(Icon, {
     name: open ? 'chevron-up' : 'chevron-down',
     className: "pointer-events-none -mr-1 ml-auto"
   }));
@@ -14645,7 +14689,8 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
   let output;
   if (placeholder && currentValue === undefined) {
     output = /*#__PURE__*/React__default.createElement(Placeholder, {
-      disabled: disabled
+      disabled: disabled,
+      readOnly: readOnly
     }, placeholder);
   } else if (currentValue) {
     if (tags && emptyValue !== value) {
@@ -14698,7 +14743,8 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-wrap gap-1"
     }, valuesAsChildren.length === 0 ? ( /*#__PURE__*/React__default.createElement(Placeholder, {
-      disabled: disabled
+      disabled: disabled,
+      readOnly: readOnly
     }, placeholder)) : valuesAsChildren.map(child => ( /*#__PURE__*/React__default.createElement(Tag$1, {
       key: String(child.props.value),
       className: "truncate",
@@ -14758,7 +14804,8 @@ const MultipleValue = ({
     className: "flex gap-1 truncate",
     ref: el => setContentRef(el)
   }, valuesAsChildren.length === 0 ? ( /*#__PURE__*/React__default.createElement(Placeholder, {
-    disabled: disabled
+    disabled: disabled,
+    readOnly: readOnly
   }, placeholder)) : valuesAsChildren.map((child, index) => {
     const tag = /*#__PURE__*/React__default.createElement(Tag$1, {
       key: String(child.props.value),
@@ -15186,8 +15233,6 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     var _listboxRef$current;
     if (open) {
       event.preventDefault();
-    } else if (isElementInsideTable3OrReport(event.currentTarget)) {
-      return;
     } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {
       setOpen(true);
     }
@@ -18809,6 +18854,22 @@ function Alert$1(props) {
   const tableMeta = table.options.meta;
   const [showFilterResetDialog, setShowFilterResetDialog] = React__default.useState(false);
   const pendingChangesWithErrors = tableMeta.editing.getErrors();
+  const deletePendingChange = tableMeta.editing.resetChanges;
+  const allRows = table.getPreFilteredRowModel().rows;
+  // This effect deletes error in the alert if the row that has the error is deleted.
+  React__default.useEffect(() => {
+    pendingChangesWithErrors.forEach(errorRow => {
+      const errorRowId = errorRow.rowId;
+      try {
+        // getRow throws error if it fails to find the row
+        if (!table.getRow(errorRowId)) {
+          deletePendingChange(errorRowId);
+        }
+      } catch {
+        deletePendingChange(errorRowId);
+      }
+    });
+  }, [allRows.length]);
   const activeRow = React__default.useMemo(() => tableMeta.rowActive.rowActiveIndex ? table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex] : undefined, [tableMeta.rowActive.rowActiveIndex]);
   // mark errors being rendered as seen
   React__default.useEffect(() => {
@@ -18837,18 +18898,23 @@ function Alert$1(props) {
   const title = (pendingChangesWithErrors.length === 1 ? validationTexts.alert.titleOne : validationTexts.alert.titlePlural).replace('[COUNT]', String(pendingChangesWithErrors.length));
   // generate links to each invalid row, to go into the error message
   const links = [];
-  const rowIdentityColumn = tableMeta.rowIdentityColumnId ? table.getColumn(tableMeta.rowIdentityColumnId) : undefined;
+  const rowIdentityColumn = tableMeta.rowIdentityColumnId ?
+  // Since rowIdentityColumnId can have multiple ids, we use the first id to refer to the row in Alert
+  table.getColumn(tableMeta.rowIdentityColumnId[0]) : undefined;
   pendingChangesWithErrors.forEach((error, index) => {
     // if appropriate, concatenate the item with the text "and"
     if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {
       // Add space before and after `messageAnd` text
       links.push(` ${validationTexts.alert.messageAnd} `);
     }
-    const rowIndex = table.getRowModel().rows.findIndex(row => row.id === error.rowId);
+    const rowIndex = table.getFilteredRowModel().rows.findIndex(row => row.id === error.rowId);
     const handleClick = () => {
+      // if row is visible
       if (rowIndex > -1) {
         scrollToRow(rowIndex);
-      } else {
+      }
+      // if row is filtered out
+      else {
         setShowFilterResetDialog(error.rowId);
       }
     };