uikit-react-public 0.29.5 → 0.29.6

package/lib/components/Overlay/Overlay.tsx

@@ -1,5 +1,6 @@
 import {
   HTMLAttributes,
+  CSSProperties,
   forwardRef,
   memo,
   useLayoutEffect,
@@ -15,8 +16,11 @@ import {
   flip as fuiFlip,
   shift as fuiShift,
   offset as fuiOffset,
+  size as fuiSize,
   autoUpdate,
   Placement,
+  type FlipOptions,
+  type ShiftOptions,
   // Strategy,
 } from '@floating-ui/react-dom';
 
@@ -26,19 +30,29 @@ import Blanket from '../Blanket';
 
 export const NAME = 'ucl-overlay';
 
-export interface OverlayProps
-  extends HTMLAttributes<HTMLDivElement> {
+type OverlaySizeOptions = {
+  padding?: number;
+  matchReferenceWidth?: boolean;
+};
+
+export type OverlaySize = {
+  referenceWidth: number;
+  availableWidth: number;
+  availableHeight: number;
+};
+
+export interface OverlayProps extends HTMLAttributes<HTMLDivElement> {
   reference: RefObject<HTMLElement | null>;
   placement?: Placement;
   blanket?: boolean;
-  flip?: boolean;
-  shift?: boolean;
+  flip?: boolean | FlipOptions;
+  shift?: boolean | ShiftOptions;
   offset?: number;
+  size?: boolean | OverlaySizeOptions;
   arrow?: ReactElement;
   arrowClassName?: string;
-  onBlanketClick?: (
-    ev: React.MouseEvent<HTMLDivElement>
-  ) => void;
+  onSizeChange?: (size: OverlaySize) => void;
+  onBlanketClick?: (ev: React.MouseEvent<HTMLDivElement>) => void;
 }
 
 export type Ref = HTMLDivElement | null;
@@ -52,27 +66,51 @@ const Overlay = forwardRef<Ref, OverlayProps>(
       flip = true,
       shift = true,
       offset = 0,
+      size = false,
       arrow,
       className,
+      style: inlineStyle,
       arrowClassName,
+      onSizeChange,
       onBlanketClick,
       children,
       ...props
     }: OverlayProps,
     forwardedRef
   ) => {
-    const ref = useRef(null);
+    const ref = useRef<HTMLDivElement | null>(null);
     const arrowRef = useRef<HTMLElement>(null);
 
-    useImperativeHandle<Ref, Ref>(
-      forwardedRef,
-      () => ref.current
-    );
+    useImperativeHandle<Ref, Ref>(forwardedRef, () => ref.current);
 
     const fuiMiddleware = [];
-    if (flip) fuiMiddleware.push(fuiFlip());
-    if (shift) fuiMiddleware.push(fuiShift());
+    if (flip) fuiMiddleware.push(fuiFlip(typeof flip === 'object' ? flip : {}));
+    if (shift)
+      fuiMiddleware.push(fuiShift(typeof shift === 'object' ? shift : {}));
     if (offset) fuiMiddleware.push(fuiOffset(offset));
+    if (size) {
+      const sizeOptions = typeof size === 'object' ? size : {};
+      const { padding = 0, matchReferenceWidth = false } = sizeOptions;
+
+      fuiMiddleware.push(
+        fuiSize({
+          padding,
+          apply({ availableWidth, availableHeight, elements, rects }) {
+            const { style } = elements.floating;
+
+            onSizeChange?.({
+              referenceWidth: rects.reference.width,
+              availableWidth: Math.max(0, availableWidth),
+              availableHeight: Math.max(0, availableHeight),
+            });
+
+            if (matchReferenceWidth) {
+              style.minWidth = `${rects.reference.width}px`;
+            }
+          },
+        })
+      );
+    }
 
     const {
       x,
@@ -88,9 +126,11 @@ const Overlay = forwardRef<Ref, OverlayProps>(
       whileElementsMounted: autoUpdate,
     });
 
-    const overlayPlacement = currentPlacement.split(
-      '-'
-    )[0] as 'left' | 'right' | 'top' | 'bottom';
+    const overlayPlacement = currentPlacement.split('-')[0] as
+      | 'left'
+      | 'right'
+      | 'top'
+      | 'bottom';
 
     useLayoutEffect(() => {
       refs.setReference(reference.current);
@@ -135,9 +175,7 @@ const Overlay = forwardRef<Ref, OverlayProps>(
     let ArrowComp = null;
 
     if (arrow) {
-      const arrowElement = arrow as ReactElement<
-        HTMLAttributes<HTMLElement>
-      >;
+      const arrowElement = arrow as ReactElement<HTMLAttributes<HTMLElement>>;
 
       arrowStyle = cx(
         arrowBaseStyle,
@@ -177,12 +215,20 @@ const Overlay = forwardRef<Ref, OverlayProps>(
       <>
         {blanket && <Blanket onClick={onBlanketClick} />}
         <div
-          ref={refs.setFloating}
+          ref={(node) => {
+            ref.current = node;
+            refs.setFloating(node);
+          }}
           className={style}
           style={{
+            ...(inlineStyle as CSSProperties),
             position: strategy,
             left: x ?? 0,
             top: y ?? 0,
+            visibility:
+              x === null || y === null
+                ? 'hidden'
+                : (inlineStyle as CSSProperties | undefined)?.visibility,
           }}
           {...props}
         >

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

@@ -0,0 +1,81 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { useRef } from 'react';
+import { render, waitFor } from '@testing-library/react';
+import Overlay from '../Overlay';
+
+describe('Overlay', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test('reports viewport sizing when size is enabled', async () => {
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(
+      function (this: HTMLElement) {
+        if (this.classList.contains('ucl-overlay')) {
+          return {
+            x: 0,
+            y: 48,
+            top: 48,
+            left: 0,
+            right: 120,
+            bottom: 88,
+            width: 120,
+            height: 40,
+            toJSON: () => {},
+          };
+        }
+
+        return {
+          x: 0,
+          y: 0,
+          top: 0,
+          left: 0,
+          right: 240,
+          bottom: 48,
+          width: 240,
+          height: 48,
+          toJSON: () => {},
+        };
+      }
+    );
+    const handleSizeChange = vi.fn();
+
+    const TestOverlay = () => {
+      const reference = useRef<HTMLButtonElement>(null);
+
+      return (
+        <>
+          <button
+            ref={reference}
+            type='button'
+          >
+            Anchor
+          </button>
+          <Overlay
+            reference={reference}
+            size={{ matchReferenceWidth: true }}
+            onSizeChange={handleSizeChange}
+          >
+            Content
+          </Overlay>
+        </>
+      );
+    };
+
+    const result = render(<TestOverlay />);
+    const overlay = result.container.querySelector('.ucl-overlay');
+
+    expect(overlay).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(overlay).toHaveStyle({
+        minWidth: '240px',
+      });
+      expect(handleSizeChange).toHaveBeenCalledWith({
+        referenceWidth: 240,
+        availableWidth: expect.any(Number),
+        availableHeight: expect.any(Number),
+      });
+    });
+  });
+});

package/lib/components/Overlay/index.ts

@@ -1,2 +1,2 @@
 export { default } from './Overlay';
-export type { OverlayProps } from './Overlay';
+export type { OverlayProps, OverlaySize } from './Overlay';

package/lib/components/Select/Select.stories.tsx

@@ -100,6 +100,13 @@ const meta = {
       control: { type: 'boolean' },
       table: { type: { summary: 'boolean' } },
     },
+    dropdownWidth: {
+      description:
+        'Control whether the options panel grows to content or matches the Select width',
+      control: { type: 'radio' },
+      options: ['content', 'match-select'],
+      table: { type: { summary: "'content' | 'match-select'" } },
+    },
     panelClassName: {
       description: 'Custom className for the options panel',
       control: { type: 'text' },

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
    */

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>
   );