@indico-data/design-system 3.9.0 → 3.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "3.9.0",
+  "version": "3.11.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/floatUI/FloatUI.mdx

@@ -17,9 +17,16 @@ The FloatUI component is used to display content relative to another element. It
 
 FloatUI can be used in two modes:
 
-- **Uncontrolled Mode:** FloatUI manages its own state, toggling visibility when the trigger is clicked.
+- **Uncontrolled Mode:** FloatUI manages its own state, toggling visibility when the trigger is clicked (or hovered if `hover` prop is true).
 - **Controlled Mode:** The parent component controls visibility by passing `isOpen` and `setIsOpen` props
 
+## Interaction Types
+
+FloatUI supports two interaction types:
+
+- **Click (default):** Opens when the trigger is clicked
+- **Hover:** Opens when the trigger is hovered. Set the `hover` prop to `true` to enable hover interactions.
+
 ### Example: Controlled `FloatUI`
 
 ```tsx

package/src/components/floatUI/FloatUI.stories.tsx

@@ -73,6 +73,18 @@ const meta: Meta<typeof FloatUI> = {
         },
       },
     },
+    hover: {
+      control: 'boolean',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
   },
   decorators: [
     (Story: React.ComponentType) => (
@@ -170,3 +182,35 @@ export const Controlled: Story = {
     );
   },
 };
+
+export const Hover: Story = {
+  args: {
+    ariaLabel: 'Hover FloatUI',
+    hover: true,
+  },
+  render: (args) => (
+    <FloatUI {...args} ariaLabel="Hover FloatUI" hover>
+      <Button iconLeft="info" ariaLabel="Hover me" variant="action">
+        Hover me
+      </Button>
+      <Menu>
+        <Button
+          data-testid="hover-item-1"
+          ariaLabel="Item 1"
+          iconLeft="retrain"
+          onClick={() => console.log('Item 1')}
+        >
+          Item 1
+        </Button>
+        <Button
+          data-testid="hover-item-2"
+          ariaLabel="Item 2"
+          iconLeft="edit"
+          onClick={() => console.log('Item 2')}
+        >
+          Item 2
+        </Button>
+      </Menu>
+    </FloatUI>
+  ),
+};

package/src/components/floatUI/FloatUI.tsx

@@ -2,6 +2,7 @@ import React, { useRef, isValidElement, useState } from 'react';
 import {
   FloatingPortal,
   useClick,
+  useHover,
   useFloating,
   useInteractions,
   UseFloatingOptions,
@@ -27,6 +28,7 @@ export function FloatUI({
   portalOptions = {},
   floatingOptions = defaultOptions,
   className,
+  hover = false,
 }: FloatUIProps) {
   const [internalIsOpen, setInternalIsOpen] = useState(false);
 
@@ -60,10 +62,12 @@ export function FloatUI({
     },
   });
 
-  const click = useClick(context);
+  // Can't call hooks conditionally so this enabled option is needed.
+  const click = useClick(context, { enabled: !hover });
+  const hoverHook = useHover(context, { enabled: hover });
   const dismiss = useDismiss(context);
 
-  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
+  const { getReferenceProps, getFloatingProps } = useInteractions([click, hoverHook, dismiss]);
 
   const tooltipContent = (
     <div

package/src/components/floatUI/__tests__/FloatUI.test.tsx

@@ -2,6 +2,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import { FloatUI } from '../FloatUI';
 import { Menu } from '../../menu';
 import { Button } from '../../button';
+import userEvent from '@testing-library/user-event';
 
 describe('FloatUI Component', () => {
   it('does not display FloatUI content initially when rendered in uncontrolled mode', () => {
@@ -108,4 +109,35 @@ describe('FloatUI Component', () => {
     fireEvent.click(screen.getByText('Toggle'));
     expect(setIsOpen).toHaveBeenCalledWith(true, expect.any(Object), 'click');
   });
+
+  it('displays the FloatUI content when the trigger is hovered in hover mode', async () => {
+    const user = userEvent.setup();
+    render(
+      <FloatUI ariaLabel="Example FloatUI" hover>
+        <Button ariaLabel="Hover me">Hover me</Button>
+        <div>FloatUI Content</div>
+      </FloatUI>,
+    );
+
+    expect(screen.queryByText('FloatUI Content')).not.toBeInTheDocument();
+
+    await user.hover(screen.getByText('Hover me'));
+    expect(screen.getByText('FloatUI Content')).toBeInTheDocument();
+  });
+
+  it('hides the FloatUI content when mouse leaves in hover mode', async () => {
+    const user = userEvent.setup();
+    render(
+      <FloatUI ariaLabel="Example FloatUI" hover>
+        <Button ariaLabel="Hover me">Hover me</Button>
+        <div>FloatUI Content</div>
+      </FloatUI>,
+    );
+
+    await user.hover(screen.getByText('Hover me'));
+    expect(screen.getByText('FloatUI Content')).toBeInTheDocument();
+
+    await user.unhover(screen.getByText('Hover me'));
+    expect(screen.queryByText('FloatUI Content')).not.toBeInTheDocument();
+  });
 });

package/src/components/floatUI/types.ts

@@ -19,4 +19,6 @@ export type FloatUIProps = {
   };
   /** Function to toggle the visibility of the FloatUI (for controlled mode). */
   setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  /** If true, opens on hover instead of click. Defaults to false. */
+  hover?: boolean;
 };

package/src/components/forms/select/Select.tsx

@@ -34,30 +34,38 @@ const OptionComponent = <OptionType extends SelectOption>({
   );
 };
 
-const Select = <OptionType extends SelectOption>({
-  classNamePrefix = 'select',
-  className,
-  components: customComponents,
-  label,
-  hasHiddenLabel,
-  name,
-  ...props
-}: SelectProps<OptionType>) => {
-  const defaultComponents = {
-    Option: OptionComponent as React.ComponentType<OptionProps<OptionType>>,
-  };
+const Select = React.forwardRef(
+  <OptionType extends SelectOption>(
+    {
+      classNamePrefix = 'select',
+      className,
+      components: customComponents,
+      label,
+      hasHiddenLabel,
+      name,
+      ...props
+    }: SelectProps<OptionType>,
+    ref: React.Ref<any>,
+  ) => {
+    const defaultComponents = {
+      Option: OptionComponent as React.ComponentType<OptionProps<OptionType>>,
+    };
 
-  const mergedComponents = { ...defaultComponents, ...customComponents };
+    const mergedComponents = { ...defaultComponents, ...customComponents };
 
-  return (
-    <ReactSelect
-      classNamePrefix={classNamePrefix}
-      className={classNames('select-wrapper', className)}
-      components={mergedComponents}
-      {...props}
-    />
-  );
-};
+    return (
+      <ReactSelect
+        ref={ref}
+        classNamePrefix={classNamePrefix}
+        className={classNames('select-wrapper', className)}
+        components={mergedComponents}
+        {...props}
+      />
+    );
+  },
+) as <OptionType extends SelectOption>(
+  props: SelectProps<OptionType> & { ref?: React.Ref<any> },
+) => React.ReactElement;
 
 const LabeledSelect = withLabel(Select);
 

package/src/components/forms/select/types.ts

@@ -1,6 +1,8 @@
+import { ReactNode } from 'react';
+
 export type SelectOption = {
   label: string;
   value: string;
-  detail?: string;
+  detail?: ReactNode;
   [key: string]: any; // Allow for additional properties
 };