uikit-react-public 0.29.5 → 0.29.6

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.5",
+  "version": "0.29.6",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",