fix: Support Responsive

Signed-off-by: Gabriel Dugny <gabriel.dugny@believe.com>

packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx

@@ -20,6 +20,8 @@ import { ToggleButton } from '../ToggleButton/ToggleButton';
 import { Flex } from '../Flex';
 import { Text } from '../Text';
 import { useState } from 'react';
+import type { Selection } from 'react-aria-components';
+import { useBreakpoint } from '../../hooks/useBreakpoint';
 import {
   RiCloudLine,
   RiStarLine,
@@ -124,16 +126,42 @@ export const Orientation = meta.story({
   ),
 });
 
+export const ResponsiveOrientation = meta.story({
+  render: () => {
+    const { breakpoint } = useBreakpoint(); // For testing purposes only (display breakpoint)
+
+    return (
+      <Flex direction="column" gap="3">
+        <Text>
+          Breakpoint: {breakpoint} (orientation: vertical on initial/sm,
+          horizontal from md+)
+        </Text>
+        <ToggleButtonGroup
+          selectionMode="single"
+          orientation={{ initial: 'vertical', md: 'horizontal' }}
+          defaultSelectedKeys={['morning']}
+        >
+          <ToggleButton id="morning">Morning</ToggleButton>
+          <ToggleButton id="afternoon">Afternoon</ToggleButton>
+          <ToggleButton id="evening">Evening</ToggleButton>
+        </ToggleButtonGroup>
+      </Flex>
+    );
+  },
+});
+
 export const ControlledGroup = meta.story({
   render: () => {
-    const [selectedKeys, setSelectedKeys] = useState(new Set(['beta']));
+    const [selectedKeys, setSelectedKeys] = useState<Selection>(
+      new Set(['beta']),
+    );
 
     return (
       <Flex direction="column" gap="3">
         <ToggleButtonGroup
           selectionMode="single"
           selectedKeys={selectedKeys}
-          onSelectionChange={keys => setSelectedKeys(new Set(keys))}
+          onSelectionChange={setSelectedKeys}
         >
           <ToggleButton id="alpha">Alpha</ToggleButton>
           <ToggleButton id="beta">Beta</ToggleButton>

packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -18,27 +18,30 @@ import clsx from 'clsx';
 import { forwardRef, Ref } from 'react';
 import { ToggleButtonGroup as AriaToggleButtonGroup } from 'react-aria-components';
 import type { ToggleButtonGroupProps } from './types';
-import { useStyles } from '../../hooks/useStyles';
+import { resolveResponsiveValue, useStyles } from '../../hooks/useStyles';
 import { ToggleButtonGroupDefinition } from './definition';
 import styles from './ToggleButtonGroup.module.css';
+import { useBreakpoint } from '../../hooks/useBreakpoint';
 
 /** @public */
 export const ToggleButtonGroup = forwardRef(
   (props: ToggleButtonGroupProps, ref: Ref<HTMLDivElement>) => {
+    const { breakpoint } = useBreakpoint();
     const { classNames, dataAttributes, cleanedProps } = useStyles(
       ToggleButtonGroupDefinition,
       {
-        orientation: 'horizontal',
+        orientation: 'horizontal' as const,
         ...props,
       },
     );
 
-    const { className, children, ...rest } = cleanedProps;
+    const { className, children, orientation, ...rest } = cleanedProps;
 
     return (
       <AriaToggleButtonGroup
         className={clsx(classNames.root, styles[classNames.root], className)}
         ref={ref}
+        orientation={resolveResponsiveValue(orientation, breakpoint)}
         {...dataAttributes}
         {...rest}
       >

packages/ui/src/components/ToggleButtonGroup/types.ts

@@ -14,14 +14,13 @@
  * limitations under the License.
  */
 
-import type { Breakpoint } from '../..';
 import type { ToggleButtonGroupProps as AriaToggleButtonGroupProps } from 'react-aria-components';
+import { Responsive } from '../../types';
 
 /** @public */
 export interface ToggleButtonGroupProps
-  extends AriaToggleButtonGroupProps<object> {
-  orientation?:
-    | 'horizontal'
-    | 'vertical'
-    | Partial<Record<Breakpoint, 'horizontal' | 'vertical'>>;
+  extends Omit<AriaToggleButtonGroupProps, 'orientation'> {
+  orientation?: Responsive<
+    NonNullable<AriaToggleButtonGroupProps['orientation']>
+  >;
 }

packages/ui/src/hooks/useStyles.ts

@@ -23,10 +23,13 @@ import { utilityClassMap } from '../utils/utilityClassMap';
  * @param breakpoint - The current breakpoint
  * @returns The resolved value for the current breakpoint
  */
-function resolveResponsiveValue(
-  value: string | Record<string, string>,
+export function resolveResponsiveValue<T extends string>(
+  value: T | Partial<Record<string, T>> | undefined,
   breakpoint: string,
-): string | undefined {
+): T | undefined {
+  if (value === undefined) {
+    return undefined;
+  }
   if (typeof value === 'string') {
     return value;
   }