@economic/taco 2.33.0 → 2.34.0

package/dist/taco.cjs.development.js

@@ -4122,6 +4122,9 @@ 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;
@@ -5823,9 +5826,7 @@ 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':
@@ -5847,7 +5848,7 @@ const useCombobox = ({
           }
         case 'Enter':
           {
-            if (insideTheTable) {
+            if (isElementInsideTable3OrReport(event.currentTarget)) {
               event.preventDefault();
               if (inline && !open) {
                 setOpen(true);
@@ -5865,7 +5866,7 @@ const useCombobox = ({
           if (open) {
             event.preventDefault();
           } else {
-            if (!inline && buttonRef.current && !insideTheTable) {
+            if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {
               buttonRef.current.click();
             }
           }
@@ -5885,7 +5886,7 @@ const useCombobox = ({
         listRef.current.dispatchEvent(createCustomKeyboardEvent(event));
       }
       if (inline && !open) {
-        if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && !insideTheTable) {
+        if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && !isElementInsideTable3OrReport(event.currentTarget)) {
           event.preventDefault();
           const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;
           setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);
@@ -8194,12 +8195,13 @@ 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 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));
+  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));
+      }
     }
   };
   React.useEffect(() => {
@@ -8210,7 +8212,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: preventArrowDownShortcut
+    onKeyDown: handleKeyDown
   }));
 });
 
@@ -10060,13 +10062,6 @@ 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,
@@ -10091,8 +10086,6 @@ 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) {
@@ -10446,11 +10439,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) => setRowActiveIndex(currentIndex => {
-    const nextIndex = currentIndex !== undefined ? getNextIndex(direction, currentIndex, length) : 0;
-    setTimeout(() => scrollToIndex(nextIndex), 1);
-    return nextIndex;
-  });
+  const move = (direction, length, scrollToIndex) => {
+    const nextIndex = rowActiveIndex !== undefined ? getNextIndex(direction, rowActiveIndex, length) : 0;
+    scrollToIndex(nextIndex);
+    setTimeout(() => setRowActiveIndex(nextIndex), 50);
+  };
   const onKeyDown = React__default.useCallback((event, length, scrollToIndex) => {
     if (!isEnabled || event.defaultPrevented) {
       return;
@@ -11268,7 +11261,6 @@ 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,
@@ -11296,7 +11288,7 @@ function useTableManager(props, meta, internalColumns) {
       rowDrag,
       rowDrop: rowDrop,
       rowExpansion: rowExpansion,
-      rowIdentityColumnId,
+      rowIdentityColumnId: props.rowIdentityColumnId,
       rowGoto,
       rowGroups: rowGroups,
       rowHeight,
@@ -11673,7 +11665,7 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
   } = useRowHeightVirtualisation(table);
   // row groups
   const rangeExtractor = useRowGroupVirtualisation(table);
-  // account for thead and tfoot in the scroll area
+  // account for thead and tfoot in the scroll area - both are always medium row height
   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
@@ -13131,6 +13123,7 @@ function Body(props) {
     enableHorizontalArrowKeyNavigation = false,
     scrollToIndex,
     table,
+    tableElement,
     ...attributes
   } = props;
   const ref = React__default.useRef(null);
@@ -13148,12 +13141,30 @@ function Body(props) {
           return;
         }
         tableMeta.rowActive.setHoverStatePaused(true);
-        const focusedElement = event.shiftKey || event.key === 'ArrowLeft' ? focusManager.focusPrevious() : focusManager.focusNext();
+        const isMetaKeyPressed = isPressingMetaKey(event);
+        let focusedElement;
+        switch (event.key) {
+          case 'ArrowLeft':
+            focusedElement = isMetaKeyPressed ? focusManager.focusFirst() : focusManager.focusPrevious();
+            break;
+          case 'ArrowRight':
+            focusedElement = isMetaKeyPressed ? focusManager.focusLast() : focusManager.focusNext();
+            // Scrolls table all the way to the right
+            if (isMetaKeyPressed && tableElement) {
+              tableElement.scrollLeft = tableElement.scrollWidth;
+            }
+            break;
+          default:
+            focusedElement = event.shiftKey ? focusManager.focusPrevious() : focusManager.focusNext();
+            break;
+        }
         if (focusedElement) {
           // override default behaviour, since we're handling focus internally now
           event.preventDefault();
           return;
         }
+        // The code below only executes when focusedElement was undefined/null. This happens only when arrow-left/shift+tab
+        // is pressed on the first cell or arrow-right/tab is pressed on the last cell.
         if (event.shiftKey || event.key === 'ArrowLeft') {
           if (!isFirstRow) {
             // there are no previous elements to focus, go up a row or go outside the table
@@ -15233,6 +15244,8 @@ 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);
     }
@@ -15649,6 +15662,46 @@ function sortByHeader(a, b) {
 function isEmptyFilter(filter) {
   return !filter.value.hasOwnProperty('value'); // eslint-disable-line no-prototype-builtins
 }
+function guessComparatorsBasedOnControl(column) {
+  var _column$columnDef$met;
+  const columnMeta = (_column$columnDef$met = column === null || column === void 0 ? void 0 : column.columnDef.meta) !== null && _column$columnDef$met !== void 0 ? _column$columnDef$met : {};
+  if (Array.isArray(columnMeta.filters)) {
+    return columnMeta.filters;
+  }
+  if (typeof columnMeta.control === 'function') {
+    const renderedControl = columnMeta.control({
+      onBlur: () => undefined,
+      onFocus: () => undefined,
+      setValue: () => undefined,
+      value: undefined,
+      disabled: false,
+      readOnly: false,
+      ref: undefined
+    });
+    if ( /*#__PURE__*/React__default.isValidElement(renderedControl)) {
+      const {
+        props,
+        type
+      } = renderedControl;
+      if (type.displayName === 'Select2') {
+        if (props.multiple) {
+          return [exports.TableFilterComparator.HasAnyOf, exports.TableFilterComparator.HasAllOf, exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.HasNoneOf, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
+        }
+        return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
+      }
+    }
+  }
+  if (columnMeta.dataType === 'number') {
+    return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
+  }
+  if (columnMeta.control === 'datepicker' || columnMeta.dataType === 'datetime') {
+    return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty, exports.TableFilterComparator.IsLessThanOrEqualTo, exports.TableFilterComparator.IsGreaterThanOrEqualTo];
+  }
+  if (columnMeta.control === 'switch') {
+    return [exports.TableFilterComparator.IsEqualTo];
+  }
+  return [exports.TableFilterComparator.Contains, exports.TableFilterComparator.DoesNotContain, exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
+}
 
 const FilterColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
@@ -15702,11 +15755,6 @@ function FilterComparator(props) {
     texts
   } = useLocalization();
   const validComparators = guessComparatorsBasedOnControl(column);
-  React__default.useEffect(() => {
-    if (value === undefined || !validComparators.includes(value)) {
-      handleChange === null || handleChange === void 0 ? void 0 : handleChange(validComparators[0]);
-    }
-  }, [validComparators]);
   return /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, attributes, {
     className: "!w-32 flex-shrink-0",
     disabled: !column,
@@ -15717,49 +15765,9 @@ function FilterComparator(props) {
     value: comparator
   }, getComparatorText(comparator, texts, column)))));
 }
-function guessComparatorsBasedOnControl(column) {
-  var _column$columnDef$met;
-  const columnMeta = (_column$columnDef$met = column === null || column === void 0 ? void 0 : column.columnDef.meta) !== null && _column$columnDef$met !== void 0 ? _column$columnDef$met : {};
-  if (Array.isArray(columnMeta.filters)) {
-    return columnMeta.filters;
-  }
-  if (typeof columnMeta.control === 'function') {
-    const renderedControl = columnMeta.control({
-      onBlur: () => undefined,
-      onFocus: () => undefined,
-      setValue: () => undefined,
-      value: undefined,
-      disabled: false,
-      readOnly: false,
-      ref: undefined
-    });
-    if ( /*#__PURE__*/React__default.isValidElement(renderedControl)) {
-      const {
-        props,
-        type
-      } = renderedControl;
-      if (type.displayName === 'Select2') {
-        if (props.multiple) {
-          return [exports.TableFilterComparator.HasAnyOf, exports.TableFilterComparator.HasAllOf, exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.HasNoneOf, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
-        }
-        return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
-      }
-    }
-  }
-  if (columnMeta.dataType === 'number') {
-    return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
-  }
-  if (columnMeta.control === 'datepicker' || columnMeta.dataType === 'datetime') {
-    return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty, exports.TableFilterComparator.IsLessThanOrEqualTo, exports.TableFilterComparator.IsGreaterThanOrEqualTo];
-  }
-  if (columnMeta.control === 'switch') {
-    return [exports.TableFilterComparator.IsEqualTo];
-  }
-  return [exports.TableFilterComparator.Contains, exports.TableFilterComparator.DoesNotContain, exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
-}
 function getComparatorText(comparator, texts, column) {
-  var _column$columnDef, _column$columnDef$met2;
-  const isDate = (column === null || column === void 0 ? void 0 : (_column$columnDef = column.columnDef) === null || _column$columnDef === void 0 ? void 0 : (_column$columnDef$met2 = _column$columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.control) === 'datepicker';
+  var _column$columnDef, _column$columnDef$met;
+  const isDate = (column === null || column === void 0 ? void 0 : (_column$columnDef = column.columnDef) === null || _column$columnDef === void 0 ? void 0 : (_column$columnDef$met = _column$columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control) === 'datepicker';
   switch (comparator) {
     case exports.TableFilterComparator.Contains:
       return texts.table.filters.comparators.contains;
@@ -15935,14 +15943,22 @@ function Filter$1(props) {
     }
   } = filter;
   const handleChangeColumn = columnId => {
-    var _previousColumn$colum, _nextColumn$columnDef;
+    var _previousColumn$colum, _previousColumn$colum2, _nextColumn$columnDef;
     const previousColumn = allColumns.find(column => column.id === id);
     const nextColumn = allColumns.find(column => column.id === columnId);
     // UX requirement: if old column data type is the same as next column data type,
     // then we applying the same filter value for the next column,
     // but when data types are different, we're reseting comparator ans value for the next column
-    const value = (previousColumn === null || previousColumn === void 0 ? void 0 : (_previousColumn$colum = previousColumn.columnDef.meta) === null || _previousColumn$colum === void 0 ? void 0 : _previousColumn$colum.dataType) === (nextColumn === null || nextColumn === void 0 ? void 0 : (_nextColumn$columnDef = nextColumn.columnDef.meta) === null || _nextColumn$columnDef === void 0 ? void 0 : _nextColumn$columnDef.dataType) ? filter.value : {
-      comparator: exports.TableFilterComparator.Contains,
+    if (previousColumn !== null && previousColumn !== void 0 && (_previousColumn$colum = previousColumn.columnDef.meta) !== null && _previousColumn$colum !== void 0 && _previousColumn$colum.dataType && (previousColumn === null || previousColumn === void 0 ? void 0 : (_previousColumn$colum2 = previousColumn.columnDef.meta) === null || _previousColumn$colum2 === void 0 ? void 0 : _previousColumn$colum2.dataType) === (nextColumn === null || nextColumn === void 0 ? void 0 : (_nextColumn$columnDef = nextColumn.columnDef.meta) === null || _nextColumn$columnDef === void 0 ? void 0 : _nextColumn$columnDef.dataType)) {
+      handleChange(position, {
+        id: columnId,
+        value: filter.value
+      });
+      return;
+    }
+    const validComparators = guessComparatorsBasedOnControl(nextColumn);
+    const value = {
+      comparator: validComparators[0],
       value: undefined
     };
     handleChange(position, {
@@ -16255,6 +16271,7 @@ function TableGrid(props) {
   }))))))), table.instance.getRowModel().rows.length ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Body, {
     enableHorizontalArrowKeyNavigation: enableHorizontalArrowKeyNavigation,
     table: table.instance,
+    tableElement: table.ref.current,
     scrollToIndex: table.renderer.scrollToIndex,
     style: table.renderer.style
   }, table.renderer.rows), table.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Foot, {
@@ -17890,7 +17907,6 @@ function useTableEditing(isEnabled = false, handleSave, validator) {
       pendingChangesFns.saveChanges();
     }
   }, [pendingChangesFns.saveChanges]);
-  // TODO: using useGlobalKeyDown prevents trigger when focused on inputs, but it's more "proper"
   useGlobalKeyDown(isEnabled && isEditing ? {
     key: 's',
     meta: true,
@@ -18585,7 +18601,7 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
       return;
     }
     // toggle into detailed mode when actually inputting something
-    if (/^[a-z0-9]$/i.test(event.key) || event.key === 'Backspace') {
+    if (!isPressingMetaKey(event) && (/^[a-z0-9]$/i.test(event.key) || event.key === 'Backspace')) {
       toggleDetailedMode(true);
     }
   };
@@ -18793,7 +18809,7 @@ function Row$2(props) {
     if (tableMeta.editing.isEditing && isActiveRow) {
       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) && tableMeta.editing.lastFocusedCellIndex !== cellIndex) {
+      if (!isNaN(cellIndex)) {
         tableMeta.editing.setLastFocusedCellIndex(Number(cellIndex));
       }
     }
@@ -18854,22 +18870,6 @@ 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(() => {
@@ -18898,23 +18898,18 @@ 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 ?
-  // Since rowIdentityColumnId can have multiple ids, we use the first id to refer to the row in Alert
-  table.getColumn(tableMeta.rowIdentityColumnId[0]) : undefined;
+  const rowIdentityColumn = tableMeta.rowIdentityColumnId ? table.getColumn(tableMeta.rowIdentityColumnId) : 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.getFilteredRowModel().rows.findIndex(row => row.id === error.rowId);
+    const rowIndex = table.getRowModel().rows.findIndex(row => row.id === error.rowId);
     const handleClick = () => {
-      // if row is visible
       if (rowIndex > -1) {
         scrollToRow(rowIndex);
-      }
-      // if row is filtered out
-      else {
+      } else {
         setShowFilterResetDialog(error.rowId);
       }
     };