@layerfi/components 0.1.114-alpha.6 → 0.1.114

package/dist/cjs/index.cjs

@@ -202,7 +202,7 @@ class ErrorHandlerClass {
 }
 const errorHandler = new ErrorHandlerClass();
 const reportError = (payload) => errorHandler.onError(payload);
-const version = "0.1.114-alpha.6";
+const version = "0.1.114";
 const pkg = {
   version
 };
@@ -8974,7 +8974,7 @@ function buildCustomDropdownIndicator() {
       Select$1.components.DropdownIndicator,
       __spreadProps(__spreadValues({}, restProps), {
         className: COMBO_BOX_CLASS_NAMES.DROPDOWN_INDICATOR,
-        children: !isDisabled && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 })
+        children: !isDisabled ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
       })
     );
   };
@@ -10423,7 +10423,7 @@ const BankTransactionsCategorizeAllModal = ({
   const { selectedIds } = useSelectedIds();
   const { clearSelection } = useBulkSelectionActions();
   const [selectedCategory, setSelectedCategory] = react.useState(null);
-  const { trigger } = useBulkCategorize();
+  const { trigger, isMutating } = useBulkCategorize();
   const handleCategorizeModalClose = react.useCallback((isOpen2) => {
     onOpenChange(isOpen2);
     if (!isOpen2) {
@@ -10459,7 +10459,7 @@ const BankTransactionsCategorizeAllModal = ({
       title: mode === "Categorize" ? "Categorize all selected transactions?" : "Recategorize all selected transactions?",
       content: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: categorySelectId, children: "Select category" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { size: "sm", htmlFor: categorySelectId, children: "Select category" }),
           useCategorySelectDrawer ? /* @__PURE__ */ jsxRuntime.jsx(
             CategorySelectDrawerWithTrigger,
             {
@@ -10474,7 +10474,8 @@ const BankTransactionsCategorizeAllModal = ({
               inputId: categorySelectId,
               selectedValue: selectedCategory,
               onSelectedValueChange: setSelectedCategory,
-              includeSuggestedMatches: false
+              includeSuggestedMatches: false,
+              isDisabled: isMutating
             }
           )
         ] }),
@@ -16160,6 +16161,24 @@ function useBankTransactionMetadata({ bankTransactionId }) {
   );
 }
 const UPDATE_BANK_TRANSACTION_METADATA_TAG_KEY = "#update-bank-transaction-metadata";
+class UpdateBankTransactionMetadataSWRResponse {
+  constructor(swrResponse) {
+    __publicField(this, "swrResponse");
+    this.swrResponse = swrResponse;
+  }
+  get data() {
+    return this.swrResponse.data;
+  }
+  get trigger() {
+    return this.swrResponse.trigger;
+  }
+  get isMutating() {
+    return this.swrResponse.isMutating;
+  }
+  get isError() {
+    return this.swrResponse.error !== void 0;
+  }
+}
 function buildKey$H({
   access_token: accessToken,
   apiUrl,
@@ -16180,7 +16199,7 @@ function useUpdateBankTransactionMetadata({ bankTransactionId, onSuccess }) {
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
   const { mutate } = useSWR.useSWRConfig();
-  const mutationResponse = useSWRMutation(
+  const rawMutationResponse = useSWRMutation(
     () => buildKey$H({
       access_token: auth == null ? void 0 : auth.access_token,
       apiUrl: auth == null ? void 0 : auth.apiUrl,
@@ -16206,6 +16225,7 @@ function useUpdateBankTransactionMetadata({ bankTransactionId, onSuccess }) {
       throwOnError: false
     }
   );
+  const mutationResponse = new UpdateBankTransactionMetadataSWRResponse(rawMutationResponse);
   const { trigger: originalTrigger } = mutationResponse;
   const stableProxiedTrigger = react.useCallback(
     (...triggerParameters) => __async(null, null, function* () {
@@ -16231,21 +16251,37 @@ function useUpdateBankTransactionMetadata({ bankTransactionId, onSuccess }) {
   });
 }
 const useBankTransactionMemo = ({ bankTransactionId }) => {
-  const { trigger: updateBankTransactionMetadata2 } = useUpdateBankTransactionMetadata({ bankTransactionId });
-  const { data: bankTransactionMetadata } = useBankTransactionMetadata({ bankTransactionId });
+  const {
+    trigger: updateBankTransactionMetadata2,
+    isMutating: isUpdatingMemo,
+    isError: isErrorUpdatingMemo,
+    data: updateResult
+  } = useUpdateBankTransactionMetadata({ bankTransactionId });
+  const { data: bankTransactionMetadata, mutate: mutateBankTransactionMetadata } = useBankTransactionMetadata({ bankTransactionId });
   const form = reactForm.useForm({
     defaultValues: {
       memo: bankTransactionMetadata == null ? void 0 : bankTransactionMetadata.memo
     },
     onSubmit: (_0) => __async(null, [_0], function* ({ value }) {
-      var _a;
+      var _a, _b;
       if (value.memo !== void 0 && form.state.isDirty) {
-        yield updateBankTransactionMetadata2({ memo: (_a = value.memo) != null ? _a : "" });
-        form.reset(value);
+        const result = yield mutateBankTransactionMetadata(
+          updateBankTransactionMetadata2({ memo: (_a = value.memo) != null ? _a : "" }),
+          { optimisticData: { memo: (_b = value.memo) != null ? _b : "" }, revalidate: false }
+        );
+        if (result !== void 0) {
+          form.reset(value);
+        }
       }
     })
   });
-  return form;
+  const isSaved = !isUpdatingMemo && !isErrorUpdatingMemo && updateResult !== void 0 && !form.state.isDirty;
+  return react.useMemo(() => ({
+    form,
+    isUpdatingMemo,
+    isErrorUpdatingMemo,
+    isSaved
+  }), [form, isErrorUpdatingMemo, isUpdatingMemo, isSaved]);
 };
 const Textarea = (_Pb) => {
   var _Qb = _Pb, {
@@ -16268,24 +16304,26 @@ const Textarea = (_Pb) => {
   ] });
 };
 const BankTransactionMemo = ({ bankTransactionId }) => {
-  const form = useBankTransactionMemo({ bankTransactionId });
+  const { form, isUpdatingMemo, isErrorUpdatingMemo, isSaved } = useBankTransactionMemo({ bankTransactionId });
   return /* @__PURE__ */ jsxRuntime.jsx("form", { onBlur: () => void form.handleSubmit(), children: /* @__PURE__ */ jsxRuntime.jsx(form.Field, { name: "memo", children: (field) => {
     var _a;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      InputGroup,
-      {
-        name: "memo",
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          Textarea,
-          {
-            name: "memo",
-            placeholder: "Add description",
-            value: (_a = field.state.value) != null ? _a : void 0,
-            onChange: (e) => field.handleChange(e.target.value)
-          }
-        )
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", align: "baseline", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "memo", size: "sm", weight: "bold", children: "Description" }),
+        isUpdatingMemo && /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", weight: "bold", variant: "subtle", children: "Saving..." }),
+        !isUpdatingMemo && isSaved && /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", status: "success", children: "Saved" }),
+        !isUpdatingMemo && !isSaved && isErrorUpdatingMemo && /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", weight: "bold", status: "error", children: "Error saving" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Textarea,
+        {
+          name: "memo",
+          placeholder: "Add description",
+          value: (_a = field.state.value) != null ? _a : void 0,
+          onChange: (e) => field.handleChange(e.target.value)
+        }
+      )
+    ] });
   } }) });
 };
 const range$1 = (start, end) => {
@@ -17425,10 +17463,7 @@ function BankTransactionFormFields({
         isReadOnly
       }
     ),
-    showDescriptions && /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", weight: "bold", children: "Description" }),
-      /* @__PURE__ */ jsxRuntime.jsx(BankTransactionMemo, { bankTransactionId: bankTransaction.id })
-    ] })
+    showDescriptions && /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionMemo, { bankTransactionId: bankTransaction.id }) })
   ] });
 }
 const ExpandedBankTransactionRow = react.forwardRef(
@@ -17657,8 +17692,7 @@ const ExpandedBankTransactionRow = react.forwardRef(
                                     onSelectedValueChange: (value) => {
                                       changeCategoryForSplitAtIndex(index2, value);
                                     },
-                                    isLoading: bankTransaction.processing,
-                                    isDisabled: !categorizationEnabled,
+                                    isDisabled: !categorizationEnabled || bankTransaction.processing,
                                     includeSuggestedMatches: false
                                   }
                                 ),
@@ -17837,6 +17871,7 @@ const BankTransactionRow = ({
   const { setTransactionCategory } = useBankTransactionsCategoryActions();
   const { selectedCategory } = useGetBankTransactionCategory(bankTransaction.id);
   const { saveBankTransactionRow } = useSaveBankTransactionRow();
+  const displayAsCategorized = bankTransaction.recently_categorized && shouldHideAfterCategorize() ? false : categorized;
   react.useEffect(() => {
     if (bankTransaction.error) {
       setShowRetry(true);
@@ -17979,12 +18014,12 @@ const BankTransactionRow = ({
                 className: "Layer__bank-transaction__submit-btn",
                 processing: bankTransaction.processing,
                 active: open,
-                action: categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
+                action: displayAsCategorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
                 disabled: selectedCategory === null,
-                children: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
+                children: displayAsCategorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
               }
             ),
-            !categorizationEnabled && !categorized && /* @__PURE__ */ jsxRuntime.jsx(VStack, { pis: "lg", fluid: true, children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
+            !categorizationEnabled && !displayAsCategorized && /* @__PURE__ */ jsxRuntime.jsx(VStack, { pis: "lg", fluid: true, children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               IconButton,
               {
@@ -18006,7 +18041,7 @@ const BankTransactionRow = ({
                 variant: "fade",
                 isOpen: categorizationEnabled && !categorized,
                 className: "Layer__BankTransactionRow__CategoryComboBoxMotionContent",
-                slotProps: { AnimatePresence: { mode: "wait" } },
+                slotProps: { AnimatePresence: { mode: "wait", initial: false } },
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   BankTransactionCategoryComboBox,
                   {
@@ -18016,20 +18051,20 @@ const BankTransactionRow = ({
                       setTransactionCategory(bankTransaction.id, selectedCategory2);
                       setShowRetry(false);
                     },
-                    isLoading: bankTransaction.processing
+                    isDisabled: bankTransaction.processing
                   }
                 )
               },
               "category-combobox"
             ),
-            categorized && /* @__PURE__ */ jsxRuntime.jsx(
+            displayAsCategorized && /* @__PURE__ */ jsxRuntime.jsx(
               BankTransactionsCategorizedSelectedValue,
               {
                 bankTransaction,
                 className: "Layer__bank-transaction-row__category"
               }
             ),
-            categorizationEnabled && !categorized && showRetry && /* @__PURE__ */ jsxRuntime.jsx(
+            !displayAsCategorized && categorizationEnabled && showRetry && /* @__PURE__ */ jsxRuntime.jsx(
               RetryButton,
               {
                 onClick: () => {
@@ -18043,7 +18078,7 @@ const BankTransactionRow = ({
                 children: "Retry"
               }
             ),
-            !categorized && categorizationEnabled && !showRetry && /* @__PURE__ */ jsxRuntime.jsx(
+            !displayAsCategorized && categorizationEnabled && !showRetry && /* @__PURE__ */ jsxRuntime.jsx(
               SubmitButton,
               {
                 onClick: () => {
@@ -18055,11 +18090,11 @@ const BankTransactionRow = ({
                 processing: bankTransaction.processing,
                 active: open,
                 disabled: selectedCategory === null,
-                action: categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
-                children: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
+                action: displayAsCategorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
+                children: displayAsCategorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
               }
             ),
-            !categorizationEnabled && !categorized && /* @__PURE__ */ jsxRuntime.jsx(VStack, { pis: "xs", fluid: true, children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
+            !categorizationEnabled && !displayAsCategorized && /* @__PURE__ */ jsxRuntime.jsx(VStack, { pis: "xs", fluid: true, children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               IconButton,
               {
@@ -18083,7 +18118,7 @@ const BankTransactionRow = ({
       {
         ref: expandedRowRef,
         bankTransaction,
-        categorized,
+        categorized: displayAsCategorized,
         isOpen: open,
         close: () => setOpen(false),
         containerWidth,
@@ -18189,6 +18224,7 @@ const BankTransactionsListItem = ({
   const bookkeepingStatus = useEffectiveBookkeepingStatus();
   const categorizationEnabled = isCategorizationEnabledForStatus(bookkeepingStatus);
   const categorized = isCategorized(bankTransaction);
+  const displayAsCategorized = bankTransaction.recently_categorized && shouldHideAfterCategorize() ? false : categorized;
   const { isVisible } = useDelayedVisibility({ delay: index2 * 80 });
   const { select, deselect } = useBulkSelectionActions();
   const isSelected = useIdIsSelected();
@@ -18285,7 +18321,7 @@ const BankTransactionsListItem = ({
         }
       )
     ] }),
-    !categorizationEnabled && !categorized && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__bank-transaction-list-item__processing-info", children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
+    !categorizationEnabled && !displayAsCategorized && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__bank-transaction-list-item__processing-info", children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__bank-transaction-list-item__expanded-row", onClick: preventRowExpansion, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedPresenceDiv, { variant: "expand", isOpen: openExpandedRow, children: /* @__PURE__ */ jsxRuntime.jsx(
       ExpandedBankTransactionRow,
       {
@@ -18293,9 +18329,9 @@ const BankTransactionsListItem = ({
         bankTransaction,
         isOpen: openExpandedRow,
         close: () => setOpenExpandedRow(false),
-        categorized,
+        categorized: displayAsCategorized,
         asListItem: true,
-        submitBtnText: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Approve",
+        submitBtnText: displayAsCategorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Approve",
         containerWidth,
         showDescriptions,
         showReceiptUploads,
@@ -18303,7 +18339,7 @@ const BankTransactionsListItem = ({
         variant: "list"
       }
     ) }, `expanded-${bankTransaction.id}`) }),
-    !openExpandedRow && categorizationEnabled && !categorized && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: preventRowExpansion, children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pi: "md", gap: "md", pb: "md", children: [
+    !openExpandedRow && categorizationEnabled && !displayAsCategorized && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: preventRowExpansion, children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pi: "md", gap: "md", pb: "md", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         BankTransactionCategoryComboBox,
         {
@@ -18313,7 +18349,7 @@ const BankTransactionsListItem = ({
             setTransactionCategory(bankTransaction.id, selectedCategory2);
             setShowRetry(false);
           },
-          isLoading: bankTransaction.processing
+          isDisabled: bankTransaction.processing
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -18323,14 +18359,14 @@ const BankTransactionsListItem = ({
           onClick: handleSave,
           className: showRetry ? "Layer__bank-transaction__retry-btn" : "Layer__bank-transaction__submit-btn",
           processing: bankTransaction.processing,
-          action: !categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
+          action: !displayAsCategorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
           withRetry: true,
           error: showRetry ? "Approval failed. Check connection and retry in few seconds." : void 0,
-          children: showRetry ? "Retry" : !categorized ? (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Approve" : (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update"
+          children: showRetry ? "Retry" : !displayAsCategorized ? (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Approve" : (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update"
         }
       )
     ] }) }),
-    !openExpandedRow && categorized && /* @__PURE__ */ jsxRuntime.jsx(
+    !openExpandedRow && displayAsCategorized && /* @__PURE__ */ jsxRuntime.jsx(
       BankTransactionsListItemCategory,
       {
         bankTransaction
@@ -19424,6 +19460,7 @@ const BankTransactionsMobileListItem = ({
   const { shouldHideAfterCategorize } = useBankTransactionsContext();
   const categorized = isCategorized(bankTransaction);
   const itemRef = react.useRef(null);
+  const displayAsCategorized = bankTransaction.recently_categorized && shouldHideAfterCategorize() ? false : categorized;
   const [open, setOpen] = react.useState(isFirstItem);
   const openNext = () => {
     if (editable && itemRef.current && itemRef.current.nextSibling) {
@@ -19510,11 +19547,11 @@ const BankTransactionsMobileListItem = ({
   const isTransactionSelected = isSelected(bankTransaction.id);
   const { renderInAppLink } = useInAppLinkContext();
   const inAppLink = react.useMemo(() => {
-    if (!categorized) {
+    if (!displayAsCategorized) {
       return null;
     }
     return getInAppLink(bankTransaction, renderInAppLink);
-  }, [categorized, bankTransaction, renderInAppLink]);
+  }, [displayAsCategorized, bankTransaction, renderInAppLink]);
   const { isVisible } = useDelayedVisibility({ delay: index2 * 20, initialVisibility: Boolean(initialLoad) });
   const className = "Layer__bank-transaction-mobile-list-item";
   const openClassName = open ? `${className}--expanded` : "";
@@ -19581,7 +19618,7 @@ const BankTransactionsMobileListItem = ({
               ]
             }
           ),
-          !open && (!categorizationEnabled && !categorized ? /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, { showAsBadge: true }) : /* @__PURE__ */ jsxRuntime.jsx(
+          !open && (!categorizationEnabled && !displayAsCategorized ? /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, { showAsBadge: true }) : /* @__PURE__ */ jsxRuntime.jsx(
             BankTransactionsListItemCategory,
             {
               bankTransaction,

package/dist/esm/index.mjs

@@ -202,7 +202,7 @@ class ErrorHandlerClass {
 }
 const errorHandler = new ErrorHandlerClass();
 const reportError = (payload) => errorHandler.onError(payload);
-const version = "0.1.114-alpha.6";
+const version = "0.1.114";
 const pkg = {
   version
 };
@@ -7498,7 +7498,7 @@ function buildCustomDropdownIndicator() {
       components.DropdownIndicator,
       __spreadProps(__spreadValues({}, restProps), {
         className: COMBO_BOX_CLASS_NAMES.DROPDOWN_INDICATOR,
-        children: !isDisabled && /* @__PURE__ */ jsx(ChevronDown$1, { size: 16 })
+        children: !isDisabled ? /* @__PURE__ */ jsx(ChevronDown$1, { size: 16 }) : /* @__PURE__ */ jsx(Fragment, {})
       })
     );
   };
@@ -8947,7 +8947,7 @@ const BankTransactionsCategorizeAllModal = ({
   const { selectedIds } = useSelectedIds();
   const { clearSelection } = useBulkSelectionActions();
   const [selectedCategory, setSelectedCategory] = useState(null);
-  const { trigger } = useBulkCategorize();
+  const { trigger, isMutating } = useBulkCategorize();
   const handleCategorizeModalClose = useCallback((isOpen2) => {
     onOpenChange(isOpen2);
     if (!isOpen2) {
@@ -8983,7 +8983,7 @@ const BankTransactionsCategorizeAllModal = ({
       title: mode === "Categorize" ? "Categorize all selected transactions?" : "Recategorize all selected transactions?",
       content: /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
         /* @__PURE__ */ jsxs(VStack, { gap: "3xs", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: categorySelectId, children: "Select category" }),
+          /* @__PURE__ */ jsx(Label, { size: "sm", htmlFor: categorySelectId, children: "Select category" }),
           useCategorySelectDrawer ? /* @__PURE__ */ jsx(
             CategorySelectDrawerWithTrigger,
             {
@@ -8998,7 +8998,8 @@ const BankTransactionsCategorizeAllModal = ({
               inputId: categorySelectId,
               selectedValue: selectedCategory,
               onSelectedValueChange: setSelectedCategory,
-              includeSuggestedMatches: false
+              includeSuggestedMatches: false,
+              isDisabled: isMutating
             }
           )
         ] }),
@@ -14684,6 +14685,24 @@ function useBankTransactionMetadata({ bankTransactionId }) {
   );
 }
 const UPDATE_BANK_TRANSACTION_METADATA_TAG_KEY = "#update-bank-transaction-metadata";
+class UpdateBankTransactionMetadataSWRResponse {
+  constructor(swrResponse) {
+    __publicField(this, "swrResponse");
+    this.swrResponse = swrResponse;
+  }
+  get data() {
+    return this.swrResponse.data;
+  }
+  get trigger() {
+    return this.swrResponse.trigger;
+  }
+  get isMutating() {
+    return this.swrResponse.isMutating;
+  }
+  get isError() {
+    return this.swrResponse.error !== void 0;
+  }
+}
 function buildKey$H({
   access_token: accessToken,
   apiUrl,
@@ -14704,7 +14723,7 @@ function useUpdateBankTransactionMetadata({ bankTransactionId, onSuccess }) {
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
   const { mutate } = useSWRConfig();
-  const mutationResponse = useSWRMutation(
+  const rawMutationResponse = useSWRMutation(
     () => buildKey$H({
       access_token: auth == null ? void 0 : auth.access_token,
       apiUrl: auth == null ? void 0 : auth.apiUrl,
@@ -14730,6 +14749,7 @@ function useUpdateBankTransactionMetadata({ bankTransactionId, onSuccess }) {
       throwOnError: false
     }
   );
+  const mutationResponse = new UpdateBankTransactionMetadataSWRResponse(rawMutationResponse);
   const { trigger: originalTrigger } = mutationResponse;
   const stableProxiedTrigger = useCallback(
     (...triggerParameters) => __async(null, null, function* () {
@@ -14755,21 +14775,37 @@ function useUpdateBankTransactionMetadata({ bankTransactionId, onSuccess }) {
   });
 }
 const useBankTransactionMemo = ({ bankTransactionId }) => {
-  const { trigger: updateBankTransactionMetadata2 } = useUpdateBankTransactionMetadata({ bankTransactionId });
-  const { data: bankTransactionMetadata } = useBankTransactionMetadata({ bankTransactionId });
+  const {
+    trigger: updateBankTransactionMetadata2,
+    isMutating: isUpdatingMemo,
+    isError: isErrorUpdatingMemo,
+    data: updateResult
+  } = useUpdateBankTransactionMetadata({ bankTransactionId });
+  const { data: bankTransactionMetadata, mutate: mutateBankTransactionMetadata } = useBankTransactionMetadata({ bankTransactionId });
   const form = useForm$1({
     defaultValues: {
       memo: bankTransactionMetadata == null ? void 0 : bankTransactionMetadata.memo
     },
     onSubmit: (_0) => __async(null, [_0], function* ({ value }) {
-      var _a;
+      var _a, _b;
       if (value.memo !== void 0 && form.state.isDirty) {
-        yield updateBankTransactionMetadata2({ memo: (_a = value.memo) != null ? _a : "" });
-        form.reset(value);
+        const result = yield mutateBankTransactionMetadata(
+          updateBankTransactionMetadata2({ memo: (_a = value.memo) != null ? _a : "" }),
+          { optimisticData: { memo: (_b = value.memo) != null ? _b : "" }, revalidate: false }
+        );
+        if (result !== void 0) {
+          form.reset(value);
+        }
       }
     })
   });
-  return form;
+  const isSaved = !isUpdatingMemo && !isErrorUpdatingMemo && updateResult !== void 0 && !form.state.isDirty;
+  return useMemo(() => ({
+    form,
+    isUpdatingMemo,
+    isErrorUpdatingMemo,
+    isSaved
+  }), [form, isErrorUpdatingMemo, isUpdatingMemo, isSaved]);
 };
 const Textarea = (_Pb) => {
   var _Qb = _Pb, {
@@ -14792,24 +14828,26 @@ const Textarea = (_Pb) => {
   ] });
 };
 const BankTransactionMemo = ({ bankTransactionId }) => {
-  const form = useBankTransactionMemo({ bankTransactionId });
+  const { form, isUpdatingMemo, isErrorUpdatingMemo, isSaved } = useBankTransactionMemo({ bankTransactionId });
   return /* @__PURE__ */ jsx("form", { onBlur: () => void form.handleSubmit(), children: /* @__PURE__ */ jsx(form.Field, { name: "memo", children: (field) => {
     var _a;
-    return /* @__PURE__ */ jsx(
-      InputGroup,
-      {
-        name: "memo",
-        children: /* @__PURE__ */ jsx(
-          Textarea,
-          {
-            name: "memo",
-            placeholder: "Add description",
-            value: (_a = field.state.value) != null ? _a : void 0,
-            onChange: (e) => field.handleChange(e.target.value)
-          }
-        )
-      }
-    );
+    return /* @__PURE__ */ jsxs(VStack, { gap: "3xs", children: [
+      /* @__PURE__ */ jsxs(HStack, { justify: "space-between", align: "baseline", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "memo", size: "sm", weight: "bold", children: "Description" }),
+        isUpdatingMemo && /* @__PURE__ */ jsx(Span, { size: "sm", weight: "bold", variant: "subtle", children: "Saving..." }),
+        !isUpdatingMemo && isSaved && /* @__PURE__ */ jsx(Span, { size: "sm", status: "success", children: "Saved" }),
+        !isUpdatingMemo && !isSaved && isErrorUpdatingMemo && /* @__PURE__ */ jsx(Span, { size: "sm", weight: "bold", status: "error", children: "Error saving" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          name: "memo",
+          placeholder: "Add description",
+          value: (_a = field.state.value) != null ? _a : void 0,
+          onChange: (e) => field.handleChange(e.target.value)
+        }
+      )
+    ] });
   } }) });
 };
 const range$1 = (start, end) => {
@@ -15949,10 +15987,7 @@ function BankTransactionFormFields({
         isReadOnly
       }
     ),
-    showDescriptions && /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
-      /* @__PURE__ */ jsx(Span, { size: "sm", weight: "bold", children: "Description" }),
-      /* @__PURE__ */ jsx(BankTransactionMemo, { bankTransactionId: bankTransaction.id })
-    ] })
+    showDescriptions && /* @__PURE__ */ jsx(VStack, { gap: "sm", children: /* @__PURE__ */ jsx(BankTransactionMemo, { bankTransactionId: bankTransaction.id }) })
   ] });
 }
 const ExpandedBankTransactionRow = forwardRef(
@@ -16181,8 +16216,7 @@ const ExpandedBankTransactionRow = forwardRef(
                                     onSelectedValueChange: (value) => {
                                       changeCategoryForSplitAtIndex(index, value);
                                     },
-                                    isLoading: bankTransaction.processing,
-                                    isDisabled: !categorizationEnabled,
+                                    isDisabled: !categorizationEnabled || bankTransaction.processing,
                                     includeSuggestedMatches: false
                                   }
                                 ),
@@ -16361,6 +16395,7 @@ const BankTransactionRow = ({
   const { setTransactionCategory } = useBankTransactionsCategoryActions();
   const { selectedCategory } = useGetBankTransactionCategory(bankTransaction.id);
   const { saveBankTransactionRow } = useSaveBankTransactionRow();
+  const displayAsCategorized = bankTransaction.recently_categorized && shouldHideAfterCategorize() ? false : categorized;
   useEffect(() => {
     if (bankTransaction.error) {
       setShowRetry(true);
@@ -16503,12 +16538,12 @@ const BankTransactionRow = ({
                 className: "Layer__bank-transaction__submit-btn",
                 processing: bankTransaction.processing,
                 active: open,
-                action: categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
+                action: displayAsCategorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
                 disabled: selectedCategory === null,
-                children: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
+                children: displayAsCategorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
               }
             ),
-            !categorizationEnabled && !categorized && /* @__PURE__ */ jsx(VStack, { pis: "lg", fluid: true, children: /* @__PURE__ */ jsx(BankTransactionsProcessingInfo, {}) }),
+            !categorizationEnabled && !displayAsCategorized && /* @__PURE__ */ jsx(VStack, { pis: "lg", fluid: true, children: /* @__PURE__ */ jsx(BankTransactionsProcessingInfo, {}) }),
             /* @__PURE__ */ jsx(
               IconButton,
               {
@@ -16530,7 +16565,7 @@ const BankTransactionRow = ({
                 variant: "fade",
                 isOpen: categorizationEnabled && !categorized,
                 className: "Layer__BankTransactionRow__CategoryComboBoxMotionContent",
-                slotProps: { AnimatePresence: { mode: "wait" } },
+                slotProps: { AnimatePresence: { mode: "wait", initial: false } },
                 children: /* @__PURE__ */ jsx(
                   BankTransactionCategoryComboBox,
                   {
@@ -16540,20 +16575,20 @@ const BankTransactionRow = ({
                       setTransactionCategory(bankTransaction.id, selectedCategory2);
                       setShowRetry(false);
                     },
-                    isLoading: bankTransaction.processing
+                    isDisabled: bankTransaction.processing
                   }
                 )
               },
               "category-combobox"
             ),
-            categorized && /* @__PURE__ */ jsx(
+            displayAsCategorized && /* @__PURE__ */ jsx(
               BankTransactionsCategorizedSelectedValue,
               {
                 bankTransaction,
                 className: "Layer__bank-transaction-row__category"
               }
             ),
-            categorizationEnabled && !categorized && showRetry && /* @__PURE__ */ jsx(
+            !displayAsCategorized && categorizationEnabled && showRetry && /* @__PURE__ */ jsx(
               RetryButton,
               {
                 onClick: () => {
@@ -16567,7 +16602,7 @@ const BankTransactionRow = ({
                 children: "Retry"
               }
             ),
-            !categorized && categorizationEnabled && !showRetry && /* @__PURE__ */ jsx(
+            !displayAsCategorized && categorizationEnabled && !showRetry && /* @__PURE__ */ jsx(
               SubmitButton,
               {
                 onClick: () => {
@@ -16579,11 +16614,11 @@ const BankTransactionRow = ({
                 processing: bankTransaction.processing,
                 active: open,
                 disabled: selectedCategory === null,
-                action: categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
-                children: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
+                action: displayAsCategorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
+                children: displayAsCategorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
               }
             ),
-            !categorizationEnabled && !categorized && /* @__PURE__ */ jsx(VStack, { pis: "xs", fluid: true, children: /* @__PURE__ */ jsx(BankTransactionsProcessingInfo, {}) }),
+            !categorizationEnabled && !displayAsCategorized && /* @__PURE__ */ jsx(VStack, { pis: "xs", fluid: true, children: /* @__PURE__ */ jsx(BankTransactionsProcessingInfo, {}) }),
             /* @__PURE__ */ jsx(
               IconButton,
               {
@@ -16607,7 +16642,7 @@ const BankTransactionRow = ({
       {
         ref: expandedRowRef,
         bankTransaction,
-        categorized,
+        categorized: displayAsCategorized,
         isOpen: open,
         close: () => setOpen(false),
         containerWidth,
@@ -16713,6 +16748,7 @@ const BankTransactionsListItem = ({
   const bookkeepingStatus = useEffectiveBookkeepingStatus();
   const categorizationEnabled = isCategorizationEnabledForStatus(bookkeepingStatus);
   const categorized = isCategorized(bankTransaction);
+  const displayAsCategorized = bankTransaction.recently_categorized && shouldHideAfterCategorize() ? false : categorized;
   const { isVisible } = useDelayedVisibility({ delay: index * 80 });
   const { select, deselect } = useBulkSelectionActions();
   const isSelected = useIdIsSelected();
@@ -16809,7 +16845,7 @@ const BankTransactionsListItem = ({
         }
       )
     ] }),
-    !categorizationEnabled && !categorized && /* @__PURE__ */ jsx("span", { className: "Layer__bank-transaction-list-item__processing-info", children: /* @__PURE__ */ jsx(BankTransactionsProcessingInfo, {}) }),
+    !categorizationEnabled && !displayAsCategorized && /* @__PURE__ */ jsx("span", { className: "Layer__bank-transaction-list-item__processing-info", children: /* @__PURE__ */ jsx(BankTransactionsProcessingInfo, {}) }),
     /* @__PURE__ */ jsx("span", { className: "Layer__bank-transaction-list-item__expanded-row", onClick: preventRowExpansion, children: /* @__PURE__ */ jsx(AnimatedPresenceDiv, { variant: "expand", isOpen: openExpandedRow, children: /* @__PURE__ */ jsx(
       ExpandedBankTransactionRow,
       {
@@ -16817,9 +16853,9 @@ const BankTransactionsListItem = ({
         bankTransaction,
         isOpen: openExpandedRow,
         close: () => setOpenExpandedRow(false),
-        categorized,
+        categorized: displayAsCategorized,
         asListItem: true,
-        submitBtnText: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Approve",
+        submitBtnText: displayAsCategorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Approve",
         containerWidth,
         showDescriptions,
         showReceiptUploads,
@@ -16827,7 +16863,7 @@ const BankTransactionsListItem = ({
         variant: "list"
       }
     ) }, `expanded-${bankTransaction.id}`) }),
-    !openExpandedRow && categorizationEnabled && !categorized && /* @__PURE__ */ jsx("div", { onClick: preventRowExpansion, children: /* @__PURE__ */ jsxs(HStack, { pi: "md", gap: "md", pb: "md", children: [
+    !openExpandedRow && categorizationEnabled && !displayAsCategorized && /* @__PURE__ */ jsx("div", { onClick: preventRowExpansion, children: /* @__PURE__ */ jsxs(HStack, { pi: "md", gap: "md", pb: "md", children: [
       /* @__PURE__ */ jsx(
         BankTransactionCategoryComboBox,
         {
@@ -16837,7 +16873,7 @@ const BankTransactionsListItem = ({
             setTransactionCategory(bankTransaction.id, selectedCategory2);
             setShowRetry(false);
           },
-          isLoading: bankTransaction.processing
+          isDisabled: bankTransaction.processing
         }
       ),
       /* @__PURE__ */ jsx(
@@ -16847,14 +16883,14 @@ const BankTransactionsListItem = ({
           onClick: handleSave,
           className: showRetry ? "Layer__bank-transaction__retry-btn" : "Layer__bank-transaction__submit-btn",
           processing: bankTransaction.processing,
-          action: !categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
+          action: !displayAsCategorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
           withRetry: true,
           error: showRetry ? "Approval failed. Check connection and retry in few seconds." : void 0,
-          children: showRetry ? "Retry" : !categorized ? (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Approve" : (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update"
+          children: showRetry ? "Retry" : !displayAsCategorized ? (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Approve" : (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update"
         }
       )
     ] }) }),
-    !openExpandedRow && categorized && /* @__PURE__ */ jsx(
+    !openExpandedRow && displayAsCategorized && /* @__PURE__ */ jsx(
       BankTransactionsListItemCategory,
       {
         bankTransaction
@@ -17948,6 +17984,7 @@ const BankTransactionsMobileListItem = ({
   const { shouldHideAfterCategorize } = useBankTransactionsContext();
   const categorized = isCategorized(bankTransaction);
   const itemRef = useRef(null);
+  const displayAsCategorized = bankTransaction.recently_categorized && shouldHideAfterCategorize() ? false : categorized;
   const [open, setOpen] = useState(isFirstItem);
   const openNext = () => {
     if (editable && itemRef.current && itemRef.current.nextSibling) {
@@ -18034,11 +18071,11 @@ const BankTransactionsMobileListItem = ({
   const isTransactionSelected = isSelected(bankTransaction.id);
   const { renderInAppLink } = useInAppLinkContext();
   const inAppLink = useMemo(() => {
-    if (!categorized) {
+    if (!displayAsCategorized) {
       return null;
     }
     return getInAppLink(bankTransaction, renderInAppLink);
-  }, [categorized, bankTransaction, renderInAppLink]);
+  }, [displayAsCategorized, bankTransaction, renderInAppLink]);
   const { isVisible } = useDelayedVisibility({ delay: index * 20, initialVisibility: Boolean(initialLoad) });
   const className = "Layer__bank-transaction-mobile-list-item";
   const openClassName = open ? `${className}--expanded` : "";
@@ -18105,7 +18142,7 @@ const BankTransactionsMobileListItem = ({
               ]
             }
           ),
-          !open && (!categorizationEnabled && !categorized ? /* @__PURE__ */ jsx(BankTransactionsProcessingInfo, { showAsBadge: true }) : /* @__PURE__ */ jsx(
+          !open && (!categorizationEnabled && !displayAsCategorized ? /* @__PURE__ */ jsx(BankTransactionsProcessingInfo, { showAsBadge: true }) : /* @__PURE__ */ jsx(
             BankTransactionsListItemCategory,
             {
               bankTransaction,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layerfi/components",
-  "version": "0.1.114-alpha.6",
+  "version": "0.1.114",
   "description": "Layer React Components",
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.mjs",