uikit-react-public 0.38.0 → 0.38.1

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

@@ -149,6 +149,30 @@ describe('Datepicker', () => {
 
     // Calendar should now be visible
     expect(screen.getByTestId('ucl-uikit-calendar')).toBeInTheDocument();
+    const panel = screen.getByTestId('ucl-uikit-datepicker__panel');
+    expect(panel.parentElement).toHaveClass('ucl-overlay');
+  });
+
+  test('Panel escapes a containing dialog via fixed positioning', () => {
+    customRender(
+      <dialog open>
+        <Datepicker />
+      </dialog>
+    );
+    const input = screen.getByTestId('ucl-uikit-datepicker__input');
+    fireEvent.focus(input);
+
+    const panel = screen.getByTestId('ucl-uikit-datepicker__panel');
+    expect(panel.parentElement).toHaveStyle({ position: 'fixed' });
+  });
+
+  test('Panel uses absolute positioning outside of a dialog', () => {
+    customRender(<Datepicker />);
+    const input = screen.getByTestId('ucl-uikit-datepicker__input');
+    fireEvent.focus(input);
+
+    const panel = screen.getByTestId('ucl-uikit-datepicker__panel');
+    expect(panel.parentElement).toHaveStyle({ position: 'absolute' });
   });
 
   test('value after minDate is set to null automatically', () => {

package/lib/components/Datepicker/subcomponents/CustomDatepicker.tsx

@@ -2,8 +2,10 @@ import { useRef, useEffect, useState, useCallback } from 'react';
 import { css, cx } from '@emotion/css';
 import { VisibleField, Panel } from '.';
 import { Calendar } from '../..';
+import Overlay from '../../Overlay';
 import { parseInputValue } from '../utils';
 import announce from '../../../utils/announce';
+import { useTheme } from '../../../theme';
 import type { DatepickerValue } from '../Datepicker.types';
 import type { CalendarEvent, AcademicWeek } from '../../Calendar';
 import type { InputProps } from './DatepickerInput';
@@ -57,7 +59,9 @@ const CustomDatepicker = ({
   const effectiveInputRef = inputRef || internalInputRef;
   const restoreFocusAfterClearRef = useRef(false);
 
+  const [theme] = useTheme();
   const [panelOpen, setPanelOpen] = useState(false);
+  const overlayViewportPadding = parseFloat(theme.margin.m32);
 
   // Derived props (tidier than using `date?.getDate()`, etc, everywhere.)
   const day = value?.getDate().toString().padStart(2, '0') ?? '';
@@ -233,17 +237,34 @@ const CustomDatepicker = ({
         inputProps={inputProps}
       />
       {panelOpen && (
-        <Panel>
-          <Calendar
-            pickedDate={value}
-            onDatePick={handlePickCalendarDate}
-            minDate={minDate}
-            maxDate={maxDate}
-            events={events}
-            showAcademicWeeks={showAcademicWeeks}
-            academicWeeks={academicWeeks}
-          />
-        </Panel>
+        <Overlay
+          reference={effectiveRef}
+          placement='bottom-start'
+          // Escape the dialog's bounds via `fixed` positioning when it's too
+          // small to fit the panel, rather than squeezing/clipping it to fit.
+          strategy={
+            effectiveRef.current?.closest('dialog') ? 'fixed' : 'absolute'
+          }
+          flip={{ padding: overlayViewportPadding }}
+          shift={{
+            padding: overlayViewportPadding,
+            mainAxis: false,
+            crossAxis: true,
+          }}
+          offset={8}
+        >
+          <Panel>
+            <Calendar
+              pickedDate={value}
+              onDatePick={handlePickCalendarDate}
+              minDate={minDate}
+              maxDate={maxDate}
+              events={events}
+              showAcademicWeeks={showAcademicWeeks}
+              academicWeeks={academicWeeks}
+            />
+          </Panel>
+        </Overlay>
       )}
     </div>
   );

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

@@ -1,36 +1,18 @@
-import { css, cx } from '@emotion/css';
-
 interface PanelProps {
-  zIndex?: number;
   children: React.ReactNode;
 }
 
 const NAME = 'ucl-uikit-datepicker__panel';
 
-const Panel = ({
-  zIndex = 10,
-  children,
-}: PanelProps) => {
-
-  const datepickerHeight = 48;
-  const gapFromDatepicker = 8;
-
-  const baseStyle = css`
-    position: absolute;
-    top: ${datepickerHeight + gapFromDatepicker}px;
-    z-index: ${zIndex};
-  `;
-
-  const style = cx(NAME, baseStyle);
-
+const Panel = ({ children }: PanelProps) => {
   return (
     <div
       data-testid={NAME}
-      className={style}
+      className={NAME}
     >
       {children}
     </div>
   );
-}
+};
 
 export default Panel;

package/lib/components/Overlay/Overlay.tsx

@@ -21,7 +21,7 @@ import {
   Placement,
   type FlipOptions,
   type ShiftOptions,
-  // Strategy,
+  type Strategy,
 } from '@floating-ui/react-dom';
 
 import { css, cx } from '@emotion/css';
@@ -44,6 +44,7 @@ export type OverlaySize = {
 export interface OverlayProps extends HTMLAttributes<HTMLDivElement> {
   reference: RefObject<HTMLElement | null>;
   placement?: Placement;
+  strategy?: Strategy;
   blanket?: boolean;
   flip?: boolean | FlipOptions;
   shift?: boolean | ShiftOptions;
@@ -62,6 +63,7 @@ const Overlay = forwardRef<Ref, OverlayProps>(
     {
       reference,
       placement = 'bottom',
+      strategy = 'absolute',
       blanket = false,
       flip = true,
       shift = true,
@@ -84,10 +86,21 @@ const Overlay = forwardRef<Ref, OverlayProps>(
     useImperativeHandle<Ref, Ref>(forwardedRef, () => ref.current);
 
     const fuiMiddleware = [];
-    if (flip) fuiMiddleware.push(fuiFlip(typeof flip === 'object' ? flip : {}));
+    if (offset) fuiMiddleware.push(fuiOffset(offset));
+    if (flip)
+      fuiMiddleware.push(
+        fuiFlip({
+          // When escaping a containing element (e.g. a small Dialog) via
+          // `fixed` positioning, fall back to the originally-requested side
+          // rather than floating-ui's default "best fit" placement - bestFit
+          // can pick a placement that overlaps the reference entirely when
+          // nothing fits within the (still dialog-sized) boundary.
+          ...(strategy === 'fixed' && { fallbackStrategy: 'initialPlacement' }),
+          ...(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;
@@ -116,13 +129,12 @@ const Overlay = forwardRef<Ref, OverlayProps>(
       x,
       y,
       refs,
-      strategy,
       placement: currentPlacement,
     } = useFloating({
       open: true,
       middleware: fuiMiddleware,
       placement,
-      // strategy: 'absolute',
+      strategy,
       whileElementsMounted: autoUpdate,
     });
 

package/lib/components/Toggle/Toggle.tsx

@@ -76,7 +76,7 @@ const Toggle = forwardRef<Ref, ToggleProps>(
       <button
         data-test-id={NAME}
         ref={ref}
-        role='toggle'
+        role='switch'
         aria-checked={checked}
         aria-disabled={disabled}
         className={style}

package/lib/components/WeekPicker/subcomponents/CustomDatepicker.tsx

@@ -3,7 +3,9 @@ import { css, cx } from '@emotion/css';
 import { VisibleField } from './';
 import { Panel } from '../../Datepicker/subcomponents';
 import { Calendar, Icon, IconButton } from '../..';
+import Overlay from '../../Overlay';
 import { parseInputValue } from '../../Datepicker/utils';
+import { useTheme } from '../../../theme';
 import type { DatepickerValue } from '../WeekPicker.types';
 import type { CalendarEvent, AcademicWeek } from '../../Calendar';
 
@@ -81,7 +83,9 @@ const CustomDatepicker = ({
   const internalInputRef = useRef<HTMLInputElement>(null);
   const effectiveInputRef = inputRef || internalInputRef;
 
+  const [theme] = useTheme();
   const [panelOpen, setPanelOpen] = useState(false);
+  const overlayViewportPadding = parseFloat(theme.margin.m32);
 
   // Derived props (tidier than using `date?.getDate()`, etc, everywhere.)
   const day = value?.getDate().toString().padStart(2, '0') ?? '';
@@ -279,17 +283,29 @@ const CustomDatepicker = ({
         <Icon.ChevronRight />
       </IconButton>
       {panelOpen && (
-        <Panel>
-          <Calendar
-            pickedDate={value}
-            onDatePick={handlePickCalendarDate}
-            minDate={minDate}
-            maxDate={maxDate}
-            events={events}
-            showAcademicWeeks={showAcademicWeeks}
-            academicWeeks={academicWeeks}
-          />
-        </Panel>
+        <Overlay
+          reference={effectiveRef}
+          placement='bottom-start'
+          flip={{ padding: overlayViewportPadding }}
+          shift={{
+            padding: overlayViewportPadding,
+            mainAxis: false,
+            crossAxis: true,
+          }}
+          offset={8}
+        >
+          <Panel>
+            <Calendar
+              pickedDate={value}
+              onDatePick={handlePickCalendarDate}
+              minDate={minDate}
+              maxDate={maxDate}
+              events={events}
+              showAcademicWeeks={showAcademicWeeks}
+              academicWeeks={academicWeeks}
+            />
+          </Panel>
+        </Overlay>
       )}
     </div>
   );

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.38.0",
+  "version": "0.38.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",