@vtex/faststore-plugin-buyer-portal 1.3.13 → 1.3.14

package/CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.14] - 2025-11-03
+
+### Fixed
+
+- Click outside on Dropdown are now properly closing the dropdown on Budget allocation selection
+
 ## [1.3.13] - 2025-11-03
 
 - Setup OTLP to send log events on error boundary
@@ -175,7 +181,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add CHANGELOG file
 - Add README file
 
-[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.13...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.14...HEAD
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
 [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
@@ -190,6 +196,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 # <<<<<<< HEAD
 
+[1.3.14]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.13...v1.3.14
 [1.3.13]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.12...v1.3.13
 [1.3.12]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.11...v1.3.12
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.3.13",
+  "version": "1.3.14",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "scripts": {

package/src/features/budgets/components/BudgetAllocationsSelection/BudgetAllocationsSelection.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import {
   Checkbox,
@@ -16,6 +16,7 @@ import { getTableColumns } from "../../../shared/components/Table/utils/tableCol
 import { useBuyerPortal } from "../../../shared/hooks";
 import { IPagination } from "../../../shared/types";
 import { Dictionary } from "../../../shared/utils";
+import { useClickOutside } from "../../hooks";
 
 import type { BudgetAllocationsSelectionDataType } from "../../types";
 
@@ -48,12 +49,19 @@ export const BudgetAllocationsSelection = ({
   onSortChange,
   setFilter,
 }: BudgetAllocationsSelectionProps) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
   const { currentContract: contract } = useBuyerPortal();
+
   const options = Object.keys(sortingOptions);
 
   const svgProps = { width: 10, height: 10 };
   const selectAllRef = useRef<HTMLInputElement>(null);
 
+  const dropdownRef = useClickOutside<HTMLDivElement>(() => {
+    setIsDropdownOpen(false);
+  });
+
   const updateCurrentSort = (newSort: string) => {
     onSortChange(newSort);
   };
@@ -155,8 +163,11 @@ export const BudgetAllocationsSelection = ({
   return (
     <div data-fs-bp-budget-allocation-table>
       <div data-fs-bp-budget-allocation-wrapper>
-        <Dropdown>
-          <DropdownButton data-fs-bp-budget-allocation-select-current>
+        <Dropdown isOpen={isDropdownOpen}>
+          <DropdownButton
+            data-fs-bp-budget-allocation-select-current
+            onClick={() => setIsDropdownOpen((prev) => !prev)}
+          >
             {currentSort}
             <Icon
               name="CaretRight"
@@ -166,21 +177,27 @@ export const BudgetAllocationsSelection = ({
             />
           </DropdownButton>
           <DropdownMenu align="left">
-            {options.map((option) => (
-              <DropdownItem
-                key={option}
-                onClick={() => updateCurrentSort(option)}
-                data-fs-bp-budget-allocation-select-item
-                data-fs-bp-budget-allocation-selected={currentSort === option}
-              >
-                <div data-fs-bp-budget-allocation-selected-wrapper>
-                  <span>{option}</span>
-                  {currentSort === option && (
-                    <Icon name="Check" width={16} height={16} />
-                  )}
-                </div>
-              </DropdownItem>
-            ))}
+            <div ref={dropdownRef}>
+              {options.map((option) => (
+                <DropdownItem
+                  key={option}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    updateCurrentSort(option);
+                    setIsDropdownOpen(false);
+                  }}
+                  data-fs-bp-budget-allocation-select-item
+                  data-fs-bp-budget-allocation-selected={currentSort === option}
+                >
+                  <div data-fs-bp-budget-allocation-selected-wrapper>
+                    <span>{option}</span>
+                    {currentSort === option && (
+                      <Icon name="Check" width={16} height={16} />
+                    )}
+                  </div>
+                </DropdownItem>
+              ))}
+            </div>
           </DropdownMenu>
         </Dropdown>
 

package/src/features/budgets/components/BudgetAllocationsSelection/budget-allocations-selection.scss

@@ -137,5 +137,6 @@
 		align-items: center;
 		justify-content: space-between;
 		width: 100%;
+		gap: var(--fs-spacing-2);
 	}
 }

package/src/features/budgets/hooks/index.ts

@@ -8,3 +8,4 @@ export { useListBudgets } from "./useListBudgets";
 export { useUpdateBudget } from "./useUpdateBudget";
 export { useListUsers } from "./useListUsers";
 export { useListAddresses } from "./useListAddressess";
+export { useClickOutside } from "./useClickOutside";

package/src/features/budgets/hooks/useClickOutside.ts

@@ -0,0 +1,26 @@
+import { RefObject, useEffect, useRef } from "react";
+
+export function useClickOutside<T extends HTMLElement>(
+  callback: () => void
+): RefObject<T> {
+  const ref = useRef<T>(null);
+  const callbackRef = useRef(callback);
+
+  // Update callbackRef to always hold the latest callback
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    const handleClick = (event: Event) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        callbackRef.current();
+      }
+    };
+
+    document.addEventListener("click", handleClick, true);
+    return () => document.removeEventListener("click", handleClick, true);
+  }, []);
+
+  return ref;
+}

package/src/features/custom-fields/layouts/CustomFieldsLayout/CustomFieldsLayout.tsx

@@ -62,7 +62,7 @@ export const CustomFieldsLayout = ({
   const lastSearchValue = useRef(filter.search);
   const contractId = contract?.id ?? "";
   const unitId = orgUnit?.id ?? "";
-  const cookie = clientContext.cookie;
+  const cookie = clientContext?.cookie ?? "";
   const debouncedSearchValue = useDebounce(filter.search, 500);
 
   useEffect(() => {

package/src/features/shared/hooks/usePageItems.ts

@@ -26,13 +26,13 @@ export type UsePageItemsProps<T> = {
 };
 
 export const usePageItems = <T>({
-  initialItems,
+  initialItems = [],
   search,
   page = 1,
   searchParam = SEARCH_PARAMS.DEFAULT,
   pageParam = PAGE_PARAMS.DEFAULT,
 }: UsePageItemsProps<T>) => {
-  const [items, setItems] = useState<T[]>(initialItems ?? []);
+  const [items, setItems] = useState<T[]>(initialItems);
   const [total, setTotal] = useState<number>(initialItems.length);
   const [searchTerm, setSearchTerm] = useState(search ?? "");
   const [isLoading, setIsLoading] = useState(false);

package/src/features/shared/utils/constants.ts

@@ -13,4 +13,4 @@ export const LOCAL_STORAGE_LOCATION_EDIT_KEY = "bp_hide_edit_location_confirm";
 export const LOCAL_STORAGE_RECIPIENT_EDIT_KEY =
   "bp_hide_edit_recipient_confirm";
 
-export const CURRENT_VERSION = "1.3.13";
+export const CURRENT_VERSION = "1.3.14";