@economic/taco 2.30.2 → 2.31.0

package/dist/taco.cjs.development.js

@@ -5992,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.
     , {
@@ -6316,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",
@@ -6354,7 +6354,7 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
         }
       }, texts.datepicker.clear))))))))),
       tooltip: texts.datepicker.calendar
-    })
+    }))
   })));
 });
 Datepicker.displayName = 'Datepicker';
@@ -8984,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'
@@ -9055,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) {
@@ -10041,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,
@@ -10065,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) {
@@ -11240,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,
@@ -11267,7 +11296,7 @@ function useTableManager(props, meta, internalColumns) {
       rowDrag,
       rowDrop: rowDrop,
       rowExpansion: rowExpansion,
-      rowIdentityColumnId: props.rowIdentityColumnId,
+      rowIdentityColumnId,
       rowGoto,
       rowGroups: rowGroups,
       rowHeight,
@@ -14551,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,
@@ -14591,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 => {
@@ -14609,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"
   }));
@@ -14642,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) {
@@ -14695,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",
@@ -14755,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),
@@ -18804,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(() => {
@@ -18832,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);
       }
     };