feat(FilterListBox): add component (#730)

Author: tenphi

.changeset/angry-boxes-speak.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Improve the layout of Menu component.

.changeset/clever-rings-float.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+`wrapWithField` no longer wrap the input component with a field if no label is provided and `forceField` prop is not set.

.changeset/cool-pianos-lie.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Add a new icon ChartKPI.

.changeset/purple-carrots-jump.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Add FilterPicker component for single and multiple picker experience with a filter.

.changeset/short-humans-crash.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Split ListBox into two components: simple ListBox and FilterListBox with search input.

.cursor/rules/coding.mdc

@@ -0,0 +1,12 @@
+---
+alwaysApply: true
+---
+
+# Flow rules
+- Don't respond with "You're right!", "Great idea!" and so on. Get straight to the point.
+- **Stop and describe the reason**, if you can't closely implement the task or need a different approach from what was asked.
+- Do not run tests if you only changed stories or documentation since the last test run.
+
+# Coding rules
+
+- Use named imports from react (like `useCallback`) instead of using the `React` instance. Avoid: `React.useCallback`.

.size-limit.cjs

@@ -20,7 +20,7 @@ module.exports = [
         }),
       );
     },
-    limit: '270kB',
+    limit: '279kB',
   },
   {
     name: 'Tree shaking (just a Button)',

package.json

@@ -74,6 +74,7 @@
     "@react-types/shared": "^3.27.0",
     "@sparticuz/chromium": "^137.0.1",
     "@tabler/icons-react": "^3.31.0",
+    "@tanstack/react-virtual": "^3.13.12",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@vitejs/plugin-react": "^4.3.2",
     "clipboard-copy": "^4.0.1",

pnpm-lock.yaml

@@ -29,7 +29,7 @@ export default {
       },
     },
     size: {
-      options: ['small', 'medium', 'large'],
+      options: ['tiny', 'small', 'medium', 'large'],
       control: { type: 'radio' },
       description: 'Button size',
       table: {