@itwin/itwinui-react 3.13.3 → 3.14.0

package/DEV-esm/core/Popover/Popover.js

@@ -1,186 +1,320 @@
 import * as React from 'react';
 import cx from 'classnames';
-import { useFloating, useClick, useDismiss, useInteractions, size, autoUpdate, offset, flip, shift, autoPlacement, inline, hide, FloatingFocusManager, useHover, useFocus, safePolygon, useRole, FloatingPortal, useFloatingTree } from '@floating-ui/react';
-import { Box, ShadowRoot, cloneElementWithRef, mergeEventHandlers, useControlledState, useId, useLayoutEffect, useMergedRefs } from '../../utils/index.js';
+import {
+  useFloating,
+  useClick,
+  useDismiss,
+  useInteractions,
+  size,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  autoPlacement,
+  inline,
+  hide,
+  FloatingFocusManager,
+  useHover,
+  useFocus,
+  safePolygon,
+  useRole,
+  FloatingPortal,
+  useFloatingTree,
+} from '@floating-ui/react';
+import {
+  Box,
+  ShadowRoot,
+  cloneElementWithRef,
+  mergeEventHandlers,
+  useControlledState,
+  useId,
+  useLayoutEffect,
+  useMergedRefs,
+} from '../../utils/index.js';
 import { usePortalTo } from '../../utils/components/Portal.js';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider.js';
 export const PopoverOpenContext = React.createContext(void 0);
-export const usePopover = (options)=>{
-    let { placement = 'bottom-start', visible, onVisibleChange, closeOnOutsideClick, autoUpdateOptions, matchWidth, interactions: interactionsProp, role, ...rest } = options;
-    let mergedInteractions = React.useMemo(()=>({
-            click: true,
-            dismiss: true,
-            hover: false,
-            focus: false,
-            ...interactionsProp
-        }), [
-        interactionsProp
-    ]);
-    let tree = useFloatingTree();
-    let middleware = React.useMemo(()=>({
-            flip: true,
-            shift: true,
-            ...options.middleware
-        }), [
-        options.middleware
-    ]);
-    let [open, onOpenChange] = useControlledState(false, visible, onVisibleChange);
-    let floating = useFloating({
-        placement,
-        open,
-        onOpenChange,
-        whileElementsMounted: React.useMemo(()=>open ? (...args)=>autoUpdate(...args, autoUpdateOptions) : void 0, [
-            autoUpdateOptions,
-            open
-        ]),
-        ...rest,
-        middleware: React.useMemo(()=>[
-                void 0 !== middleware.offset && offset(middleware.offset),
-                middleware.flip && flip(),
-                middleware.shift && shift(),
-                matchWidth && size({
-                    apply: ({ rects })=>{
-                        setReferenceWidth(rects.reference.width);
-                    }
-                }),
-                middleware.autoPlacement && autoPlacement(),
-                middleware.inline && inline(),
-                middleware.hide && hide()
-            ].filter(Boolean), [
-            matchWidth,
-            middleware
-        ])
-    });
-    let interactions = useInteractions([
-        useClick(floating.context, {
-            enabled: !!mergedInteractions.click,
-            ...mergedInteractions.click
-        }),
-        useDismiss(floating.context, {
-            enabled: !!mergedInteractions.dismiss,
-            outsidePress: closeOnOutsideClick,
-            bubbles: null != tree,
-            ...mergedInteractions.dismiss
-        }),
-        useHover(floating.context, {
-            enabled: !!mergedInteractions.hover,
-            delay: 100,
-            handleClose: safePolygon({
-                buffer: 1,
-                blockPointerEvents: true
+export const usePopover = (options) => {
+  let {
+    placement = 'bottom-start',
+    visible,
+    onVisibleChange,
+    closeOnOutsideClick,
+    autoUpdateOptions,
+    matchWidth,
+    interactions: interactionsProp,
+    role,
+    ...rest
+  } = options;
+  let mergedInteractions = React.useMemo(
+    () => ({
+      click: true,
+      dismiss: true,
+      hover: false,
+      focus: false,
+      ...interactionsProp,
+    }),
+    [interactionsProp],
+  );
+  let tree = useFloatingTree();
+  let middleware = React.useMemo(
+    () => ({
+      flip: true,
+      shift: true,
+      size: true,
+      ...options.middleware,
+    }),
+    [options.middleware],
+  );
+  let maxHeight =
+    'boolean' == typeof middleware.size ? '400px' : middleware.size?.maxHeight;
+  let [open, onOpenChange] = useControlledState(
+    false,
+    visible,
+    onVisibleChange,
+  );
+  let floating = useFloating({
+    placement,
+    open,
+    onOpenChange,
+    strategy: 'fixed',
+    whileElementsMounted: React.useMemo(
+      () =>
+        open ? (...args) => autoUpdate(...args, autoUpdateOptions) : void 0,
+      [autoUpdateOptions, open],
+    ),
+    ...rest,
+    middleware: React.useMemo(
+      () =>
+        [
+          void 0 !== middleware.offset && offset(middleware.offset),
+          middleware.flip &&
+            flip({
+              padding: 4,
             }),
-            move: false,
-            ...mergedInteractions.hover
-        }),
-        useFocus(floating.context, {
-            enabled: !!mergedInteractions.focus,
-            ...mergedInteractions.focus
+          middleware.shift &&
+            shift({
+              padding: 4,
+            }),
+          (matchWidth || middleware.size) &&
+            size({
+              padding: 4,
+              apply: ({ rects, availableHeight }) => {
+                if (middleware.size)
+                  setAvailableHeight(Math.round(availableHeight));
+                if (matchWidth) setReferenceWidth(rects.reference.width);
+              },
+            }),
+          middleware.autoPlacement &&
+            autoPlacement({
+              padding: 4,
+            }),
+          middleware.inline && inline(),
+          middleware.hide &&
+            hide({
+              padding: 4,
+            }),
+        ].filter(Boolean),
+      [matchWidth, middleware],
+    ),
+  });
+  let interactions = useInteractions([
+    useClick(floating.context, {
+      enabled: !!mergedInteractions.click,
+      ...mergedInteractions.click,
+    }),
+    useDismiss(floating.context, {
+      enabled: !!mergedInteractions.dismiss,
+      outsidePress: closeOnOutsideClick,
+      bubbles: null != tree,
+      ...mergedInteractions.dismiss,
+    }),
+    useHover(floating.context, {
+      enabled: !!mergedInteractions.hover,
+      delay: 100,
+      handleClose: safePolygon({
+        buffer: 1,
+        blockPointerEvents: true,
+      }),
+      move: false,
+      ...mergedInteractions.hover,
+    }),
+    useFocus(floating.context, {
+      enabled: !!mergedInteractions.focus,
+      ...mergedInteractions.focus,
+    }),
+    useRole(floating.context, {
+      role: 'dialog',
+      enabled: !!role,
+    }),
+  ]);
+  let [referenceWidth, setReferenceWidth] = React.useState();
+  let [availableHeight, setAvailableHeight] = React.useState();
+  let getFloatingProps = React.useCallback(
+    (userProps) =>
+      interactions.getFloatingProps({
+        ...userProps,
+        style: {
+          ...floating.floatingStyles,
+          ...(middleware.size &&
+            availableHeight && {
+              maxBlockSize: `min(${availableHeight}px, ${maxHeight})`,
+            }),
+          zIndex: 9999,
+          ...(matchWidth && referenceWidth
+            ? {
+                minInlineSize: `${referenceWidth}px`,
+                maxInlineSize: `min(${2 * referenceWidth}px, 90vw)`,
+              }
+            : {}),
+          ...userProps?.style,
+        },
+      }),
+    [
+      floating.floatingStyles,
+      interactions,
+      matchWidth,
+      referenceWidth,
+      middleware.size,
+      availableHeight,
+      maxHeight,
+    ],
+  );
+  let getReferenceProps = React.useCallback(
+    (userProps) =>
+      interactions.getReferenceProps({
+        ...userProps,
+        onClick: mergeEventHandlers(userProps?.onClick, () => {
+          if (!!mergedInteractions.click && visible) onOpenChange(false);
         }),
-        useRole(floating.context, {
-            role: 'dialog',
-            enabled: !!role
-        })
-    ]);
-    let [referenceWidth, setReferenceWidth] = React.useState();
-    let getFloatingProps = React.useCallback((userProps)=>interactions.getFloatingProps({
-            ...userProps,
-            style: {
-                ...floating.floatingStyles,
-                zIndex: 9999,
-                ...matchWidth && referenceWidth ? {
-                    minInlineSize: `${referenceWidth}px`,
-                    maxInlineSize: `min(${2 * referenceWidth}px, 90vw)`
-                } : {},
-                ...userProps?.style
-            }
-        }), [
-        floating.floatingStyles,
-        interactions,
-        matchWidth,
-        referenceWidth
-    ]);
-    let getReferenceProps = React.useCallback((userProps)=>interactions.getReferenceProps({
-            ...userProps,
-            onClick: mergeEventHandlers(userProps?.onClick, ()=>{
-                if (!!mergedInteractions.click && visible) onOpenChange(false);
-            })
-        }), [
-        interactions,
-        mergedInteractions.click,
-        visible,
-        onOpenChange
-    ]);
-    return React.useMemo(()=>({
-            open,
-            onOpenChange,
-            getReferenceProps,
-            getFloatingProps,
-            ...floating
-        }), [
-        open,
-        onOpenChange,
-        getFloatingProps,
-        floating,
-        getReferenceProps
-    ]);
+      }),
+    [interactions, mergedInteractions.click, visible, onOpenChange],
+  );
+  return React.useMemo(
+    () => ({
+      open,
+      onOpenChange,
+      getReferenceProps,
+      getFloatingProps,
+      ...floating,
+    }),
+    [open, onOpenChange, getFloatingProps, floating, getReferenceProps],
+  );
 };
-export const Popover = React.forwardRef((props, forwardedRef)=>{
-    let { portal = true, visible, placement = 'bottom-start', onVisibleChange, closeOnOutsideClick = true, middleware, positionReference, className, children, content, applyBackground = false, ...rest } = props;
-    let popover = usePopover({
-        visible,
-        placement,
-        onVisibleChange,
-        closeOnOutsideClick,
-        role: 'dialog',
-        middleware
-    });
-    let [popoverElement, setPopoverElement] = React.useState();
-    let popoverRef = useMergedRefs(popover.refs.setFloating, forwardedRef, setPopoverElement);
-    let triggerId = `${useId()}-trigger`;
-    let hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
-    useLayoutEffect(()=>{
-        if (!positionReference) return;
-        popover.refs.setPositionReference(positionReference);
-        return ()=>void popover.refs.setPositionReference(null);
-    }, [
-        popover.refs,
-        positionReference
-    ]);
-    return React.createElement(React.Fragment, null, React.createElement(PopoverOpenContext.Provider, {
-        value: popover.open
-    }, cloneElementWithRef(children, (children)=>({
-            id: children.props.id || triggerId,
-            ...popover.getReferenceProps(children.props),
-            ref: popover.refs.setReference
-        }))), popover.open ? React.createElement(PopoverPortal, {
-        portal: portal
-    }, React.createElement(ThemeProvider, {
-        portalContainer: popoverElement
-    }, React.createElement(DisplayContents, null), React.createElement(FloatingFocusManager, {
-        context: popover.context,
-        modal: false,
-        initialFocus: popover.refs.floating
-    }, React.createElement(Box, {
-        className: cx({
-            'iui-popover-surface': applyBackground
-        }, className),
-        "aria-labelledby": hasAriaLabel ? void 0 : popover.refs.domReference.current?.id,
-        ...popover.getFloatingProps(rest),
-        ref: popoverRef
-    }, content)))) : null);
+export const Popover = React.forwardRef((props, forwardedRef) => {
+  let {
+    portal = true,
+    visible,
+    placement = 'bottom-start',
+    onVisibleChange,
+    closeOnOutsideClick = true,
+    middleware,
+    positionReference,
+    className,
+    children,
+    content,
+    applyBackground = false,
+    ...rest
+  } = props;
+  let popover = usePopover({
+    visible,
+    placement,
+    onVisibleChange,
+    closeOnOutsideClick,
+    role: 'dialog',
+    middleware,
+  });
+  let [popoverElement, setPopoverElement] = React.useState();
+  let popoverRef = useMergedRefs(
+    popover.refs.setFloating,
+    forwardedRef,
+    setPopoverElement,
+  );
+  let triggerId = `${useId()}-trigger`;
+  let hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
+  useLayoutEffect(() => {
+    if (!positionReference) return;
+    popover.refs.setPositionReference(positionReference);
+    return () => void popover.refs.setPositionReference(null);
+  }, [popover.refs, positionReference]);
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      PopoverOpenContext.Provider,
+      {
+        value: popover.open,
+      },
+      cloneElementWithRef(children, (children) => ({
+        id: children.props.id || triggerId,
+        ...popover.getReferenceProps(children.props),
+        ref: popover.refs.setReference,
+      })),
+    ),
+    popover.open
+      ? React.createElement(
+          PopoverPortal,
+          {
+            portal: portal,
+          },
+          React.createElement(
+            ThemeProvider,
+            {
+              portalContainer: popoverElement,
+            },
+            React.createElement(DisplayContents, null),
+            React.createElement(
+              FloatingFocusManager,
+              {
+                context: popover.context,
+                modal: false,
+              },
+              React.createElement(
+                Box,
+                {
+                  className: cx(
+                    {
+                      'iui-popover-surface': applyBackground,
+                    },
+                    className,
+                  ),
+                  'aria-labelledby': hasAriaLabel
+                    ? void 0
+                    : popover.refs.domReference.current?.id,
+                  ...popover.getFloatingProps(rest),
+                  ref: popoverRef,
+                },
+                content,
+              ),
+            ),
+          ),
+        )
+      : null,
+  );
 });
 Popover.displayName = 'Popover';
-let PopoverPortal = ({ children, portal = true })=>{
-    let portalTo = usePortalTo(portal);
-    return React.createElement(FloatingPortal, {
-        key: portalTo?.id,
-        root: portalTo
-    }, React.createElement(DisplayContents, null), children);
+let PopoverPortal = ({ children, portal = true }) => {
+  let portalTo = usePortalTo(portal);
+  return React.createElement(
+    FloatingPortal,
+    {
+      key: portalTo?.id,
+      root: portalTo,
+    },
+    React.createElement(DisplayContents, null),
+    children,
+  );
 };
-let DisplayContents = React.memo(()=>React.createElement(ShadowRoot, {
-        css: `
+let DisplayContents = React.memo(() =>
+  React.createElement(
+    ShadowRoot,
+    {
+      css: `
         :host {
           display: contents;
         }
-      `
-    }, React.createElement("slot", null)));
+      `,
+    },
+    React.createElement('slot', null),
+  ),
+);

package/DEV-esm/core/ProgressIndicators/ProgressLinear.js

@@ -2,25 +2,58 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Box, ShadowRoot, getBoundedValue } from '../../utils/index.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
-export const ProgressLinear = React.forwardRef((props, forwardedRef)=>{
-    let { value, indeterminate = void 0 === value, labels = [], isAnimated = false, status, className, labelGroupProps, ...rest } = props;
-    let boundedValue = getBoundedValue(value ?? 100, 0, 100);
-    return React.createElement(Box, {
-        className: cx('iui-progress-indicator-linear', className),
-        ref: forwardedRef,
-        "data-iui-status": status,
-        "data-iui-indeterminate": indeterminate ? 'true' : void 0,
-        "data-iui-animated": isAnimated ? 'true' : void 0,
-        style: {
-            '--iui-progress-percentage': `${boundedValue}%`
+export const ProgressLinear = React.forwardRef((props, forwardedRef) => {
+  let {
+    value,
+    indeterminate = void 0 === value,
+    labels = [],
+    isAnimated = false,
+    status,
+    className,
+    labelGroupProps,
+    ...rest
+  } = props;
+  let boundedValue = getBoundedValue(value ?? 100, 0, 100);
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-progress-indicator-linear', className),
+      ref: forwardedRef,
+      'data-iui-status': status,
+      'data-iui-indeterminate': indeterminate ? 'true' : void 0,
+      'data-iui-animated': isAnimated ? 'true' : void 0,
+      style: {
+        '--iui-progress-percentage': `${boundedValue}%`,
+      },
+      ...rest,
+    },
+    React.createElement(
+      ShadowRoot,
+      null,
+      100 !== value && React.createElement(VisuallyHidden, null, 'Loading.'),
+      React.createElement('slot', null),
+    ),
+    labels.length > 0 &&
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          ...labelGroupProps,
+          className: cx(
+            'iui-progress-indicator-linear-label',
+            labelGroupProps?.className,
+          ),
         },
-        ...rest
-    }, React.createElement(ShadowRoot, null, 100 !== value && React.createElement(VisuallyHidden, null, "Loading."), React.createElement("slot", null)), labels.length > 0 && React.createElement(Box, {
-        as: "div",
-        ...labelGroupProps,
-        className: cx('iui-progress-indicator-linear-label', labelGroupProps?.className)
-    }, labels.map((label, index)=>React.createElement("span", {
-            key: index
-        }, label))));
+        labels.map((label, index) =>
+          React.createElement(
+            'span',
+            {
+              key: index,
+            },
+            label,
+          ),
+        ),
+      ),
+  );
 });
 ProgressLinear.displayName = 'ProgressLinear';

package/DEV-esm/core/ProgressIndicators/ProgressRadial.js

@@ -1,33 +1,58 @@
 import cx from 'classnames';
 import * as React from 'react';
-import { SvgCheckmarkSmall, SvgImportantSmall, Box, getBoundedValue, ShadowRoot } from '../../utils/index.js';
+import {
+  SvgCheckmarkSmall,
+  SvgImportantSmall,
+  Box,
+  getBoundedValue,
+  ShadowRoot,
+} from '../../utils/index.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
-export const ProgressRadial = React.forwardRef((props, forwardedRef)=>{
-    let { value, indeterminate = void 0 === value, status, size, className, style, children, ...rest } = props;
-    let statusMap = {
-        negative: React.createElement(SvgImportantSmall, {
-            "aria-hidden": true
+export const ProgressRadial = React.forwardRef((props, forwardedRef) => {
+  let {
+    value,
+    indeterminate = void 0 === value,
+    status,
+    size,
+    className,
+    style,
+    children,
+    ...rest
+  } = props;
+  let statusMap = {
+    negative: React.createElement(SvgImportantSmall, {
+      'aria-hidden': true,
+    }),
+    positive: React.createElement(SvgCheckmarkSmall, {
+      'aria-hidden': true,
+    }),
+    warning: React.createElement(SvgImportantSmall, {
+      'aria-hidden': true,
+    }),
+  };
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-progress-indicator-radial', className),
+      'data-iui-size': size,
+      'data-iui-status': status,
+      'data-iui-indeterminate': indeterminate ? 'true' : void 0,
+      ref: forwardedRef,
+      style: {
+        ...(void 0 !== value && {
+          '--iui-progress-percentage': `${getBoundedValue(value, 0, 100)}%`,
         }),
-        positive: React.createElement(SvgCheckmarkSmall, {
-            "aria-hidden": true
-        }),
-        warning: React.createElement(SvgImportantSmall, {
-            "aria-hidden": true
-        })
-    };
-    return React.createElement(Box, {
-        className: cx('iui-progress-indicator-radial', className),
-        "data-iui-size": size,
-        "data-iui-status": status,
-        "data-iui-indeterminate": indeterminate ? 'true' : void 0,
-        ref: forwardedRef,
-        style: {
-            ...void 0 !== value && {
-                '--iui-progress-percentage': `${getBoundedValue(value, 0, 100)}%`
-            },
-            ...style
-        },
-        ...rest
-    }, React.createElement(ShadowRoot, null, 100 !== value && React.createElement(VisuallyHidden, null, "Loading."), React.createElement("slot", null)), 'x-small' !== size ? children ?? (status ? statusMap[status] : null) : null);
+        ...style,
+      },
+      ...rest,
+    },
+    React.createElement(
+      ShadowRoot,
+      null,
+      100 !== value && React.createElement(VisuallyHidden, null, 'Loading.'),
+      React.createElement('slot', null),
+    ),
+    'x-small' !== size ? children ?? (status ? statusMap[status] : null) : null,
+  );
 });
 ProgressRadial.displayName = 'ProgressRadial';