@indico-data/design-system 3.8.0 → 3.10.0

package/lib/components/floatUI/FloatUI.d.ts

@@ -1,2 +1,2 @@
 import { FloatUIProps } from './types';
-export declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, portalOptions, floatingOptions, className, }: FloatUIProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, portalOptions, floatingOptions, className, hover, }: FloatUIProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/floatUI/FloatUI.stories.d.ts

@@ -6,3 +6,4 @@ export default meta;
 type Story = StoryObj<FloatUIProps>;
 export declare const Uncontrolled: Story;
 export declare const Controlled: Story;
+export declare const Hover: Story;

package/lib/components/floatUI/types.d.ts

@@ -18,4 +18,6 @@ export type FloatUIProps = {
     };
     /** Function to toggle the visibility of the FloatUI (for controlled mode). */
     setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+    /** If true, opens on hover instead of click. Defaults to false. */
+    hover?: boolean;
 };

package/lib/components/icons/Icon.d.ts

@@ -1,2 +1,2 @@
 import { IconProps } from './types';
-export declare const Icon: ({ name, size, className, ariaLabel, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Icon: ({ name, size, className, ariaLabel, faPrefix, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element | null;

package/lib/components/icons/types.d.ts

@@ -1,6 +1,6 @@
 import { MouseEventHandler, CSSProperties } from 'react';
 import { PermafrostComponent } from '../../types';
-import { IconName as FAIconName } from '@fortawesome/fontawesome-svg-core';
+import { IconName as FAIconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
 import { indicons } from './indicons';
 export type IconSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
 export type IndiconName = keyof typeof indicons;
@@ -16,4 +16,8 @@ export type IconProps = PermafrostComponent & {
     style?: CSSProperties;
     /** Click event handler */
     onClick?: MouseEventHandler<SVGElement>;
+    /** The Font Awesome prefix of the icon (defaults to 'fas', the solid icon prefix)
+     * Only used for Font Awesome icons, not for Indicons.
+     */
+    faPrefix?: IconPrefix;
 };

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import { IconDefinition, IconName as IconName$1 } from '@fortawesome/fontawesome-svg-core';
+import { IconDefinition, IconPrefix, IconName as IconName$1 } from '@fortawesome/fontawesome-svg-core';
 import { UseFloatingOptions } from '@floating-ui/react-dom';
 export * from '@floating-ui/react-dom';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -191,6 +191,10 @@ type IconProps = PermafrostComponent & {
     style?: CSSProperties;
     /** Click event handler */
     onClick?: MouseEventHandler<SVGElement>;
+    /** The Font Awesome prefix of the icon (defaults to 'fas', the solid icon prefix)
+     * Only used for Font Awesome icons, not for Indicons.
+     */
+    faPrefix?: IconPrefix;
 };
 
 type SelectOption = {
@@ -327,7 +331,7 @@ interface ButtonProps {
 
 declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
-declare const Icon: ({ name, size, className, ariaLabel, ...props }: IconProps) => react_jsx_runtime.JSX.Element | null;
+declare const Icon: ({ name, size, className, ariaLabel, faPrefix, ...props }: IconProps) => react_jsx_runtime.JSX.Element | null;
 
 declare const Table: <T>(props: TableProps<T>) => react_jsx_runtime.JSX.Element;
 
@@ -772,9 +776,11 @@ type FloatUIProps = {
     };
     /** Function to toggle the visibility of the FloatUI (for controlled mode). */
     setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+    /** If true, opens on hover instead of click. Defaults to false. */
+    hover?: boolean;
 };
 
-declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, portalOptions, floatingOptions, className, }: FloatUIProps): react_jsx_runtime.JSX.Element;
+declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, portalOptions, floatingOptions, className, hover, }: FloatUIProps): react_jsx_runtime.JSX.Element;
 
 type MenuProps = {
     children: React$1.ReactNode;

package/lib/index.esm.js

@@ -2283,7 +2283,7 @@ function roundByDPR(element, value) {
   return Math.round(value * dpr) / dpr;
 }
 
-function useLatestRef(value) {
+function useLatestRef$1(value) {
   const ref = React.useRef(value);
   index$1(() => {
     ref.current = value;
@@ -2344,8 +2344,8 @@ function useFloating$1(options) {
   const floatingRef = React.useRef(null);
   const dataRef = React.useRef(data);
   const hasWhileElementsMounted = whileElementsMounted != null;
-  const whileElementsMountedRef = useLatestRef(whileElementsMounted);
-  const platformRef = useLatestRef(platform);
+  const whileElementsMountedRef = useLatestRef$1(whileElementsMounted);
+  const platformRef = useLatestRef$1(platform);
   const update = React.useCallback(() => {
     if (!referenceRef.current || !floatingRef.current) {
       return;
@@ -5016,7 +5016,7 @@ var classnamesExports = classnames.exports;
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
 const Icon = (_a) => {
-    var { name, size = 'md', className, ariaLabel } = _a, props = __rest(_a, ["name", "size", "className", "ariaLabel"]);
+    var { name, size = 'md', className, ariaLabel, faPrefix = 'fas' } = _a, props = __rest(_a, ["name", "size", "className", "ariaLabel", "faPrefix"]);
     const label = ariaLabel || `${name} Icon`;
     const iconClasses = classNames('icon', {
         [`icon--${size}`]: size,
@@ -5026,7 +5026,7 @@ const Icon = (_a) => {
     // Otherwise, search for an indicon (registered under Font Awesome with a prefix of 'fak')
     const icon = faIconName
         ? findIconDefinition({
-            prefix: 'fas',
+            prefix: faPrefix,
             iconName: faIconName,
         })
         : findIconDefinition({
@@ -11933,6 +11933,9 @@ function isMouseLikePointerType(pointerType, strict) {
   // On some Linux machines with Chromium, mouse inputs return a `pointerType`
   // of "pen": https://github.com/floating-ui/floating-ui/issues/2015
   const values = ['mouse', 'pen'];
+  if (!strict) {
+    values.push('', undefined);
+  }
   return values.includes(pointerType);
 }
 function isReactEvent(event) {
@@ -12628,6 +12631,320 @@ function createAttribute(name) {
   return "data-floating-ui-" + name;
 }
 
+function useLatestRef(value) {
+  const ref = useRef(value);
+  index(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+
+const safePolygonIdentifier = /*#__PURE__*/createAttribute('safe-polygon');
+function getDelay(value, prop, pointerType) {
+  if (pointerType && !isMouseLikePointerType(pointerType)) {
+    return 0;
+  }
+  if (typeof value === 'number') {
+    return value;
+  }
+  return value == null ? void 0 : value[prop];
+}
+/**
+ * Opens the floating element while hovering over the reference element, like
+ * CSS `:hover`.
+ * @see https://floating-ui.com/docs/useHover
+ */
+function useHover(context, props) {
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    open,
+    onOpenChange,
+    dataRef,
+    events,
+    elements
+  } = context;
+  const {
+    enabled = true,
+    delay = 0,
+    handleClose = null,
+    mouseOnly = false,
+    restMs = 0,
+    move = true
+  } = props;
+  const tree = useFloatingTree();
+  const parentId = useFloatingParentNodeId();
+  const handleCloseRef = useLatestRef(handleClose);
+  const delayRef = useLatestRef(delay);
+  const openRef = useLatestRef(open);
+  const pointerTypeRef = React.useRef();
+  const timeoutRef = React.useRef(-1);
+  const handlerRef = React.useRef();
+  const restTimeoutRef = React.useRef(-1);
+  const blockMouseMoveRef = React.useRef(true);
+  const performedPointerEventsMutationRef = React.useRef(false);
+  const unbindMouseMoveRef = React.useRef(() => {});
+  const isHoverOpen = React.useCallback(() => {
+    var _dataRef$current$open;
+    const type = (_dataRef$current$open = dataRef.current.openEvent) == null ? void 0 : _dataRef$current$open.type;
+    return (type == null ? void 0 : type.includes('mouse')) && type !== 'mousedown';
+  }, [dataRef]);
+
+  // When closing before opening, clear the delay timeouts to cancel it
+  // from showing.
+  React.useEffect(() => {
+    if (!enabled) return;
+    function onOpenChange(_ref) {
+      let {
+        open
+      } = _ref;
+      if (!open) {
+        clearTimeout(timeoutRef.current);
+        clearTimeout(restTimeoutRef.current);
+        blockMouseMoveRef.current = true;
+      }
+    }
+    events.on('openchange', onOpenChange);
+    return () => {
+      events.off('openchange', onOpenChange);
+    };
+  }, [enabled, events]);
+  React.useEffect(() => {
+    if (!enabled) return;
+    if (!handleCloseRef.current) return;
+    if (!open) return;
+    function onLeave(event) {
+      if (isHoverOpen()) {
+        onOpenChange(false, event, 'hover');
+      }
+    }
+    const html = getDocument(elements.floating).documentElement;
+    html.addEventListener('mouseleave', onLeave);
+    return () => {
+      html.removeEventListener('mouseleave', onLeave);
+    };
+  }, [elements.floating, open, onOpenChange, enabled, handleCloseRef, isHoverOpen]);
+  const closeWithDelay = React.useCallback(function (event, runElseBranch, reason) {
+    if (runElseBranch === void 0) {
+      runElseBranch = true;
+    }
+    if (reason === void 0) {
+      reason = 'hover';
+    }
+    const closeDelay = getDelay(delayRef.current, 'close', pointerTypeRef.current);
+    if (closeDelay && !handlerRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = window.setTimeout(() => onOpenChange(false, event, reason), closeDelay);
+    } else if (runElseBranch) {
+      clearTimeout(timeoutRef.current);
+      onOpenChange(false, event, reason);
+    }
+  }, [delayRef, onOpenChange]);
+  const cleanupMouseMoveHandler = useEffectEvent(() => {
+    unbindMouseMoveRef.current();
+    handlerRef.current = undefined;
+  });
+  const clearPointerEvents = useEffectEvent(() => {
+    if (performedPointerEventsMutationRef.current) {
+      const body = getDocument(elements.floating).body;
+      body.style.pointerEvents = '';
+      body.removeAttribute(safePolygonIdentifier);
+      performedPointerEventsMutationRef.current = false;
+    }
+  });
+
+  // Registering the mouse events on the reference directly to bypass React's
+  // delegation system. If the cursor was on a disabled element and then entered
+  // the reference (no gap), `mouseenter` doesn't fire in the delegation system.
+  React.useEffect(() => {
+    if (!enabled) return;
+    function isClickLikeOpenEvent() {
+      return dataRef.current.openEvent ? ['click', 'mousedown'].includes(dataRef.current.openEvent.type) : false;
+    }
+    function onMouseEnter(event) {
+      clearTimeout(timeoutRef.current);
+      blockMouseMoveRef.current = false;
+      if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current) || restMs > 0 && !getDelay(delayRef.current, 'open')) {
+        return;
+      }
+      const openDelay = getDelay(delayRef.current, 'open', pointerTypeRef.current);
+      if (openDelay) {
+        timeoutRef.current = window.setTimeout(() => {
+          if (!openRef.current) {
+            onOpenChange(true, event, 'hover');
+          }
+        }, openDelay);
+      } else {
+        onOpenChange(true, event, 'hover');
+      }
+    }
+    function onMouseLeave(event) {
+      if (isClickLikeOpenEvent()) return;
+      unbindMouseMoveRef.current();
+      const doc = getDocument(elements.floating);
+      clearTimeout(restTimeoutRef.current);
+      if (handleCloseRef.current && dataRef.current.floatingContext) {
+        // Prevent clearing `onScrollMouseLeave` timeout.
+        if (!open) {
+          clearTimeout(timeoutRef.current);
+        }
+        handlerRef.current = handleCloseRef.current({
+          ...dataRef.current.floatingContext,
+          tree,
+          x: event.clientX,
+          y: event.clientY,
+          onClose() {
+            clearPointerEvents();
+            cleanupMouseMoveHandler();
+            closeWithDelay(event, true, 'safe-polygon');
+          }
+        });
+        const handler = handlerRef.current;
+        doc.addEventListener('mousemove', handler);
+        unbindMouseMoveRef.current = () => {
+          doc.removeEventListener('mousemove', handler);
+        };
+        return;
+      }
+
+      // Allow interactivity without `safePolygon` on touch devices. With a
+      // pointer, a short close delay is an alternative, so it should work
+      // consistently.
+      const shouldClose = pointerTypeRef.current === 'touch' ? !contains(elements.floating, event.relatedTarget) : true;
+      if (shouldClose) {
+        closeWithDelay(event);
+      }
+    }
+
+    // Ensure the floating element closes after scrolling even if the pointer
+    // did not move.
+    // https://github.com/floating-ui/floating-ui/discussions/1692
+    function onScrollMouseLeave(event) {
+      if (isClickLikeOpenEvent()) return;
+      if (!dataRef.current.floatingContext) return;
+      handleCloseRef.current == null || handleCloseRef.current({
+        ...dataRef.current.floatingContext,
+        tree,
+        x: event.clientX,
+        y: event.clientY,
+        onClose() {
+          clearPointerEvents();
+          cleanupMouseMoveHandler();
+          closeWithDelay(event);
+        }
+      })(event);
+    }
+    if (isElement$1(elements.domReference)) {
+      var _elements$floating;
+      const ref = elements.domReference;
+      open && ref.addEventListener('mouseleave', onScrollMouseLeave);
+      (_elements$floating = elements.floating) == null || _elements$floating.addEventListener('mouseleave', onScrollMouseLeave);
+      move && ref.addEventListener('mousemove', onMouseEnter, {
+        once: true
+      });
+      ref.addEventListener('mouseenter', onMouseEnter);
+      ref.addEventListener('mouseleave', onMouseLeave);
+      return () => {
+        var _elements$floating2;
+        open && ref.removeEventListener('mouseleave', onScrollMouseLeave);
+        (_elements$floating2 = elements.floating) == null || _elements$floating2.removeEventListener('mouseleave', onScrollMouseLeave);
+        move && ref.removeEventListener('mousemove', onMouseEnter);
+        ref.removeEventListener('mouseenter', onMouseEnter);
+        ref.removeEventListener('mouseleave', onMouseLeave);
+      };
+    }
+  }, [elements, enabled, context, mouseOnly, restMs, move, closeWithDelay, cleanupMouseMoveHandler, clearPointerEvents, onOpenChange, open, openRef, tree, delayRef, handleCloseRef, dataRef]);
+
+  // Block pointer-events of every element other than the reference and floating
+  // while the floating element is open and has a `handleClose` handler. Also
+  // handles nested floating elements.
+  // https://github.com/floating-ui/floating-ui/issues/1722
+  index(() => {
+    var _handleCloseRef$curre;
+    if (!enabled) return;
+    if (open && (_handleCloseRef$curre = handleCloseRef.current) != null && _handleCloseRef$curre.__options.blockPointerEvents && isHoverOpen()) {
+      const body = getDocument(elements.floating).body;
+      body.setAttribute(safePolygonIdentifier, '');
+      body.style.pointerEvents = 'none';
+      performedPointerEventsMutationRef.current = true;
+      const floatingEl = elements.floating;
+      if (isElement$1(elements.domReference) && floatingEl) {
+        var _tree$nodesRef$curren;
+        const ref = elements.domReference;
+        const parentFloating = tree == null || (_tree$nodesRef$curren = tree.nodesRef.current.find(node => node.id === parentId)) == null || (_tree$nodesRef$curren = _tree$nodesRef$curren.context) == null ? void 0 : _tree$nodesRef$curren.elements.floating;
+        if (parentFloating) {
+          parentFloating.style.pointerEvents = '';
+        }
+        ref.style.pointerEvents = 'auto';
+        floatingEl.style.pointerEvents = 'auto';
+        return () => {
+          ref.style.pointerEvents = '';
+          floatingEl.style.pointerEvents = '';
+        };
+      }
+    }
+  }, [enabled, open, parentId, elements, tree, handleCloseRef, isHoverOpen]);
+  index(() => {
+    if (!open) {
+      pointerTypeRef.current = undefined;
+      cleanupMouseMoveHandler();
+      clearPointerEvents();
+    }
+  }, [open, cleanupMouseMoveHandler, clearPointerEvents]);
+  React.useEffect(() => {
+    return () => {
+      cleanupMouseMoveHandler();
+      clearTimeout(timeoutRef.current);
+      clearTimeout(restTimeoutRef.current);
+      clearPointerEvents();
+    };
+  }, [enabled, elements.domReference, cleanupMouseMoveHandler, clearPointerEvents]);
+  const reference = React.useMemo(() => {
+    function setPointerRef(event) {
+      pointerTypeRef.current = event.pointerType;
+    }
+    return {
+      onPointerDown: setPointerRef,
+      onPointerEnter: setPointerRef,
+      onMouseMove(event) {
+        const {
+          nativeEvent
+        } = event;
+        function handleMouseMove() {
+          if (!blockMouseMoveRef.current && !openRef.current) {
+            onOpenChange(true, nativeEvent, 'hover');
+          }
+        }
+        if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current)) {
+          return;
+        }
+        if (open || restMs === 0) {
+          return;
+        }
+        clearTimeout(restTimeoutRef.current);
+        if (pointerTypeRef.current === 'touch') {
+          handleMouseMove();
+        } else {
+          restTimeoutRef.current = window.setTimeout(handleMouseMove, restMs);
+        }
+      }
+    };
+  }, [mouseOnly, onOpenChange, open, openRef, restMs]);
+  const floating = React.useMemo(() => ({
+    onMouseEnter() {
+      clearTimeout(timeoutRef.current);
+    },
+    onMouseLeave(event) {
+      closeWithDelay(event.nativeEvent, false);
+    }
+  }), [closeWithDelay]);
+  return React.useMemo(() => enabled ? {
+    reference,
+    floating
+  } : {}, [enabled, reference, floating]);
+}
+
 function getChildren(nodes, id) {
   let allChildren = nodes.filter(node => {
     var _node$context;
@@ -12953,7 +13270,7 @@ function useClick(context, props) {
       // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
       if (event.button !== 0) return;
       if (eventOption === 'click') return;
-      if (isMouseLikePointerType(pointerType) && ignoreMouse) return;
+      if (isMouseLikePointerType(pointerType, true) && ignoreMouse) return;
       if (open && toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'mousedown' : true)) {
         onOpenChange(false, event.nativeEvent, 'click');
       } else {
@@ -12968,7 +13285,7 @@ function useClick(context, props) {
         pointerTypeRef.current = undefined;
         return;
       }
-      if (isMouseLikePointerType(pointerType) && ignoreMouse) return;
+      if (isMouseLikePointerType(pointerType, true) && ignoreMouse) return;
       if (open && toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'click' : true)) {
         onOpenChange(false, event.nativeEvent, 'click');
       } else {
@@ -13509,7 +13826,7 @@ const defaultOptions$1 = {
     placement: 'bottom-start',
     middleware: [offset$2(5), flip$2(), shift$2()],
 };
-function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal = false, portalOptions = {}, floatingOptions = defaultOptions$1, className, }) {
+function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal = false, portalOptions = {}, floatingOptions = defaultOptions$1, className, hover = false, }) {
     const [internalIsOpen, setInternalIsOpen] = useState(false);
     // Determine whether the component is controlled or uncontrolled
     const isControlled = controlledIsOpen !== undefined && controlledSetIsOpen !== undefined;
@@ -13528,9 +13845,11 @@ function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: con
     const { refs, floatingStyles, context } = useFloating(Object.assign(Object.assign({}, floatingOptions), { open: isOpen, onOpenChange: setIsOpen, elements: {
             reference: referenceElementRef.current,
         } }));
-    const click = useClick(context);
+    // Can't call hooks conditionally so this enabled option is needed.
+    const click = useClick(context, { enabled: !hover });
+    const hoverHook = useHover(context, { enabled: hover });
     const dismiss = useDismiss(context);
-    const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
+    const { getReferenceProps, getFloatingProps } = useInteractions([click, hoverHook, dismiss]);
     const tooltipContent = (jsx("div", Object.assign({ ref: refs.setFloating }, getFloatingProps(), { style: floatingStyles, role: "dialog", "aria-label": ariaLabel, className: `floatui-container ${className}`, children: jsx("div", { ref: floatUIContentRef, className: "floatui-content", children: content }) })));
     return (jsxs(Fragment, { children: [jsx("div", Object.assign({ ref: refs.setReference }, getReferenceProps(), { children: trigger })), isOpen &&
                 (isPortal ? (jsx(FloatingPortal, { id: portalOptions === null || portalOptions === void 0 ? void 0 : portalOptions.rootId, children: tooltipContent })) : (tooltipContent))] }));