fix(ComboBox): focus events support

Author: tenphi

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

@@ -186,14 +186,16 @@ const meta = {
       description: 'Callback fired when the popover opens or closes',
       control: { type: null },
     },
-    onBlur: {
-      action: (e) => ({ type: 'blur', target: e?.target?.tagName }),
-      description: 'Callback fired when the input loses focus',
+    onFocus: {
+      action: 'focus',
+      description:
+        'Callback fired when focus enters the ComboBox wrapper element',
       control: { type: null },
     },
-    onFocus: {
-      action: (e) => ({ type: 'focus', target: e?.target?.tagName }),
-      description: 'Callback fired when the input receives focus',
+    onBlur: {
+      action: 'blur',
+      description:
+        'Callback fired when focus leaves the ComboBox wrapper element',
       control: { type: null },
     },
   },

src/components/fields/ComboBox/ComboBox.test.tsx

@@ -838,4 +838,49 @@ describe('<ComboBox />', () => {
       expect(combobox).toHaveValue('');
     });
   });
+
+  it('should handle wrapper-level focus and blur events', async () => {
+    const onFocus = jest.fn();
+    const onBlur = jest.fn();
+
+    const { getByRole, getByTestId } = renderWithRoot(
+      <ComboBox label="test" onFocus={onFocus} onBlur={onBlur}>
+        {items.map((item) => (
+          <ComboBox.Item key={item.key}>{item.children}</ComboBox.Item>
+        ))}
+      </ComboBox>,
+    );
+
+    const combobox = getByRole('combobox');
+    const trigger = getByTestId('ComboBoxTrigger');
+
+    // Focus on input should trigger onFocus
+    await act(async () => {
+      combobox.focus();
+    });
+
+    await waitFor(() => {
+      expect(onFocus).toHaveBeenCalledTimes(1);
+    });
+
+    // Moving focus to trigger button within wrapper should NOT trigger onBlur/onFocus
+    onFocus.mockClear();
+    onBlur.mockClear();
+
+    await act(async () => {
+      trigger.focus();
+    });
+
+    expect(onBlur).not.toHaveBeenCalled();
+    expect(onFocus).not.toHaveBeenCalled();
+
+    // Blurring from wrapper should trigger onBlur
+    await act(async () => {
+      trigger.blur();
+    });
+
+    await waitFor(() => {
+      expect(onBlur).toHaveBeenCalledTimes(1);
+    });
+  });
 });

src/components/fields/ComboBox/ComboBox.tsx

@@ -15,6 +15,7 @@ import React, {
 } from 'react';
 import {
   useFilter,
+  useFocusWithin,
   useKeyboard,
   useOverlay,
   useOverlayPosition,
@@ -128,6 +129,10 @@ export interface CubeComboBoxProps<T>
   placeholder?: string;
   /** Whether the input should have autofocus */
   autoFocus?: boolean;
+  /** Callback fired when the wrapper element receives focus */
+  onFocus?: (e: React.FocusEvent) => void;
+  /** Callback fired when the wrapper element loses focus */
+  onBlur?: (e: React.FocusEvent) => void;
 
   /** Popover trigger behavior: 'focus', 'input', or 'manual'. Defaults to 'input' */
   popoverTrigger?: PopoverTriggerAction;
@@ -913,6 +918,8 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     overlayOffset = 8,
     onSelectionChange: externalOnSelectionChange,
     sortSelectedToTop: sortSelectedToTopProp,
+    onFocus,
+    onBlur,
     ...otherProps
   } = props;
 
@@ -1081,6 +1088,13 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
 
   const { isFocused, focusProps } = useFocus({ isDisabled });
 
+  // Wrapper-level focus/blur handlers
+  const { focusWithinProps } = useFocusWithin({
+    isDisabled,
+    onFocusWithin: onFocus,
+    onBlurWithin: onBlur,
+  });
+
   let isInvalid = validationState === 'invalid';
 
   let validationIcon = isInvalid ? InvalidIcon : ValidIcon;
@@ -1429,6 +1443,7 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
         zIndex: isFocused ? 1 : 'initial',
       }}
       data-size={size}
+      {...focusWithinProps}
     >
       {prefix ? <div data-element="Prefix">{prefix}</div> : null}
       <ComboBoxInput

src/components/fields/Switch/Switch.docs.mdx

@@ -36,18 +36,22 @@ Supports [Base properties](/docs/tasty-base-properties--docs)
 
 Customizes the root wrapper element of the component.
 
+#### inputStyles
+
+Customizes the switch toggle element specifically.
+
 **Sub-elements:**
 - `Thumb` - The movable indicator inside the switch
 
-#### inputStyles
+#### fieldStyles
 
-Customizes the switch toggle element specifically.
+Customizes the field wrapper element when the switch is used with labels or validation.
 
 ### Style Properties
 
-The Switch component supports all standard style properties:
+These properties allow direct style application without using the `styles` prop:
 
-`display`, `font`, `preset`, `hide`, `opacity`, `whiteSpace`, `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`, `reset`, `padding`, `paddingInline`, `paddingBlock`, `shadow`, `border`, `radius`, `overflow`, `scrollbar`, `outline`, `textAlign`, `color`, `fill`, `fade`, `textTransform`, `fontWeight`, `fontStyle`, `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
+`margin`, `inset`, `position`, `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`, `padding`, `paddingInline`, `paddingBlock`, `shadow`, `border`, `radius`, `overflow`, `scrollbar`, `outline`
 
 ### Modifiers
 
@@ -69,7 +73,8 @@ The `mods` property accepts the following modifiers you can override:
 ### Sizes
 
 - `small` - Compact size for dense interfaces
-- `default` - Standard size
+- `medium` - Standard size (default)
+- `large` - Larger size for emphasis
 
 ## Examples
 
@@ -81,11 +86,7 @@ The `mods` property accepts the following modifiers you can override:
 
 ### With Default State
 
-```jsx
-<Switch defaultSelected={true}>
-  Auto-save enabled
-</Switch>
-```
+<Story of={SwitchStories.WithDefaultSelected} />
 
 ### Controlled State
 
@@ -100,41 +101,25 @@ const [isEnabled, setIsEnabled] = useState(false);
 </Switch>
 ```
 
-### Small Size
+### All Sizes
 
-```jsx
-<Switch size="small">
-  Compact toggle
-</Switch>
-```
+<Story of={SwitchStories.Sizes} />
 
 ### With Validation
 
-```jsx
-<Switch
-  isRequired
-  validationState="invalid"
-  errorMessage="You must agree to continue"
->
-  I agree to the terms
-</Switch>
-```
+<Story of={SwitchStories.Invalid} />
 
 ### Disabled State
 
-```jsx
-<Switch isDisabled>
-  Cannot be changed
-</Switch>
-```
+<Story of={SwitchStories.Disabled} />
 
 ### Loading State
 
-```jsx
-<Switch isLoading>
-  Applying changes...
-</Switch>
-```
+<Story of={SwitchStories.Loading} />
+
+### All States Overview
+
+<Story of={SwitchStories.AllStates} />
 
 ## Accessibility