uikit-react-public 0.29.3 → 0.29.6

package/lib/components/Label/Label.tsx

@@ -88,7 +88,12 @@ const Label = forwardRef<Ref, LabelProps>(
         {...props}
       >
         {children}
-        {optional && <span className={optionalStyle}> (optional)</span>}
+        {optional && (
+          <>
+            {' '}
+            <span className={optionalStyle}>(optional)</span>
+          </>
+        )}
       </label>
     );
   }

package/lib/components/Label/__tests__/__snapshots__/Label.test.tsx.snap

@@ -67,10 +67,11 @@ exports[`Label > snapshot: with optional prop 1`] = `
   for=""
 >
   Name
+   
   <span
     class="css-1fd72bb"
   >
-     (optional)
+    (optional)
   </span>
 </label>
 `;

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(