uikit-react-public 0.49.5 → 0.50.0

package/lib/components/Select/subcomponents/CustomSelect.tsx

@@ -5,6 +5,7 @@ import {
   useLayoutEffect,
   useMemo,
   useId,
+  useCallback,
 } from 'react';
 import { css, cx } from '@emotion/css';
 import { VisibleField, Panel, CustomOption, FilterInput } from '.';
@@ -93,23 +94,25 @@ const CustomSelect = <T extends string | number>({
 
   const internalRef = useRef<HTMLDivElement>(null);
   const effectiveRef = internalRef;
-  const openedViaFocusRef = useRef(false);
-  const skipOpenOnFocusRef = useRef(false);
-
-  const setRefs = (node: HTMLDivElement | null) => {
-    internalRef.current = node;
-    if (typeof ref === 'function') {
-      ref(node);
-    } else if (
-      ref &&
-      'current' in
-        (ref as React.RefObject<HTMLDivElement | HTMLSelectElement | null>)
-    ) {
-      (
-        ref as React.RefObject<HTMLDivElement | HTMLSelectElement | null>
-      ).current = node;
-    }
-  };
+
+  // Keep the anchor attached while the newly opened Overlay reads its ref.
+  const setRefs = useCallback(
+    (node: HTMLDivElement | null) => {
+      internalRef.current = node;
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (
+        ref &&
+        'current' in
+          (ref as React.RefObject<HTMLDivElement | HTMLSelectElement | null>)
+      ) {
+        (
+          ref as React.RefObject<HTMLDivElement | HTMLSelectElement | null>
+        ).current = node;
+      }
+    },
+    [ref]
+  );
 
   const [theme] = useTheme();
   const [isOpen, setIsOpen] = useState(false);
@@ -371,10 +374,6 @@ const CustomSelect = <T extends string | number>({
 
   const handleClick = (event: React.MouseEvent) => {
     if (disabled) return;
-    if (openedViaFocusRef.current) {
-      openedViaFocusRef.current = false;
-      return;
-    }
     if (!isOpen) {
       openPanel();
       if (filterable && filterInputRef.current) {
@@ -485,6 +484,20 @@ const CustomSelect = <T extends string | number>({
 
     if (disabled) return;
 
+    const isAltGraph = event.getModifierState('AltGraph');
+    const isPrintableCharacter =
+      event.key.length === 1 &&
+      event.key !== ' ' &&
+      !event.metaKey &&
+      ((!event.altKey && !event.ctrlKey) || isAltGraph);
+
+    if (filterable && !isOpen && isPrintableCharacter) {
+      event.preventDefault();
+      setFilterText(event.key);
+      openPanel();
+      return;
+    }
+
     if (event.key === 'Enter') {
       if (!isOpen) {
         openPanel();
@@ -507,7 +520,6 @@ const CustomSelect = <T extends string | number>({
         closePanel();
         // Return focus to the combobox so the screen reader stays on the control
         // instead of falling back to the document/page title.
-        skipOpenOnFocusRef.current = true;
         effectiveRef.current?.focus();
         return;
       }
@@ -521,7 +533,6 @@ const CustomSelect = <T extends string | number>({
     }
     if (isOpen && event.key === 'Escape') {
       closePanel();
-      skipOpenOnFocusRef.current = true;
       event.currentTarget.focus();
       return;
     }
@@ -572,19 +583,6 @@ const CustomSelect = <T extends string | number>({
     }
   };
 
-  const handleFocus = (event: React.FocusEvent<HTMLDivElement>) => {
-    if (disabled) return;
-    if (skipOpenOnFocusRef.current) {
-      skipOpenOnFocusRef.current = false;
-      return;
-    }
-    const isKeyboardFocus = event.currentTarget.matches(':focus-visible');
-    if (filterable && isKeyboardFocus) {
-      openedViaFocusRef.current = true;
-      openPanel();
-      if (filterInputRef.current) filterInputRef.current.focus();
-    }
-  };
   const { md } = theme.typography.body;
 
   const baseStyle = css`
@@ -668,7 +666,6 @@ const CustomSelect = <T extends string | number>({
     <div
       onClick={handleClick}
       onKeyDown={handleKeyDown}
-      onFocus={handleFocus}
       onBlur={handleBlur}
       tabIndex={disabled || (filterable && isOpen) ? -1 : 0}
       className={style}
@@ -710,7 +707,7 @@ const CustomSelect = <T extends string | number>({
           />
         )}
       </VisibleField>
-      {filterable && selectedOption && (
+      {filterable && isOpen && selectedOption && (
         <span
           id={selectionStatusId}
           className={visuallyHiddenStyle}
@@ -729,12 +726,15 @@ const CustomSelect = <T extends string | number>({
         <Overlay
           reference={effectiveRef}
           placement='bottom-start'
+          strategy='fixed'
           flip={{ padding: overlayViewportPadding }}
-          shift={{
+          shift={({ rects }) => ({
             padding: overlayViewportPadding,
-            mainAxis: false,
-            crossAxis: true,
-          }}
+            mainAxis:
+              dropdownWidth === 'content' &&
+              rects.floating.width > rects.reference.width,
+            crossAxis: false,
+          })}
           size={{
             matchReferenceWidth: true,
             padding: overlayViewportPadding,
@@ -747,7 +747,6 @@ const CustomSelect = <T extends string | number>({
             referenceWidth={
               overlaySize?.referenceWidth ?? panelReferenceWidth ?? undefined
             }
-            availableHeight={overlaySize?.availableHeight}
             maxWidth={panelMaxWidth ?? undefined}
             id={listboxId}
             role='listbox'

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

@@ -7,7 +7,6 @@ const NAME = 'ucl-uikit-select__panel';
 type PanelProps = React.ComponentPropsWithoutRef<'div'> & {
   dropdownWidth?: SelectDropdownWidth;
   referenceWidth?: number;
-  availableHeight?: number;
   maxWidth?: number;
 };
 
@@ -15,7 +14,6 @@ const Panel = ({
   className,
   dropdownWidth = 'content',
   referenceWidth,
-  availableHeight,
   maxWidth,
   ...props
 }: PanelProps) => {
@@ -32,19 +30,15 @@ const Panel = ({
     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`
     min-width: ${referenceWidthValue};
     width: fit-content;
     max-width: ${maxWidthValue};
-    max-height: ${maxHeightValue};
+    max-height: min(400px, var(--ucl-overlay-available-height, 400px));
     overflow-y: auto;
     overflow-x: hidden;
-    box-sizing: content-box;
+    box-sizing: border-box;
     padding: ${theme.padding.p8} 0;
     border: ${theme.border.b1} solid ${theme.colour.border.subtle};
     background-color: ${theme.colour.fill.inverse};

package/lib/components/index.ts

@@ -37,6 +37,14 @@ export type { BlanketProps } from './Blanket';
 export { default as Overlay } from './Overlay';
 export type { OverlayProps } from './Overlay';
 
+export { default as Filters, Filter, QuickFilter } from './Filters';
+export type {
+  FiltersProps,
+  FiltersSubComponents,
+  FilterProps,
+  QuickFilterProps,
+} from './Filters';
+
 export { default as Snackbar } from './Snackbar';
 export { Snackbars } from './Snackbar';
 export type {

package/package.json

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