Adding custom item to HierarchicalMenu with custom action

[Ali-hd]

Hi guys,
Hope you are doing well.

I've been struggling to find a solution to what I need to do, I'd love it if anyone can help me

What I am trying to do is this:
I already did these:

• display an "All" item under categories bigger than lvl0
• when clicking on a parant category, if there is no branch category selected highlight the "All" category
  Now I need to accomplish this:
• when there is a branch or leaf category selected and I click the "All" category. It should highlight the "All" category in the same level, keep the current expanded children and refine as if I clicked the parent item again but keeping the parent item selected/refined.

example:
I click "Audio"
Then I click "Home Audio"
Then I click "Speakers"
*Now if I click on "All" on the same row, it should highlight "All" without collapsing anything. "Home Audio" should be selected and its results shown below

I hope it's clear, let me know if I not

I prepared a codesandbox environment:

https://codesandbox.io/p/sandbox/dazzling-farrell-rf3vqy?file=/app/page.tsx:113,40

[Ali-hd]

Found a the fix to my problem!!

replace the addAllItem function with the below

const addAllItem = (
    items: HierarchicalMenuItem[],
    item: HierarchicalMenuItem
): HierarchicalMenuItem[] => {
    const hasRefinedItem = items.some((i) => i.isRefined);
    const RefinedItem = items.find((i)=>i.isRefined)
    return [
        {
            value: RefinedItem?.value || item.value,
            label: "الكل",
            count: item.count,
            isRefined: !hasRefinedItem,
            data: null,
        },
        ...items,
    ];
};

for each key used instead of doing this

key={item.value}

do this

key={item.label === "All" ? "All" : item.value}

And update the logic inside the onClick function

onClick={(e) => {
              if (item.label === "All") {
                if (item.isRefined) {
                  return false;
                }
              }

              if (!item.isRefined) {
                refine(item.value);
              }
            }}