uikit-react-public 0.29.3 → 0.29.6

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/package.json

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