fix(Select,ComboBox): wrapperStyles and style props extraction

Author: tenphi

.changeset/young-bears-add.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Add wrapperStyles to Select and ComboBox components and fix style props extraction.

src/components/fields/ComboBox/ComboBox.tsx

@@ -22,7 +22,8 @@ import { useEvent } from '../../../_internal/index';
 import { LoadingIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
 import {
-  BLOCK_STYLES,
+  BASE_STYLES,
+  COLOR_STYLES,
   extractStyles,
   OUTER_STYLES,
   tasty,
@@ -138,6 +139,8 @@ export interface CubeComboBoxProps<T>
   allowsCustomValue?: boolean;
 }
 
+const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
+
 export const ComboBox = forwardRef(function ComboBox<T extends object>(
   props: CubeComboBoxProps<T>,
   ref: ForwardedRef<HTMLDivElement>,
@@ -191,9 +194,10 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     inputStyles,
     optionStyles,
     triggerStyles,
-    suffix,
     listBoxStyles,
     overlayStyles,
+    wrapperStyles,
+    suffix,
     hideTrigger,
     message,
     description,
@@ -223,9 +227,7 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     menuTrigger,
   });
 
-  const outerStyles = extractStyles(otherProps, OUTER_STYLES, styles);
-
-  inputStyles = extractStyles(otherProps, BLOCK_STYLES, inputStyles);
+  styles = extractStyles(otherProps, PROP_STYLES, styles);
 
   ref = useCombinedRefs(ref);
   wrapperRef = useCombinedRefs(wrapperRef);
@@ -409,7 +411,7 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
       ref={wrapperRef}
       qa={qa || 'ComboBox'}
       {...modAttrs(mods)}
-      styles={outerStyles}
+      styles={wrapperStyles}
       style={{
         zIndex: isFocused ? 1 : 'initial',
       }}

src/components/fields/Select/Select.tsx

@@ -28,9 +28,11 @@ import { LoadingIcon } from '../../../icons/index';
 import { useProviderProps } from '../../../provider';
 import { FieldBaseProps } from '../../../shared/index';
 import {
+  BASE_STYLES,
   BasePropsWithoutChildren,
-  BLOCK_STYLES,
-  BlockStyleProps,
+  BaseStyleProps,
+  COLOR_STYLES,
+  ColorStyleProps,
   extractStyles,
   OUTER_STYLES,
   OuterStyleProps,
@@ -244,9 +246,10 @@ const StyledOverlayElement = styled(OverlayElement)`
 export interface CubeSelectBaseProps<T>
   extends BasePropsWithoutChildren,
     AriaLabelingProps,
+    BaseStyleProps,
     OuterStyleProps,
+    ColorStyleProps,
     FieldBaseProps,
-    BlockStyleProps,
     CollectionBase<T>,
     AriaSelectProps<T> {
   icon?: ReactElement;
@@ -262,6 +265,7 @@ export interface CubeSelectBaseProps<T>
   triggerStyles?: Styles;
   listBoxStyles?: Styles;
   overlayStyles?: Styles;
+  wrapperStyles?: Styles;
   direction?: 'top' | 'bottom';
   shouldFlip?: boolean;
   inputProps?: Props;
@@ -278,6 +282,8 @@ export interface CubeSelectProps<T> extends CubeSelectBaseProps<T> {
   placeholder?: string;
 }
 
+const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
+
 function Select<T extends object>(
   props: CubeSelectProps<T>,
   ref: DOMRef<HTMLDivElement>,
@@ -313,9 +319,10 @@ function Select<T extends object>(
     overlayOffset = 8,
     inputStyles,
     optionStyles,
-    suffix,
+    wrapperStyles,
     listBoxStyles,
     overlayStyles,
+    suffix,
     message,
     description,
     direction = 'bottom',
@@ -332,9 +339,8 @@ function Select<T extends object>(
     ...otherProps
   } = props;
   let state = useSelectState(props);
-  const outerStyles = extractStyles(otherProps, OUTER_STYLES, styles);
 
-  inputStyles = extractStyles(otherProps, BLOCK_STYLES, inputStyles);
+  styles = extractStyles(otherProps, PROP_STYLES, styles);
 
   ref = useCombinedRefs(ref);
   triggerRef = useCombinedRefs(triggerRef);
@@ -417,7 +423,7 @@ function Select<T extends object>(
     <SelectWrapperElement
       qa={qa || 'Select'}
       mods={modifiers}
-      styles={outerStyles}
+      styles={wrapperStyles}
       data-size={size}
       data-type={type}
       data-theme={theme}