fix(tasty): cleanup method (#773)

Author: tenphi

.changeset/breezy-planes-talk.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix cleanup of style in the new style injector.

.changeset/chatty-radios-agree.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Improved debug tools with better DX and simpler API.

.changeset/curly-vans-crash.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Optimize rule generation by sorting in cache keys.

.changeset/perfect-jars-jump.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Improve cache cleanup logic and cache checks.

.size-limit.cjs

@@ -20,20 +20,20 @@ module.exports = [
         }),
       );
     },
-    limit: '305kB',
+    limit: '310kB',
   },
   {
     name: 'Tree shaking (just a Button)',
     path: './dist/es/index.js',
     webpack: true,
     import: '{ Button }',
-    limit: '32 kB',
+    limit: '33 kB',
   },
   {
     name: 'Tree shaking (just an Icon)',
     path: './dist/es/index.js',
     webpack: true,
     import: '{ AiIcon }',
-    limit: '19 kB',
+    limit: '20 kB',
   },
 ];

.storybook/preview.jsx

@@ -8,9 +8,9 @@ configure({ testIdAttribute: 'data-qa', asyncUtilTimeout: 10000 });
 
 // Load tasty debug utilities in local Storybook only (exclude Chromatic)
 if (!isChromatic() && import.meta.env.DEV) {
-  import('../src/tasty/debug').then(({ installGlobalDebug }) => {
+  import('../src/tasty/debug').then(({ tastyDebug }) => {
     try {
-      installGlobalDebug({ force: true });
+      tastyDebug.install();
     } catch (e) {
       console.warn('tastyDebug installation failed:', e);
     }

src/components/fields/ComboBox/ComboBox.tsx

@@ -3,7 +3,6 @@ import {
   ForwardedRef,
   forwardRef,
   ReactElement,
-  ReactNode,
   RefObject,
   useEffect,
   useMemo,
@@ -71,18 +70,14 @@ const TriggerElement = tasty({
     placeContent: 'center',
     placeSelf: 'stretch',
     radius: '(1r - 1bw) right',
-    width: {
-      '': '4x',
-      '[data-size="small"]': '3x',
-      '[data-size="medium"]': '4x',
-    },
+    width: '3x',
     color: {
       '': '#dark-02',
       hovered: '#dark-02',
       pressed: '#purple',
       '[disabled]': '#dark.30',
     },
-    border: 0,
+    border: 'left',
     reset: 'button',
     margin: 0,
     fill: {

src/components/fields/FilterPicker/FilterPicker.tsx

@@ -220,6 +220,21 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
     allValueProps,
     customValueProps,
     newCustomValueProps,
+    searchPlaceholder,
+    autoFocus,
+    filter,
+    emptyLabel,
+    searchInputStyles,
+    searchInputRef,
+    listStyles,
+    optionStyles,
+    sectionStyles,
+    headingStyles,
+    listRef,
+    disallowEmptySelection,
+    shouldUseVirtualFocus,
+    onEscape,
+    onOptionClick,
     ...otherProps
   } = props;
 
@@ -1005,6 +1020,17 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
                 selectedKeys={
                   selectionMode === 'multiple' ? mappedSelectedKeys : undefined
                 }
+                searchPlaceholder={searchPlaceholder}
+                filter={filter}
+                listStyles={listStyles}
+                optionStyles={optionStyles}
+                sectionStyles={sectionStyles}
+                headingStyles={headingStyles}
+                listRef={listRef}
+                disallowEmptySelection={disallowEmptySelection}
+                emptyLabel={emptyLabel}
+                searchInputStyles={searchInputStyles}
+                searchInputRef={searchInputRef}
                 disabledKeys={disabledKeys}
                 focusOnHover={focusOnHover}
                 shouldFocusWrap={shouldFocusWrap}