@layerfi/components 0.1.64 → 0.1.66

package/dist/esm/index.js

@@ -4881,7 +4881,8 @@ import classNames23 from "classnames";
 var ActionableList = ({
   options,
   onClick,
-  selectedId
+  selectedId,
+  showDescriptions = false
 }) => {
   return /* @__PURE__ */ React68.createElement("ul", { className: "Layer__actionable-list" }, options.map((x, idx) => /* @__PURE__ */ React68.createElement(
     "li",
@@ -4900,7 +4901,7 @@ var ActionableList = ({
       { className: "Layer__actionable-list__content" },
       /* @__PURE__ */ React68.createElement(Text, { size: "sm" /* sm */ }, x.label),
       /*TODO: Replace 'See all categories' with something more generic*/
-      x.description && x.label !== "See all categories" && /* @__PURE__ */ React68.createElement(
+      showDescriptions && x.description && x.label !== "See all categories" && /* @__PURE__ */ React68.createElement(
         Text,
         {
           className: "Layer__actionable-list__content-description",
@@ -4986,7 +4987,8 @@ var getAssignedValue = (bankTransaction) => {
 // src/components/BankTransactionMobileList/BusinessCategories.tsx
 var BusinessCategories = ({
   select,
-  selectedId
+  selectedId,
+  showTooltips
 }) => {
   const { categories } = useLayerContext();
   const categoryOptions = flattenCategories(
@@ -5014,7 +5016,8 @@ var BusinessCategories = ({
     {
       options: optionsToShow,
       onClick: onCategorySelect,
-      selectedId
+      selectedId,
+      showDescriptions: showTooltips
     }
   ));
 };
@@ -5023,7 +5026,8 @@ var BusinessCategories = ({
 import classNames24 from "classnames";
 var CategorySelectDrawer = ({
   onSelect,
-  selected
+  selected,
+  showTooltips
 }) => {
   const { setContent, close } = useContext9(DrawerContext);
   const onDrawerCategorySelect = (value) => {
@@ -5043,7 +5047,8 @@ var CategorySelectDrawer = ({
           CategorySelectDrawerContent,
           {
             selected,
-            onSelect: onDrawerCategorySelect
+            onSelect: onDrawerCategorySelect,
+            showTooltips: true
           }
         )
       )
@@ -5060,7 +5065,8 @@ var CategorySelectDrawer = ({
 };
 var CategorySelectDrawerContent = ({
   onSelect,
-  selected
+  selected,
+  showTooltips
 }) => /* @__PURE__ */ React70.createElement(
   BusinessCategories,
   {
@@ -5072,7 +5078,8 @@ var CategorySelectDrawerContent = ({
         }
       });
     },
-    selectedId: selected?.payload?.id
+    selectedId: selected?.payload?.id,
+    showTooltips
   }
 );
 
@@ -5156,7 +5163,7 @@ var Option2 = (props) => {
       className: `Layer__select__option-menu-content ${props.className}`
     },
     /* @__PURE__ */ React71.createElement("div", { className: "Layer__select__option-menu--name" }, props.isSelected ? /* @__PURE__ */ React71.createElement("span", { className: "Layer__select__option-menu-content-check" }, /* @__PURE__ */ React71.createElement(Check_default, { size: 16 })) : /* @__PURE__ */ React71.createElement("span", { className: "Layer__select__option-menu-content-check" }, /* @__PURE__ */ React71.createElement("div", { style: { width: 16, height: 16 } })), /* @__PURE__ */ React71.createElement("div", null, props.data.payload.display_name)),
-    props.data.payload.description && /* @__PURE__ */ React71.createElement("div", { className: "Layer__select__option-menu--tooltip" }, /* @__PURE__ */ React71.createElement(Tooltip, null, /* @__PURE__ */ React71.createElement(TooltipTrigger, null, /* @__PURE__ */ React71.createElement(InfoIcon_default, null)), /* @__PURE__ */ React71.createElement(TooltipContent, { className: "Layer__actionable-list__tooltip-content" }, /* @__PURE__ */ React71.createElement(
+    props.showTooltips && props.data.payload.description && /* @__PURE__ */ React71.createElement("div", { className: "Layer__select__option-menu--tooltip" }, /* @__PURE__ */ React71.createElement(Tooltip, null, /* @__PURE__ */ React71.createElement(TooltipTrigger, null, /* @__PURE__ */ React71.createElement(InfoIcon_default, null)), /* @__PURE__ */ React71.createElement(TooltipContent, { className: "Layer__actionable-list__tooltip-content" }, /* @__PURE__ */ React71.createElement(
       Text,
       {
         className: "Layer__actionable-list__content-description",
@@ -5205,6 +5212,7 @@ var CategorySelect = ({
   onChange,
   disabled,
   className,
+  showTooltips,
   excludeMatches = false,
   asDrawer = false
 }) => {
@@ -5244,7 +5252,14 @@ var CategorySelect = ({
   const selected = value ? value : !excludeMatches && matchOptions?.length === 1 && matchOptions[0].options.length === 1 ? matchOptions[0].options[0] : void 0;
   const placeholder = matchOptions?.length === 1 && matchOptions[0].options.length > 1 ? `${matchOptions[0].options.length} possible matches...` : "Categorize or match...";
   if (asDrawer) {
-    return /* @__PURE__ */ React71.createElement(CategorySelectDrawer, { onSelect: onChange, selected: value });
+    return /* @__PURE__ */ React71.createElement(
+      CategorySelectDrawer,
+      {
+        onSelect: onChange,
+        selected: value,
+        showTooltips
+      }
+    );
   }
   return /* @__PURE__ */ React71.createElement(
     Select,
@@ -5268,7 +5283,11 @@ var CategorySelect = ({
       styles: {
         menuPortal: (base) => ({ ...base, zIndex: 9999 })
       },
-      components: { DropdownIndicator, GroupHeading, Option: Option2 },
+      components: {
+        DropdownIndicator,
+        GroupHeading,
+        Option: (optionProps) => /* @__PURE__ */ React71.createElement(Option2, { ...optionProps, showTooltips })
+      },
       isDisabled: disabled,
       isOptionDisabled: (option) => option.disabled ?? false,
       isOptionSelected: (option) => selected?.payload.display_name == option.payload.display_name
@@ -6117,7 +6136,8 @@ var ExpandedBankTransactionRow = forwardRef5(
     containerWidth,
     showDescriptions,
     mode,
-    showReceiptUploads
+    showReceiptUploads,
+    showTooltips
   }, ref) => {
     const {
       categorize: categorizeBankTransaction2,
@@ -6471,7 +6491,8 @@ var ExpandedBankTransactionRow = forwardRef5(
                   onChange: (value) => changeCategory(index, value),
                   className: "Layer__category-menu--full",
                   disabled: bankTransaction.processing || !categorizationEnabled(mode),
-                  excludeMatches: true
+                  excludeMatches: true,
+                  showTooltips
                 }
               ),
               index > 0 && /* @__PURE__ */ React87.createElement(
@@ -6640,6 +6661,7 @@ var BankTransactionRow = ({
   initialLoad,
   showDescriptions,
   showReceiptUploads,
+  showTooltips,
   stringOverrides
 }) => {
   const expandedRowRef = useRef9(null);
@@ -6795,7 +6817,8 @@ var BankTransactionRow = ({
             setSelectedCategory(category);
             setShowRetry(false);
           },
-          disabled: bankTransaction.processing
+          disabled: bankTransaction.processing,
+          showTooltips
         }
       ) : null,
       categorized && !open ? /* @__PURE__ */ React89.createElement(Text, { as: "span", className: `${className}__category-text` }, bankTransaction.categorization_status === "SPLIT" /* SPLIT */ && /* @__PURE__ */ React89.createElement(React89.Fragment, null, /* @__PURE__ */ React89.createElement(
@@ -6887,7 +6910,8 @@ var BankTransactionRow = ({
       close: () => setOpen(false),
       containerWidth,
       showDescriptions,
-      showReceiptUploads
+      showReceiptUploads,
+      showTooltips
     }
   ))));
 };
@@ -6940,6 +6964,7 @@ var BankTransactionListItem = ({
   mode,
   showDescriptions,
   showReceiptUploads,
+  showTooltips,
   containerWidth,
   removeTransaction,
   stringOverrides
@@ -7036,7 +7061,8 @@ var BankTransactionListItem = ({
       submitBtnText: categorized ? stringOverrides?.updateButtonText || "Update" : stringOverrides?.approveButtonText || "Approve",
       containerWidth,
       showDescriptions,
-      showReceiptUploads
+      showReceiptUploads,
+      showTooltips
     }
   )), /* @__PURE__ */ React91.createElement("span", { className: `${className}__base-row` }, !categorized ? /* @__PURE__ */ React91.createElement(
     CategorySelect,
@@ -7048,7 +7074,8 @@ var BankTransactionListItem = ({
         setShowRetry(false);
         setSelectedCategory(category);
       },
-      disabled: bankTransaction.processing
+      disabled: bankTransaction.processing,
+      showTooltips
     }
   ) : null, categorized ? /* @__PURE__ */ React91.createElement(Assignment, { bankTransaction }) : null, !categorized && !showRetry ? /* @__PURE__ */ React91.createElement(
     SubmitButton,
@@ -7088,6 +7115,7 @@ var BankTransactionList = ({
   containerWidth,
   showDescriptions = false,
   showReceiptUploads = false,
+  showTooltips,
   stringOverrides
 }) => {
   return /* @__PURE__ */ React92.createElement("ul", { className: "Layer__bank-transactions__list" }, bankTransactions?.map(
@@ -7104,6 +7132,7 @@ var BankTransactionList = ({
         containerWidth,
         showDescriptions,
         showReceiptUploads,
+        showTooltips,
         stringOverrides
       }
     )
@@ -7121,7 +7150,10 @@ import React98 from "react";
 
 // src/components/BankTransactionMobileList/BusinessForm.tsx
 import React93, { useContext as useContext10, useEffect as useEffect14, useMemo as useMemo4, useState as useState17 } from "react";
-var BusinessForm = ({ bankTransaction }) => {
+var BusinessForm = ({
+  bankTransaction,
+  showTooltips
+}) => {
   const { setContent, close } = useContext10(DrawerContext);
   const { categorize: categorizeBankTransaction2, isLoading } = useBankTransactionsContext();
   const [selectedCategory, setSelectedCategory] = useState17(
@@ -7163,7 +7195,8 @@ var BusinessForm = ({ bankTransaction }) => {
         BusinessCategories,
         {
           selectedId: selectedCategory?.id,
-          select: onDrawerCategorySelect
+          select: onDrawerCategorySelect,
+          showTooltips
         }
       )
     );
@@ -7204,7 +7237,8 @@ var BusinessForm = ({ bankTransaction }) => {
     {
       options,
       onClick: onCategorySelect,
-      selectedId: selectedCategory?.id
+      selectedId: selectedCategory?.id,
+      showDescriptions: showTooltips
     }
   ), options.length === 0 ? /* @__PURE__ */ React93.createElement(
     Button,
@@ -7341,7 +7375,8 @@ var MatchForm2 = ({
 import React96, { useEffect as useEffect17, useState as useState20 } from "react";
 import classNames38 from "classnames";
 var SplitForm = ({
-  bankTransaction
+  bankTransaction,
+  showTooltips
 }) => {
   const {
     categorize: categorizeBankTransaction2,
@@ -7492,7 +7527,8 @@ var SplitForm = ({
         className: "Layer__category-menu--full",
         disabled: bankTransaction.processing,
         excludeMatches: true,
-        asDrawer: true
+        asDrawer: true,
+        showTooltips
       }
     )),
     /* @__PURE__ */ React96.createElement(
@@ -7544,28 +7580,48 @@ var SplitForm = ({
 
 // src/components/BankTransactionMobileList/SplitAndMatchForm.tsx
 var SplitAndMatchForm = ({
-  bankTransaction
+  bankTransaction,
+  showTooltips
 }) => {
   const anyMatch = hasMatch(bankTransaction);
   const [formType, setFormType] = useState21(
     bankTransaction.category ? "categorize" /* categorize */ : anyMatch ? "match" /* match */ : "categorize" /* categorize */
   );
-  return /* @__PURE__ */ React97.createElement("div", { className: "Layer__bank-transaction-mobile-list-item__split-and-match-form" }, formType === "categorize" /* categorize */ && /* @__PURE__ */ React97.createElement(SplitForm, { bankTransaction }), formType === "match" /* match */ && /* @__PURE__ */ React97.createElement(MatchForm2, { bankTransaction }), anyMatch && formType === "match" /* match */ ? /* @__PURE__ */ React97.createElement("div", { className: "Layer__bank-transaction-mobile-list-item__switch-form-btns" }, /* @__PURE__ */ React97.createElement(TextButton, { onClick: () => setFormType("categorize" /* categorize */) }, "or split transaction")) : null, anyMatch && formType === "categorize" /* categorize */ ? /* @__PURE__ */ React97.createElement("div", { className: "Layer__bank-transaction-mobile-list-item__switch-form-btns" }, /* @__PURE__ */ React97.createElement(TextButton, { onClick: () => setFormType("match" /* match */) }, "or find match")) : null);
+  return /* @__PURE__ */ React97.createElement("div", { className: "Layer__bank-transaction-mobile-list-item__split-and-match-form" }, formType === "categorize" /* categorize */ && /* @__PURE__ */ React97.createElement(
+    SplitForm,
+    {
+      bankTransaction,
+      showTooltips
+    }
+  ), formType === "match" /* match */ && /* @__PURE__ */ React97.createElement(MatchForm2, { bankTransaction }), anyMatch && formType === "match" /* match */ ? /* @__PURE__ */ React97.createElement("div", { className: "Layer__bank-transaction-mobile-list-item__switch-form-btns" }, /* @__PURE__ */ React97.createElement(TextButton, { onClick: () => setFormType("categorize" /* categorize */) }, "or split transaction")) : null, anyMatch && formType === "categorize" /* categorize */ ? /* @__PURE__ */ React97.createElement("div", { className: "Layer__bank-transaction-mobile-list-item__switch-form-btns" }, /* @__PURE__ */ React97.createElement(TextButton, { onClick: () => setFormType("match" /* match */) }, "or find match")) : null);
 };
 
 // src/components/BankTransactionMobileList/BankTransactionMobileForms.tsx
 var BankTransactionMobileForms = ({
   purpose,
-  bankTransaction
+  bankTransaction,
+  showTooltips
 }) => {
   const getContent = () => {
     switch (purpose) {
       case "business":
-        return /* @__PURE__ */ React98.createElement(BusinessForm, { bankTransaction });
+        return /* @__PURE__ */ React98.createElement(
+          BusinessForm,
+          {
+            bankTransaction,
+            showTooltips
+          }
+        );
       case "personal":
         return /* @__PURE__ */ React98.createElement(PersonalForm, { bankTransaction });
       case "more":
-        return /* @__PURE__ */ React98.createElement(SplitAndMatchForm, { bankTransaction });
+        return /* @__PURE__ */ React98.createElement(
+          SplitAndMatchForm,
+          {
+            bankTransaction,
+            showTooltips
+          }
+        );
       default:
         return null;
     }
@@ -7610,6 +7666,7 @@ var BankTransactionMobileListItem = ({
   editable,
   mode,
   initialLoad,
+  showTooltips,
   isFirstItem = false
 }) => {
   const {
@@ -7761,7 +7818,8 @@ var BankTransactionMobileListItem = ({
         BankTransactionMobileForms,
         {
           purpose,
-          bankTransaction
+          bankTransaction,
+          showTooltips
         }
       )
     )
@@ -7774,6 +7832,7 @@ var BankTransactionMobileList = ({
   removeTransaction,
   editable,
   initialLoad,
+  showTooltips,
   mode
 }) => {
   const transactionToOpenContextData = useTransactionToOpen();
@@ -7785,6 +7844,7 @@ var BankTransactionMobileList = ({
         mode,
         key: bankTransaction.id,
         bankTransaction,
+        showTooltips,
         editable,
         removeTransaction,
         initialLoad,
@@ -7854,7 +7914,8 @@ var SkeletonTableLoader = ({
 
 // src/components/BankTransactionsLoader/BankTransactionsLoader.tsx
 var BankTransactionsLoader = ({
-  isLoading = true
+  isLoading = true,
+  showTooltips
 }) => {
   const inactiveBankTransactionsActions = /* @__PURE__ */ React103.createElement("div", { className: "Layer__bank-transaction-row__actions-container Layer__bank-transaction-row__actions-disabled" }, /* @__PURE__ */ React103.createElement(
     CategorySelect,
@@ -7864,7 +7925,8 @@ var BankTransactionsLoader = ({
       value: void 0,
       onChange: () => {
       },
-      disabled: true
+      disabled: true,
+      showTooltips
     }
   ), /* @__PURE__ */ React103.createElement(
     SubmitButton,
@@ -7947,6 +8009,7 @@ var BankTransactionsTable = ({
   removeTransaction,
   showDescriptions = false,
   showReceiptUploads = false,
+  showTooltips,
   stringOverrides,
   isSyncing = false,
   page,
@@ -7960,7 +8023,7 @@ var BankTransactionsTable = ({
       className: "Layer__table Layer__bank-transactions__table with-cell-separators"
     },
     /* @__PURE__ */ React105.createElement("thead", null, /* @__PURE__ */ React105.createElement("tr", null, /* @__PURE__ */ React105.createElement("th", { className: "Layer__table-header Layer__bank-transactions__date-col" }, stringOverrides?.transactionsTable?.dateColumnHeaderText || "Date"), /* @__PURE__ */ React105.createElement("th", { className: "Layer__table-header Layer__bank-transactions__tx-col" }, stringOverrides?.transactionsTable?.transactionColumnHeaderText || "Transaction"), /* @__PURE__ */ React105.createElement("th", { className: "Layer__table-header Layer__bank-transactions__account-col" }, stringOverrides?.transactionsTable?.accountColumnHeaderText || "Account"), /* @__PURE__ */ React105.createElement("th", { className: "Layer__table-header Layer__table-cell--amount Layer__table-cell__amount-col" }, stringOverrides?.transactionsTable?.amountColumnHeaderText || "Amount"), categorizeView && editable ? /* @__PURE__ */ React105.createElement("th", { className: "Layer__table-header Layer__table-header--primary Layer__table-cell__category-col" }, stringOverrides?.transactionsTable?.categorizeColumnHeaderText || "Categorize") : /* @__PURE__ */ React105.createElement("th", { className: "Layer__table-header Layer__table-cell__category-col" }, stringOverrides?.transactionsTable?.categoryColumnHeaderText || "Category"))),
-    isLoading && page && page === 1 ? /* @__PURE__ */ React105.createElement(BankTransactionsLoader, { isLoading: true }) : null,
+    isLoading && page && page === 1 ? /* @__PURE__ */ React105.createElement(BankTransactionsLoader, { isLoading: true, showTooltips }) : null,
     /* @__PURE__ */ React105.createElement("tbody", null, !isLoading && bankTransactions?.map(
       (bankTransaction, index) => /* @__PURE__ */ React105.createElement(
         BankTransactionRow,
@@ -7976,6 +8039,7 @@ var BankTransactionsTable = ({
           containerWidth,
           showDescriptions,
           showReceiptUploads,
+          showTooltips,
           stringOverrides: stringOverrides?.bankTransactionCTAs
         }
       )
@@ -8819,6 +8883,7 @@ var BankTransactionsContent = ({
   mode = "self-serve",
   showDescriptions = false,
   showReceiptUploads = false,
+  showTooltips = false,
   monthlyView = false,
   categorizeView: categorizeViewProp,
   mobileComponent,
@@ -8976,6 +9041,7 @@ var BankTransactionsContent = ({
         removeTransaction,
         showDescriptions,
         showReceiptUploads,
+        showTooltips,
         page: currentPage,
         stringOverrides,
         lastPage: isLastPage,
@@ -8990,7 +9056,8 @@ var BankTransactionsContent = ({
         editable,
         removeTransaction,
         containerWidth,
-        stringOverrides: stringOverrides?.bankTransactionCTAs
+        stringOverrides: stringOverrides?.bankTransactionCTAs,
+        showTooltips
       }
     ) : null,
     !isLoading && listView && mobileComponent === "mobileList" ? /* @__PURE__ */ React115.createElement(
@@ -9000,7 +9067,8 @@ var BankTransactionsContent = ({
         editable,
         mode,
         removeTransaction,
-        initialLoad
+        initialLoad,
+        showTooltips
       }
     ) : null,
     listView && isLoading ? /* @__PURE__ */ React115.createElement("div", { className: "Layer__bank-transactions__list-loader" }, /* @__PURE__ */ React115.createElement(Loader2, null)) : null,
@@ -16781,6 +16849,7 @@ var BankTransactionsWithLinkedAccounts = ({
   mode = "self-serve",
   showDescriptions,
   showReceiptUploads,
+  showTooltips = false,
   mobileComponent,
   stringOverrides
 }) => {
@@ -16806,6 +16875,7 @@ var BankTransactionsWithLinkedAccounts = ({
         asWidget: true,
         showDescriptions,
         showReceiptUploads,
+        showTooltips,
         mobileComponent,
         mode,
         stringOverrides: stringOverrides?.bankTransactions