fix: styles prop leakage (#912)

Author: tenphi

.changeset/fix-styles-extraction.md

@@ -0,0 +1,6 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fixed `styles` prop leaking to inner elements in `TextInput` and `Switch` components
+

src/components/fields/NumberInput/NumberInput.tsx

@@ -22,7 +22,7 @@ export interface CubeNumberInputProps
 }
 
 const StyledTextInputBase = tasty(TextInputBase, {
-  styles: {
+  inputStyles: {
     textAlign: 'right',
   },
 });

src/components/fields/Switch/Switch.tsx

@@ -164,7 +164,9 @@ function Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {
 
   let styles = extractStyles(props, OUTER_STYLES);
 
-  inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles);
+  inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles, undefined, [
+    'styles',
+  ]);
 
   let { isFocused, focusProps } = useFocus({ isDisabled }, true);
   let { hoverProps, isHovered } = useHover({ isDisabled });

src/components/fields/TextInput/TextInputBase.tsx

@@ -263,7 +263,13 @@ function _TextInputBase(props: CubeTextInputBaseProps, ref) {
   let styles = extractStyles(otherProps, OUTER_STYLES);
   let type = otherProps.type;
 
-  inputStyles = extractStyles(otherProps, INPUT_STYLE_PROPS_LIST, inputStyles);
+  inputStyles = extractStyles(
+    otherProps,
+    INPUT_STYLE_PROPS_LIST,
+    inputStyles,
+    undefined,
+    ['styles'],
+  );
 
   let ElementType: 'textarea' | 'input' = multiLine ? 'textarea' : 'input';
   let { isFocused, focusProps } = useFocus({ isDisabled });

src/tasty/utils/styles.ts

@@ -373,7 +373,7 @@ export function extractStyles(
 ): Styles {
   const styles: Styles = {
     ...defaultStyles,
-    ...props.styles,
+    ...(ignoreList.includes('styles') ? undefined : props.styles),
   };
 
   Object.keys(props).forEach((prop) => {