uikit-react-public 0.50.5 → 0.50.6

package/lib/components/ToggleGroup/subcomponents/__tests__/{Item.test.tsx → ToggleGroupItem.test.tsx}

@@ -1,9 +1,10 @@
 import { describe, expect, test, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import ToggleGroup from '../../ToggleGroup';
-import ToggleGroupItem from '../Item';
 import { ThemeContextProvider } from '../../../../theme/useTheme';
 
+const ToggleGroupItem = ToggleGroup.Item;
+
 const wrap = (ui: React.ReactElement) =>
   render(<ThemeContextProvider>{ui}</ThemeContextProvider>);
 
@@ -20,8 +21,10 @@ describe('ToggleGroupItem', () => {
 
     const item = screen.getByRole('radio', { name: 'Option 1' });
 
+    expect(item).toHaveAttribute('data-testid', 'ucl-uikit-toggle-group__item');
+    expect(item).toHaveClass('ucl-uikit-toggle-group__item');
     expect(item).toHaveAttribute('aria-checked', 'false');
-    expect(item).toHaveAttribute('tabindex', '-1');
+    expect(item).toHaveAttribute('tabindex', '0');
   });
 
   test('reflects selection state from the surrounding ToggleGroup', () => {
@@ -54,6 +57,7 @@ describe('ToggleGroupItem', () => {
 
   test('calls setValue via the ToggleGroup on click', () => {
     const onValueChange = vi.fn();
+    const onChange = vi.fn();
 
     wrap(
       <ToggleGroup
@@ -67,13 +71,23 @@ describe('ToggleGroupItem', () => {
         <ToggleGroupItem
           value='option-2'
           label='Option 2'
+          className='custom-toggle-group-item'
+          onChange={onChange}
+          testId='option-2'
         />
       </ToggleGroup>
     );
 
-    fireEvent.click(screen.getByRole('radio', { name: 'Option 2' }));
+    const option2 = screen.getByRole('radio', { name: 'Option 2' });
+    fireEvent.click(option2);
 
+    expect(option2).toHaveAttribute('data-testid', 'option-2');
+    expect(option2).toHaveClass(
+      'ucl-uikit-toggle-group__item',
+      'custom-toggle-group-item'
+    );
     expect(onValueChange).toHaveBeenCalledWith('option-2');
+    expect(onChange).toHaveBeenCalledOnce();
   });
 
   test('does not select or fire onValueChange when disabled', () => {
@@ -168,7 +182,7 @@ describe('ToggleGroupItem', () => {
     ).toBeInTheDocument();
   });
 
-  test('only shows a visible checkmark once selected, without changing when it is reserved', () => {
+  test('reserves checkmark space without showing it on unselected items', () => {
     wrap(
       <ToggleGroup defaultValue='option-1'>
         <ToggleGroupItem
@@ -189,7 +203,37 @@ describe('ToggleGroupItem', () => {
       .getByRole('radio', { name: 'Option 2' })
       .closest('label');
 
-    expect(selected!.querySelectorAll('svg').length).toBe(2);
-    expect(unselected!.querySelectorAll('svg').length).toBe(1);
+    const selectedCheckmark = selected!.lastElementChild!.querySelector('svg')!;
+    const unselectedCheckmark =
+      unselected!.lastElementChild!.querySelector('svg')!;
+
+    expect(selected!.querySelectorAll('svg')).toHaveLength(2);
+    expect(unselected!.querySelectorAll('svg')).toHaveLength(2);
+    expect(selectedCheckmark).toHaveStyle({ visibility: 'visible' });
+    expect(unselectedCheckmark).toHaveStyle({ visibility: 'hidden' });
+    expect(selected!.lastElementChild).toHaveStyle({
+      justifyContent: 'center',
+    });
+  });
+
+  test('aligns sublabel content between the item edges', () => {
+    wrap(
+      <ToggleGroup defaultValue='option-1'>
+        <ToggleGroupItem
+          value='option-1'
+          label='Option 1'
+          sublabel='Sublabel 1'
+          icon='BookOpen'
+        />
+      </ToggleGroup>
+    );
+
+    const item = screen
+      .getByRole('radio', { name: 'Option 1 Sublabel 1' })
+      .closest('label');
+
+    expect(item!.lastElementChild).toHaveStyle({
+      justifyContent: 'space-between',
+    });
   });
 });

package/lib/components/index.ts

@@ -142,7 +142,7 @@ export { default as Toggle } from './Toggle';
 export type { ToggleProps } from './Toggle';
 
 export { default as ToggleGroup } from './ToggleGroup';
-export type { ToggleGroupProps, ItemProps } from './ToggleGroup';
+export type { ToggleGroupItemProps, ToggleGroupProps } from './ToggleGroup';
 
 export { default as Chip } from './Chip';
 export type { ChipProps } from './Chip';

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.50.5",
+  "version": "0.50.6",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/components/ToggleGroup/subcomponents/Item.d.ts

@@ -1,11 +0,0 @@
-import { InputHTMLAttributes } from 'react';
-import { SpecificIconsType } from '../../Icon/Icon';
-export interface ItemProps extends InputHTMLAttributes<HTMLInputElement> {
-    value: string;
-    label: string;
-    icon?: keyof SpecificIconsType;
-    disabled?: boolean;
-    sublabel?: string;
-}
-declare const Item: ({ value, label, sublabel, icon, disabled, }: ItemProps) => import("react").JSX.Element;
-export default Item;