fix(FilterPicker): unescape symbols (#745)

Author: tenphi

.changeset/funny-chicken-stare.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Unescape keys in FilterPicker to support `:` and `=` symbols.

src/components/fields/DatePicker/DateRangePicker.tsx

@@ -37,7 +37,7 @@ import { useFocusManagerRef } from './utils';
 const DateRangeDash = tasty({
   'aria-hidden': 'true',
   'data-qa': 'DateRangeDash',
-  children: '––',
+  children: '–',
   styles: {
     padding: '0 .5x',
   },

src/components/fields/FilterPicker/FilterPicker.stories.tsx

@@ -1614,3 +1614,80 @@ export const WithSelectAll: Story = {
     },
   },
 };
+
+export const MultipleControlled: Story = {
+  args: {
+    label: 'Controlled Multiple Selection',
+    placeholder: 'Choose permissions...',
+    selectionMode: 'multiple',
+    isCheckable: true,
+    searchPlaceholder: 'Filter permissions...',
+    width: 'max 30x',
+  },
+  play: async ({ canvasElement }) => {},
+  render: (args) => {
+    const [selectedKeys, setSelectedKeys] = useState<string[]>([
+      'read',
+      'write',
+    ]);
+
+    return (
+      <Space gap="2x" flow="column" placeItems="start">
+        <FilterPicker
+          {...args}
+          selectedKeys={selectedKeys}
+          onSelectionChange={(keys) => setSelectedKeys(keys as string[])}
+        >
+          {permissions.map((permission) => (
+            <FilterPicker.Item
+              key={permission.key}
+              textValue={permission.label}
+              description={permission.description}
+            >
+              {permission.label}
+            </FilterPicker.Item>
+          ))}
+        </FilterPicker>
+
+        <Text>
+          Selected:{' '}
+          <strong>
+            {selectedKeys.length ? selectedKeys.join(', ') : 'None'}
+          </strong>
+        </Text>
+
+        <Space gap="1x" flow="row">
+          <Button
+            size="small"
+            type="outline"
+            onClick={() => setSelectedKeys(['read', 'write', 'admin'])}
+          >
+            Select Admin Set
+          </Button>
+          <Button
+            size="small"
+            type="outline"
+            onClick={() => setSelectedKeys(['read'])}
+          >
+            Read Only
+          </Button>
+          <Button
+            size="small"
+            type="outline"
+            onClick={() => setSelectedKeys([])}
+          >
+            Clear All
+          </Button>
+        </Space>
+      </Space>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A controlled FilterPicker in multiple selection mode where the selection state is managed externally. The component responds to external state changes and provides selection feedback through the onSelectionChange callback. This pattern is useful when you need to programmatically control the selection or integrate with form libraries.',
+      },
+    },
+  },
+};

src/components/fields/FilterPicker/FilterPicker.tsx

@@ -17,7 +17,7 @@ import { FocusScope, Key, useKeyboard } from 'react-aria';
 import { Section as BaseSection, Item, ListState } from 'react-stately';
 
 import { useWarn } from '../../../_internal/hooks/use-warn';
-import { DirectionIcon } from '../../../icons';
+import { DirectionIcon, LoadingIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
 import {
   BASE_STYLES,
@@ -238,6 +238,21 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
   const cachedItemsOrder = useRef<T[] | null>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
 
+  // ---------------------------------------------------------------------------
+  // Invalidate cached sorting whenever the available options change.
+  // This ensures newly provided options are displayed and properly sorted on
+  // the next popover open instead of re-using a stale order from a previous
+  // session (which caused only the previously selected options to be rendered
+  // or the list to appear unsorted).
+  // ---------------------------------------------------------------------------
+  useEffect(() => {
+    cachedChildrenOrder.current = null;
+  }, [children]);
+
+  useEffect(() => {
+    cachedItemsOrder.current = null;
+  }, [items]);
+
   const isControlledSingle = selectedKey !== undefined;
   const isControlledMultiple = selectedKeys !== undefined;
 
@@ -252,12 +267,20 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
   // can compare them with user-provided keys.
   const normalizeKeyValue = (key: Key): string => {
     if (key == null) return '';
-    const str = String(key);
-    return str.startsWith('.$')
-      ? str.slice(2)
-      : str.startsWith('.')
-        ? str.slice(1)
-        : str;
+    // React escapes "=" as "=0" and ":" as "=2" when it stores keys internally.
+    // We strip the possible React prefixes first and then un-escape those sequences
+    // so that callers work with the original key values supplied by the user.
+    let str = String(key);
+
+    // Remove React array/object key prefixes (".$" or ".") if present.
+    if (str.startsWith('.$')) {
+      str = str.slice(2);
+    } else if (str.startsWith('.')) {
+      str = str.slice(1);
+    }
+
+    // Un-escape React's internal key encodings.
+    return str.replace(/=2/g, ':').replace(/=0/g, '=');
   };
 
   // ---------------------------------------------------------------------------
@@ -867,16 +890,17 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
         type={type}
         theme={validationState === 'invalid' ? 'danger' : theme}
         size={size}
-        isDisabled={isDisabled}
-        isLoading={isLoading}
+        isDisabled={isDisabled || isLoading}
         mods={{
           placeholder: !hasSelection,
           selected: hasSelection,
           ...externalMods,
         }}
         icon={icon}
         rightIcon={
-          rightIcon !== undefined ? (
+          isLoading ? (
+            <LoadingIcon />
+          ) : rightIcon !== undefined ? (
             rightIcon
           ) : (
             <DirectionIcon to={state.isOpen ? 'top' : 'bottom'} />
@@ -927,6 +951,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
                 selectionMode={selectionMode}
                 validationState={validationState}
                 isDisabled={isDisabled}
+                isLoading={isLoading}
                 stateRef={listStateRef}
                 isCheckable={isCheckable}
                 mods={{