Merge remote-tracking branch 'origin' into feat-item-button-with-actions

Author: tenphi

.changeset/proud-dolls-punch.md

@@ -1,5 +1,27 @@
 # @cube-dev/ui-kit
 
+## 0.84.0
+
+### Minor Changes
+
+- [#817](https://github.com/cube-js/cube-ui-kit/pull/817) [`bb56ca5a`](https://github.com/cube-js/cube-ui-kit/commit/bb56ca5a8a4b08379685a7d32a797ea65019c12d) Thanks [@tenphi](https://github.com/tenphi)! - Add Picker component as a more advanced version of Select.
+
+## 0.83.3
+
+### Patch Changes
+
+- [#838](https://github.com/cube-js/cube-ui-kit/pull/838) [`17518277`](https://github.com/cube-js/cube-ui-kit/commit/17518277e6bda8b495c0e74b884f6c97096760e3) Thanks [@tenphi](https://github.com/tenphi)! - Add ProgressBarIcon.
+
+- [#840](https://github.com/cube-js/cube-ui-kit/pull/840) [`5fb963f0`](https://github.com/cube-js/cube-ui-kit/commit/5fb963f040f1c1ec59bd63c6918cb5f6f6b7a210) Thanks [@tenphi](https://github.com/tenphi)! - Fix RadioGroup base layout.
+
+## 0.83.2
+
+### Patch Changes
+
+- [#835](https://github.com/cube-js/cube-ui-kit/pull/835) [`97925cab`](https://github.com/cube-js/cube-ui-kit/commit/97925cabf6babdfc546436cb59d24967a826fb74) Thanks [@tenphi](https://github.com/tenphi)! - Fix qa prop in Radio component.
+
+- [#837](https://github.com/cube-js/cube-ui-kit/pull/837) [`f80593b8`](https://github.com/cube-js/cube-ui-kit/commit/f80593b89bba6c638d8cfd795e9ad5b02609e75a) Thanks [@tenphi](https://github.com/tenphi)! - Fix qa prop on TextInputBase.
+
 ## 0.83.1
 
 ### Patch Changes

CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.83.1",
+  "version": "0.84.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -10,7 +10,7 @@
   "module": "dist/es/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "packageManager": "pnpm@10.14.0",
+  "packageManager": "pnpm@10.19.0",
   "exports": {
     ".": {
       "import": "./dist/es/index.js",

package.json

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { userEvent, within } from 'storybook/test';
 
 import { baseProps } from '../../../stories/lists/baseProps';
@@ -772,13 +772,13 @@ export const ShowAllOnNoResults: StoryObj<typeof ComboBox> = {
 };
 
 export const VirtualizedList = () => {
+  const [selected, setSelected] = useState<string | null>(null);
+
   interface Item {
     key: string;
     name: string;
   }
 
-  const [selected, setSelected] = useState<string | null>(null);
-
   // Generate a large list of items with varying content to test virtualization
   const items: Item[] = Array.from({ length: 1000 }, (_, i) => ({
     key: `item-${i}`,

src/components/fields/ComboBox/ComboBox.stories.tsx

@@ -463,7 +463,7 @@ describe('<ComboBox />', () => {
     });
   });
 
-  it('should clear selection on blur when clearOnBlur is true', async () => {
+  it('should clear invalid input on blur when clearOnBlur is true', async () => {
     const onSelectionChange = jest.fn();
 
     const { getByRole, getAllByRole, queryByRole } = renderWithRoot(
@@ -493,12 +493,18 @@ describe('<ComboBox />', () => {
       expect(combobox).toHaveValue('Red');
     });
 
+    onSelectionChange.mockClear();
+
+    // Type invalid text to make input invalid
+    await userEvent.clear(combobox);
+    await userEvent.type(combobox, 'xyz');
+
     // Blur the input
     await act(async () => {
       combobox.blur();
     });
 
-    // Should clear selection on blur
+    // Should clear selection on blur because input is invalid
     await waitFor(() => {
       expect(onSelectionChange).toHaveBeenCalledWith(null);
       expect(combobox).toHaveValue('');
@@ -585,6 +591,131 @@ describe('<ComboBox />', () => {
     });
   });
 
+  it('should auto-select when there is exactly one filtered result on blur', async () => {
+    const onSelectionChange = jest.fn();
+
+    const { getByRole } = renderWithRoot(
+      <ComboBox label="test" onSelectionChange={onSelectionChange}>
+        {items.map((item) => (
+          <ComboBox.Item key={item.key}>{item.children}</ComboBox.Item>
+        ))}
+      </ComboBox>,
+    );
+
+    const combobox = getByRole('combobox');
+
+    // Type partial match that results in one item (Violet is unique with 'vio')
+    await userEvent.type(combobox, 'vio');
+
+    // Blur the input
+    await act(async () => {
+      combobox.blur();
+    });
+
+    // Should auto-select the single matching item
+    await waitFor(() => {
+      expect(onSelectionChange).toHaveBeenCalledWith('violet');
+      expect(combobox).toHaveValue('Violet');
+    });
+  });
+
+  it('should reset to selected value on blur when clearOnBlur is false and input is invalid', async () => {
+    const onSelectionChange = jest.fn();
+
+    const { getByRole, getAllByRole, queryByRole } = renderWithRoot(
+      <ComboBox label="test" onSelectionChange={onSelectionChange}>
+        {items.map((item) => (
+          <ComboBox.Item key={item.key}>{item.children}</ComboBox.Item>
+        ))}
+      </ComboBox>,
+    );
+
+    const combobox = getByRole('combobox');
+
+    // Type to filter and open popover
+    await userEvent.type(combobox, 're');
+
+    await waitFor(() => {
+      expect(queryByRole('listbox')).toBeInTheDocument();
+    });
+
+    // Click on first option (Red)
+    const options = getAllByRole('option');
+    await userEvent.click(options[0]);
+
+    // Verify selection was made
+    await waitFor(() => {
+      expect(onSelectionChange).toHaveBeenCalledWith('red');
+      expect(combobox).toHaveValue('Red');
+    });
+
+    onSelectionChange.mockClear();
+
+    // Type invalid text to make input invalid
+    await userEvent.clear(combobox);
+    await userEvent.type(combobox, 'xyz');
+
+    // Blur the input
+    await act(async () => {
+      combobox.blur();
+    });
+
+    // Should reset input to selected value (Red) since clearOnBlur is false
+    await waitFor(() => {
+      expect(combobox).toHaveValue('Red');
+    });
+
+    // Selection should not change
+    expect(onSelectionChange).not.toHaveBeenCalled();
+  });
+
+  it('should clear selection when input is empty on blur even with clearOnBlur false', async () => {
+    const onSelectionChange = jest.fn();
+
+    const { getByRole, getAllByRole, queryByRole } = renderWithRoot(
+      <ComboBox label="test" onSelectionChange={onSelectionChange}>
+        {items.map((item) => (
+          <ComboBox.Item key={item.key}>{item.children}</ComboBox.Item>
+        ))}
+      </ComboBox>,
+    );
+
+    const combobox = getByRole('combobox');
+
+    // Type to filter and open popover
+    await userEvent.type(combobox, 're');
+
+    await waitFor(() => {
+      expect(queryByRole('listbox')).toBeInTheDocument();
+    });
+
+    // Click on first option (Red)
+    const options = getAllByRole('option');
+    await userEvent.click(options[0]);
+
+    // Verify selection was made
+    await waitFor(() => {
+      expect(onSelectionChange).toHaveBeenCalledWith('red');
+      expect(combobox).toHaveValue('Red');
+    });
+
+    onSelectionChange.mockClear();
+
+    // Clear the input completely
+    await userEvent.clear(combobox);
+
+    // Blur the input
+    await act(async () => {
+      combobox.blur();
+    });
+
+    // Should clear selection even though clearOnBlur is false
+    await waitFor(() => {
+      expect(onSelectionChange).toHaveBeenCalledWith(null);
+      expect(combobox).toHaveValue('');
+    });
+  });
+
   it('should show all items when opening with no results', async () => {
     const { getByRole, getAllByRole, queryByRole, getByTestId } =
       renderWithRoot(