chore(merge): merge main in

Author: ByronDWall

.changeset/mighty-doors-sit.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/filters': minor
+---
+
+Support filter tag appearing if filter is set outside Filter component

packages/components/fields/multiline-text-field/src/multiline-text-field.stories.tsx

@@ -7,7 +7,7 @@ import { useEffect, useState } from 'react';
 
 const meta: Meta<TMultiTextFieldProps> = {
   title: 'Form/Fields/MultilineTextField',
-  component: MultilineTextField,
+  component: MultilineTextField as React.ComponentType<TMultiTextFieldProps>,
   argTypes: {
     title: { control: 'text' },
     hint: { control: 'text' },

packages/components/fields/radio-field/src/radio-field.stories.tsx

@@ -9,7 +9,6 @@ const meta: Meta<typeof RadioField> = {
   // @ts-expect-error, fix component and/or types
   component: RadioField,
   subcomponents: {
-    // @ts-expect-error
     'RadioInput.Option': RadioInput.Option,
   },
   argTypes: {

packages/components/filters/src/filters.spec.tsx

@@ -17,6 +17,7 @@ import {
   selectFilterValues,
   toggleFilterList,
 } from './filters.spec.utils';
+import { IntlProvider } from 'react-intl';
 
 const mockRenderSearchComponent = (
   <input id="search-text" type="text" placeholder="Search Placeholder" />
@@ -308,6 +309,51 @@ describe('Filters', () => {
     expect(chips).toEqual(['lavender', 'cobalt']);
   });
 
+  it('should render a filter when props.appliedFilters is updated', async () => {
+    const { rerender } = render(
+      <FilterTestComponent
+        {...createTestProps()}
+        initialPrimaryColorValue={['lavender', 'cobalt']}
+      />
+    );
+    // Toggle the filter list to ensure applied filters are shown
+    await toggleFilterList();
+
+    //Expect chips to display selected filter values on initial render
+    const primaryChips = getDisplayedChipsForFilter('primaryColors');
+    expect(primaryChips).toEqual(['lavender', 'cobalt']);
+    expect(screen.queryByText(/rojo/i)).toBeFalsy();
+    rerender(
+      <IntlProvider locale="en">
+        <FilterTestComponent
+          {...createTestProps({
+            appliedFilters: [
+              {
+                filterKey: 'colorName',
+                values: [
+                  {
+                    value: 'rojo',
+                    label: 'rojo',
+                  },
+                ],
+              },
+            ],
+          })}
+          initialPrimaryColorValue={['lavender', 'azure']}
+        />
+      </IntlProvider>
+    );
+    // await toggleFilterList();
+
+    await toggleFilterList();
+    const colorChips2 = getDisplayedChipsForFilter('colorName');
+    expect(colorChips2).toEqual(['rojo']);
+
+    //Expect chips to display selected filter values on initial render
+    const primaryChips2 = getDisplayedChipsForFilter('primaryColors');
+    expect(primaryChips2).toEqual(['lavender', 'azure']);
+  });
+
   it('should render a badge on initial page load when >=2 appliedFilters are passed', async () => {
     render(
       <FilterTestComponent

packages/components/filters/src/filters.tsx

@@ -1,7 +1,8 @@
 import {
-  type ReactNode,
-  type MouseEvent,
   type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+  useEffect,
   useRef,
   useState,
 } from 'react';
@@ -22,8 +23,8 @@ import SelectInput, {
 import Spacings from '@commercetools-uikit/spacings';
 import { useIntl } from 'react-intl';
 import FilterMenu, {
-  menuStyles,
   menuBodyStyle,
+  menuStyles,
   type TAppliedFilterValue,
 } from './filter-menu';
 import messages from './messages';
@@ -248,9 +249,7 @@ function Filters({
   // applied filters must have corresponding filter in `props.filters`,
   const visibleFiltersFromProps = filters
     .filter(({ key, isPersistent }) => {
-      const isVisible =
-        Boolean(isPersistent) || appliedFilterKeys.includes(key);
-      return isVisible;
+      return Boolean(isPersistent) || appliedFilterKeys.includes(key);
     })
     // persistent filters should be first in filter list
     .sort(({ isPersistent }) => (isPersistent ? -1 : 1));
@@ -260,6 +259,39 @@ function Filters({
     visibleFiltersFromProps.map(({ key }) => key)
   );
 
+  // Update localVisibleFilters if appliedFilters or filters prop changes
+  useEffect(() => {
+    const allFilterKeys = filters.map((f) => f.key);
+    const persistedFilterKeys = filters
+      .filter((filter) => filter.isPersistent)
+      .map((filter) => filter.key);
+
+    const appliedFilterKeysWithValues = appliedFilters.map(
+      (af) => af.filterKey
+    );
+
+    // Calculate keys that *must* be visible based on props
+    const requiredVisibleKeys = new Set([
+      ...persistedFilterKeys,
+      ...appliedFilterKeysWithValues,
+    ]);
+
+    // Update state: keep existing keys, add required keys, remove keys no longer in props.filters
+    setLocalVisibleFilters((currentVisibleFilters) => {
+      const combinedKeys = new Set([
+        ...currentVisibleFilters,
+        ...requiredVisibleKeys,
+      ]);
+      // Ensure all keys in the final state actually exist in the filters prop
+      return Array.from(combinedKeys).filter((key) =>
+        allFilterKeys.includes(key)
+      );
+    });
+
+    // Update the ref for persisted keys (used elsewhere)
+    persistedFiltersRef.current = persistedFilterKeys;
+  }, [appliedFilters, filters]); // Keep dependencies correct
+
   //update localVisibleFilters if persisted filter count changes
   if (persistedFiltersRef.current.length !== persistedFilterKeys.length) {
     setLocalVisibleFilters(visibleFiltersFromProps.map(({ key }) => key));

packages/components/view-switcher/src/view-switcher.stories.tsx

@@ -6,7 +6,6 @@ const meta: Meta<typeof ViewSwitcher.Group> = {
   title: 'components/ViewSwitcher',
   component: ViewSwitcher.Group,
   subcomponents: {
-    // @ts-expect-error
     'ViewSwitcher.Button': ViewSwitcher.Button,
   },
   argTypes: {