uikit-react-public 0.29.5 → 0.30.0

package/lib/Welcome.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs/blocks";
 import { UclLogo } from "./components/";
 
 <Meta title="Welcome" />

package/lib/components/Accordion/Accordion.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Accordion from './Accordion';
 
 const meta = {

package/lib/components/Alert/Alert.mdx

@@ -1,5 +1,5 @@
 import * as AlertStories from './Alert.stories';
-import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/blocks';
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
 
 <Meta of={AlertStories} />
 <Title />

package/lib/components/Alert/Alert.stories.tsx

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

package/lib/components/AppHeader/AppHeader.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 AppHeader from './AppHeader';

package/lib/components/AppMenu/AppMenu.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Link as InternalLink } from 'wouter';
 import AppMenu from './AppMenu';
 import Icon from '../Icon/Icon';

package/lib/components/Avatar/Avatar.mdx

@@ -1,5 +1,5 @@
 import * as AvatarStories from "./Avatar.stories";
-import { Meta, Title, Subtitle, Canvas, Controls, ArgTypes } from "@storybook/blocks";
+import { Meta, Title, Subtitle, Canvas, Controls, ArgTypes } from "@storybook/addon-docs/blocks";
 
 export const usage = {
   image: `<Avatar

package/lib/components/Avatar/Avatar.stories.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Avatar, { type AvatarProps } from './Avatar';
 import sampleAvatarPhoto from '../../../public/sample-avatar-photo.jpg';
 

package/lib/components/Badge/Badge.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 Badge from './Badge';
 import { type BadgeVariant } from './Badge';

package/lib/components/BaseCheckbox/BaseCheckbox.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 BaseCheckbox from './BaseCheckbox';
 import Icon from '../Icon';

package/lib/components/Blanket/Blanket.stories.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Blanket from './Blanket';
 
 const meta = {

package/lib/components/Breadcrumbs/Breadcrumbs.stories.tsx

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

package/lib/components/Button/Button.mdx

@@ -7,7 +7,7 @@ import {
   Canvas,
   Controls,
   ArgTypes,
-} from '@storybook/blocks';
+} from '@storybook/addon-docs/blocks';
 
 export const usage = {
   default: `<Button>Default Button</Button>`,

package/lib/components/Button/Button.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 Button from './Button';
 import Icon from '../Icon';
 import { theme } from '../../theme';

package/lib/components/Calendar/Calendar.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Calendar from './Calendar';
-import { useArgs } from '@storybook/preview-api';
+import { useArgs } from 'storybook/preview-api';
 import type { AcademicWeek } from './Calendar.types';
 
 const meta = {

package/lib/components/Calendar/subcomponents/Day.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Day from './Day';
 
 const meta = {

package/lib/components/Checkbox/Checkbox.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 Checkbox from './Checkbox';
 

package/lib/components/Chip/Chip.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 Chip from './Chip';
 

package/lib/components/Datepicker/Datepicker.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 Datepicker from './Datepicker';
 import Field from '../Field';
 import Label from '../Label';

package/lib/components/Dialog/Dialog.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Dialog from './Dialog';
 
 const meta = {

package/lib/components/Divider/Divider.stories.tsx

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

package/lib/components/Dropdown/Dropdown.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 Dropdown from './Dropdown';
 import Button from '../Button';

package/lib/components/FeedbackDialog/FeedbackDialog.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import FeedbackDialog from './FeedbackDialog';
 
 const meta = {

package/lib/components/Field/Field.stories.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-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 Field from './Field';
 // Direct imports to avoid circular dependency warning at build time due to context

package/lib/components/FileInput/FileInput.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import FileInput from './FileInput';
 
 const meta = {

package/lib/components/Footer/Footer.stories.tsx

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

package/lib/components/Header/Header.mdx

@@ -1,5 +1,5 @@
 import * as HeaderStories from "./Header.stories";
-import { Meta, Title, Subtitle, Canvas, Controls } from "@storybook/blocks";
+import { Meta, Title, Subtitle, Canvas, Controls } from "@storybook/addon-docs/blocks";
 
 export const usage = {
   default: `<Header title='App Name' />`,

package/lib/components/Header/Header.stories.tsx

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

package/lib/components/Heading/Documentation.mdx

@@ -7,7 +7,7 @@ import {
   Controls,
   Source,
   ArgTypes,
-} from '@storybook/blocks';
+} from '@storybook/addon-docs/blocks';
 
 export const usage = {
   default: `<Heading>Default Heading</Heading>`,

package/lib/components/Heading/Heading.stories.tsx

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

package/lib/components/Icon/Icon.stories.tsx

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

package/lib/components/IconButton/IconButton.stories.tsx

@@ -1,5 +1,5 @@
 import { ComponentType } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import IconButton from './IconButton';
 import Icon from '../Icon/Icon';
 

package/lib/components/Input/Documentation.mdx

@@ -7,7 +7,7 @@ import {
   Controls,
   Source,
   ArgTypes,
-} from '@storybook/blocks';
+} from '@storybook/addon-docs/blocks';
 
 export const usage = {
   default: `<Input />`,

package/lib/components/Input/Input.stories.tsx

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

package/lib/components/Label/Label.stories.tsx

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

package/lib/components/Layout/Layout.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 { useTheme } from '../../theme';
 import Layout from './Layout';

package/lib/components/Link/Link.stories.tsx

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

package/lib/components/Main/Main.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Main from './Main';
 
 const meta = {

package/lib/components/Modal/Modal.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Modal from './Modal';
 import Button from '../Button/Button';
 import Text from '../Paragraph/Paragraph';

package/lib/components/NativeDatepicker/NativeDatepicker.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 NativeDatepicker from './NativeDatepicker';
 
 const meta = {

package/lib/components/Overlay/Overlay.stories.tsx

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

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,8 @@ 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 +172,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 +212,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/Pagination/Pagination.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Pagination from './Pagination';
 
 const meta = {

package/lib/components/Paragraph/Paragraph.stories.tsx

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

package/lib/components/Radio/Radio.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 Radio from './Radio';
 

package/lib/components/Search/Search.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Search from './Search';
 
 const meta = {

package/lib/components/Select/Select.mdx

@@ -1,5 +1,5 @@
 import * as SelectStories from "./Select.stories";
-import { Meta, Title, Subtitle, Canvas, Controls, ArgTypes } from "@storybook/blocks";
+import { Meta, Title, Subtitle, Canvas, Controls, ArgTypes } from "@storybook/addon-docs/blocks";
 
 export const usage = {
   default: `<Select

package/lib/components/Select/Select.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 Select from './Select';
 import { css } from '@emotion/css';
 
@@ -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' },