uikit-react-public 0.29.5 → 0.30.0

package/lib/components/Select/Select.tsx

@@ -14,6 +14,7 @@ const Select = (<T extends string | number = string>(
     filterable,
     clearable,
     onValueChange,
+    dropdownWidth,
     ref,
     ...rest
   } = props;
@@ -25,6 +26,11 @@ const Select = (<T extends string | number = string>(
     if (clearable) {
       console.warn('clearable is not supported on native Select; ignoring.');
     }
+    if (dropdownWidth) {
+      console.warn(
+        'dropdownWidth is not supported on native Select; ignoring.'
+      );
+    }
     const { value, ...nativeRest } = rest;
     const {
       value: nativeAttrValue,
@@ -51,6 +57,7 @@ const Select = (<T extends string | number = string>(
       onValueChange={onValueChange}
       filterable={filterable}
       clearable={clearable}
+      dropdownWidth={dropdownWidth}
       ref={ref as React.Ref<HTMLDivElement>}
       {...rest}
     />

package/lib/components/Select/Select.types.ts

@@ -37,6 +37,8 @@ export type FilterInputProps = Omit<
   | 'aria-label'
 >;
 
+export type SelectDropdownWidth = 'content' | 'match-select';
+
 type SelectBaseProps<T = string | number> = Omit<
   React.HTMLAttributes<HTMLElement>,
   'onChange'
@@ -91,6 +93,12 @@ type SelectBaseProps<T = string | number> = Omit<
    * Allow long option labels to wrap instead of truncating
    */
   lineBreak?: boolean;
+  /**
+   * Controls the width of the custom options panel.
+   * - `content` (default): panel is at least the Select width and can grow to fit option labels.
+   * - `match-select`: panel width is capped to the Select width.
+   */
+  dropdownWidth?: SelectDropdownWidth;
   /**
    * Custom className for the root element
    */
@@ -141,8 +149,7 @@ export type ClearableSelectProps<T = string | number> = SelectBaseProps<T> & {
  * Public props for <Select>, used by both custom and native render paths.
  */
 export type SelectProps<T = string | number> =
-  | NonClearableSelectProps<T>
-  | ClearableSelectProps<T>;
+  NonClearableSelectProps<T> | ClearableSelectProps<T>;
 
 export type InternalSelectProps<T = string | number> = SelectBaseProps<T> & {
   value?: T | null;

package/lib/components/Select/__tests__/Select.test.tsx

@@ -1,6 +1,11 @@
 import { describe, expect, test, vi, beforeAll } from 'vitest';
 import { useState } from 'react';
-import { createEvent, fireEvent, render } from '@testing-library/react';
+import {
+  createEvent,
+  fireEvent,
+  render,
+  waitFor,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Select from '../Select';
 import { ThemeContextProvider } from '../../../theme/useTheme';
@@ -91,6 +96,181 @@ describe('Select', () => {
     expect(options[2].textContent).toBe(defaultOptions[2].label);
   });
 
+  test('renders the open panel inside an overlay', async () => {
+    const user = userEvent.setup();
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Select
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    await user.click(renderResult.getByRole('combobox'));
+
+    const panel = renderResult.getByTestId('ucl-uikit-select__panel');
+    const overlay = panel.parentElement;
+
+    expect(overlay).toHaveClass('ucl-overlay');
+    await waitFor(() => {
+      expect(overlay).toHaveStyle({
+        position: 'absolute',
+      });
+    });
+  });
+
+  test('dropdownWidth defaults to content width', async () => {
+    const user = userEvent.setup();
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Select
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    await user.click(renderResult.getByRole('combobox'));
+
+    expect(renderResult.getByRole('listbox')).toHaveStyle({
+      width: 'fit-content',
+    });
+  });
+
+  test('dropdownWidth=match-select caps panel width to the select width', async () => {
+    const user = userEvent.setup();
+    const getBoundingClientRectSpy = vi.spyOn(
+      Element.prototype,
+      'getBoundingClientRect'
+    );
+
+    getBoundingClientRectSpy.mockImplementation(() => ({
+      x: 0,
+      y: 0,
+      top: 0,
+      left: 0,
+      right: 240,
+      bottom: 48,
+      width: 240,
+      height: 48,
+      toJSON: () => {},
+    }));
+
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Select
+          dropdownWidth='match-select'
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    await user.click(renderResult.getByRole('combobox'));
+
+    await waitFor(() => {
+      expect(renderResult.getByRole('listbox')).toHaveStyle({
+        width: '240px',
+        maxWidth: '240px',
+      });
+    });
+
+    getBoundingClientRectSpy.mockRestore();
+  });
+
+  test('open dropdown closes when clicking outside', async () => {
+    const user = userEvent.setup();
+    const renderResult = render(
+      <ThemeContextProvider>
+        <div>
+          <Select
+            options={defaultOptions}
+            value=''
+            onValueChange={() => {}}
+          />
+          <button type='button'>Outside</button>
+        </div>
+      </ThemeContextProvider>
+    );
+
+    await user.click(renderResult.getByRole('combobox'));
+    expect(renderResult.getByRole('listbox')).toBeInTheDocument();
+
+    await user.click(renderResult.getByRole('button', { name: 'Outside' }));
+
+    expect(renderResult.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  test('panel width is capped to dialog body width inside a dialog', async () => {
+    const user = userEvent.setup();
+    const getBoundingClientRectSpy = vi.spyOn(
+      Element.prototype,
+      'getBoundingClientRect'
+    );
+
+    getBoundingClientRectSpy.mockImplementation(function (this: Element) {
+      if (this.getAttribute('role') === 'document') {
+        return {
+          x: 0,
+          y: 0,
+          top: 0,
+          left: 0,
+          right: 431,
+          bottom: 200,
+          width: 431,
+          height: 200,
+          toJSON: () => {},
+        };
+      }
+
+      return {
+        x: 0,
+        y: 0,
+        top: 0,
+        left: 0,
+        right: 400,
+        bottom: 48,
+        width: 400,
+        height: 48,
+        toJSON: () => {},
+      };
+    });
+
+    const result = render(
+      <ThemeContextProvider>
+        <dialog open>
+          <div role='document'>
+            <Select
+              options={[
+                {
+                  label:
+                    'A very long option label that should be truncated in the dialog',
+                  value: 'long',
+                },
+              ]}
+              value=''
+              onValueChange={() => {}}
+            />
+          </div>
+        </dialog>
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByRole('combobox'));
+
+    await waitFor(() => {
+      expect(result.getByRole('listbox')).toHaveStyle({
+        maxWidth: 'min(431px, calc(100vw - (32px * 2)))',
+      });
+    });
+
+    getBoundingClientRectSpy.mockRestore();
+  });
+
   test('Cannot be used when disabled', async () => {
     const user = userEvent.setup();
     const renderResult = render(

package/lib/components/Select/subcomponents/CustomSelect.tsx

@@ -1,7 +1,16 @@
-import { useState, useRef, useEffect, useMemo, useId } from 'react';
+import {
+  useState,
+  useRef,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useId,
+} from 'react';
 import { css, cx } from '@emotion/css';
 import { VisibleField, Panel, CustomOption, FilterInput } from '.';
 import { useTheme } from '../../../theme';
+import Overlay from '../../Overlay';
+import type { OverlaySize } from '../../Overlay';
 import type { InternalSelectProps } from '../Select.types';
 
 const NAME = 'ucl-uikit-select';
@@ -32,6 +41,7 @@ const CustomSelect = <T extends string | number>({
   clearable = false,
   placeholder,
   lineBreak = false,
+  dropdownWidth = 'content',
   filterInputProps,
   width,
   testId = NAME,
@@ -107,11 +117,17 @@ const CustomSelect = <T extends string | number>({
   const [selectedOptionIndex, setSelectedOptionIndex] = useState<number | null>(
     null
   );
+  const [panelMaxWidth, setPanelMaxWidth] = useState<number | null>(null);
+  const [panelReferenceWidth, setPanelReferenceWidth] = useState<number | null>(
+    null
+  );
+  const [overlaySize, setOverlaySize] = useState<OverlaySize | null>(null);
   const filterInputRef = useRef<HTMLInputElement | null>(null);
   const clearButtonRef = useRef<HTMLButtonElement | null>(null);
   const reactId = useId();
   const idBase = props.id ?? `${testId}-${reactId.replace(/[:]/g, '')}`;
   const listboxId = `${idBase}-listbox`;
+  const overlayViewportPadding = parseFloat(String(theme.margin.m32));
 
   // Returns a list of indexes of options that are currently visible based on the filter text
   const visibleOptionIndexes = useMemo(() => {
@@ -259,6 +275,35 @@ const CustomSelect = <T extends string | number>({
     }
   }, [filterable, isOpen]);
 
+  useLayoutEffect(() => {
+    if (!isOpen) {
+      setPanelMaxWidth(null);
+      setPanelReferenceWidth(null);
+      setOverlaySize(null);
+      return;
+    }
+
+    const updatePanelMaxWidth = () => {
+      const referenceElement = effectiveRef.current;
+      const dialogElement = referenceElement?.closest('dialog');
+      const dialogBodyElement =
+        dialogElement?.querySelector<HTMLElement>('[role="document"]');
+      const dialogBodyRect = dialogBodyElement?.getBoundingClientRect();
+      const referenceRect = referenceElement?.getBoundingClientRect();
+
+      setPanelReferenceWidth(referenceRect?.width ?? null);
+      setPanelMaxWidth(
+        dialogBodyRect && referenceRect
+          ? Math.max(0, dialogBodyRect.right - referenceRect.left)
+          : null
+      );
+    };
+
+    updatePanelMaxWidth();
+    window.addEventListener('resize', updatePanelMaxWidth);
+    return () => window.removeEventListener('resize', updatePanelMaxWidth);
+  }, [effectiveRef, isOpen]);
+
   const togglePanel = () => {
     if (!disabled) setIsOpen((prev) => !prev);
   };
@@ -274,6 +319,21 @@ const CustomSelect = <T extends string | number>({
     }
   };
 
+  const handleOverlaySizeChange = (nextSize: OverlaySize) => {
+    setOverlaySize((prevSize) => {
+      if (
+        prevSize &&
+        prevSize.referenceWidth === nextSize.referenceWidth &&
+        prevSize.availableWidth === nextSize.availableWidth &&
+        prevSize.availableHeight === nextSize.availableHeight
+      ) {
+        return prevSize;
+      }
+
+      return nextSize;
+    });
+  };
+
   const handleClick = (event: React.MouseEvent) => {
     if (disabled) return;
     if (openedViaFocusRef.current) {
@@ -567,33 +627,55 @@ const CustomSelect = <T extends string | number>({
         )}
       </VisibleField>
       {isOpen && (
-        <Panel
-          className={panelClassName}
-          id={listboxId}
-          role='listbox'
+        <Overlay
+          reference={effectiveRef}
+          placement='bottom-start'
+          flip={{ padding: overlayViewportPadding }}
+          shift={{
+            padding: overlayViewportPadding,
+            mainAxis: false,
+            crossAxis: true,
+          }}
+          size={{
+            matchReferenceWidth: true,
+            padding: overlayViewportPadding,
+          }}
+          onSizeChange={handleOverlaySizeChange}
         >
-          {visibleOptions.map((option, index) => (
-            <CustomOption<T>
-              key={`${String(option.value)}-${visibleOptionIndexes[index]}`}
-              id={`${idBase}-option-${visibleOptionIndexes[index]}`}
-              value={option.value}
-              optionIndex={visibleOptionIndexes[index]}
-              isSelected={highlightedVisibleIndex === index}
-              onSelect={handleSelect}
-              lineBreak={lineBreak}
-              role='option'
-              aria-selected={highlightedVisibleIndex === index}
-              aria-posinset={index + 1}
-              aria-setsize={visibleOptions.length}
-              {...option.optionProps}
-            >
-              {option.label}
-            </CustomOption>
-          ))}
-          {visibleOptions.length === 0 && (
-            <div className={noOptionsStyle}>No options</div>
-          )}
-        </Panel>
+          <Panel
+            className={panelClassName}
+            dropdownWidth={dropdownWidth}
+            referenceWidth={
+              overlaySize?.referenceWidth ?? panelReferenceWidth ?? undefined
+            }
+            availableHeight={overlaySize?.availableHeight}
+            maxWidth={panelMaxWidth ?? undefined}
+            id={listboxId}
+            role='listbox'
+          >
+            {visibleOptions.map((option, index) => (
+              <CustomOption<T>
+                key={`${String(option.value)}-${visibleOptionIndexes[index]}`}
+                id={`${idBase}-option-${visibleOptionIndexes[index]}`}
+                value={option.value}
+                optionIndex={visibleOptionIndexes[index]}
+                isSelected={highlightedVisibleIndex === index}
+                onSelect={handleSelect}
+                lineBreak={lineBreak}
+                role='option'
+                aria-selected={highlightedVisibleIndex === index}
+                aria-posinset={index + 1}
+                aria-setsize={visibleOptions.length}
+                {...option.optionProps}
+              >
+                {option.label}
+              </CustomOption>
+            ))}
+            {visibleOptions.length === 0 && (
+              <div className={noOptionsStyle}>No options</div>
+            )}
+          </Panel>
+        </Overlay>
       )}
     </div>
   );

package/lib/components/Select/subcomponents/Panel.tsx

@@ -1,11 +1,24 @@
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../theme';
+import type { SelectDropdownWidth } from '../Select.types';
 
 const NAME = 'ucl-uikit-select__panel';
 
-type PanelProps = React.ComponentPropsWithoutRef<'div'>;
+type PanelProps = React.ComponentPropsWithoutRef<'div'> & {
+  dropdownWidth?: SelectDropdownWidth;
+  referenceWidth?: number;
+  availableHeight?: number;
+  maxWidth?: number;
+};
 
-const Panel = ({ className, ...props }: PanelProps) => {
+const Panel = ({
+  className,
+  dropdownWidth = 'content',
+  referenceWidth,
+  availableHeight,
+  maxWidth,
+  ...props
+}: PanelProps) => {
   const [theme] = useTheme();
 
   const handleClick = (event: React.MouseEvent) => {
@@ -13,15 +26,22 @@ const Panel = ({ className, ...props }: PanelProps) => {
     event.stopPropagation();
   };
 
+  const referenceWidthValue =
+    typeof referenceWidth === 'number' ? `${referenceWidth}px` : '100%';
+  const maxWidthValue =
+    typeof maxWidth === 'number'
+      ? `min(${maxWidth}px, calc(100vw - (${theme.margin.m32} * 2)))`
+      : `calc(100vw - (${theme.margin.m32} * 2))`;
+  const maxHeightValue =
+    typeof availableHeight === 'number'
+      ? `min(400px, ${availableHeight}px)`
+      : '400px';
+
   const baseStyle = css`
-    position: absolute;
-    top: 46px;
-    left: -1px; // -1px to align with the border of the field
-    z-index: 10; // Required: panel must be 'above' subsquent DOM elements
-    min-width: 100%;
+    min-width: ${referenceWidthValue};
     width: fit-content;
-    max-width: calc(100vw - 64px);
-    max-height: 400px;
+    max-width: ${maxWidthValue};
+    max-height: ${maxHeightValue};
     overflow-y: auto;
     overflow-x: hidden;
     box-sizing: content-box;
@@ -30,7 +50,17 @@ const Panel = ({ className, ...props }: PanelProps) => {
     background-color: ${theme.colour.fill.inverse};
   `;
 
-  const style = cx(NAME, baseStyle, className);
+  const matchSelectWidthStyle = css`
+    width: ${referenceWidthValue};
+    max-width: ${referenceWidthValue};
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    dropdownWidth === 'match-select' && matchSelectWidthStyle,
+    className
+  );
 
   return (
     <div

package/lib/components/Snackbar/Snackbar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { css } from '@emotion/css';
 import Snackbar from './Snackbar';
 

package/lib/components/Spinner/Spinner.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { css } from '@emotion/css';
 import Spinner from './Spinner';
 import { theme } from '../../theme';

package/lib/components/StandaloneLink/StandaloneLink.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import Link from './StandaloneLink';
 

package/lib/components/Table/Table.stories.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Table from './Table';
 import Badge from '../Badge/Badge';
 import Icon from '../Icon/Icon';

package/lib/components/Table/subcomponents/Cell/Cell.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 import { css } from '@emotion/css';
 import Row from '../Row';
 import Cell from './Cell';

package/lib/components/Table/subcomponents/HeadCell/HeadCell.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import HeadCell from './HeadCell';
 import Head from '../Head';
 import { SortOrder } from '../../Table.types';