@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/core/Popover/Popover.js

@@ -1,175 +1,294 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 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, useListNavigation, } from '@floating-ui/react';
-import { Box, ShadowRoot, cloneElementWithRef, 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(undefined);
 export const usePopover = (options) => {
-    const { placement = 'bottom-start', visible, onVisibleChange, closeOnOutsideClick, autoUpdateOptions, matchWidth, interactions: interactionsProp, role, ...rest } = options;
-    const mergedInteractions = {
-        ...{
-            click: true,
-            dismiss: true,
-            hover: false,
-            focus: false,
-            listNavigation: undefined,
-        },
-        ...interactionsProp,
-    };
-    const tree = useFloatingTree();
-    const middleware = React.useMemo(() => ({ flip: true, shift: true, ...options.middleware }), [options.middleware]);
-    const [open, onOpenChange] = useControlledState(false, visible, onVisibleChange);
-    const floating = useFloating({
-        placement,
-        open,
-        onOpenChange,
-        whileElementsMounted: React.useMemo(() => 
-        // autoUpdate is expensive and should only be called when the popover is open
-        open ? (...args) => autoUpdate(...args, autoUpdateOptions) : undefined, [autoUpdateOptions, open]),
-        ...rest,
-        middleware: React.useMemo(() => [
-            middleware.offset !== undefined && 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]),
-    });
-    const interactions = useInteractions([
-        useClick(floating.context, {
-            enabled: !!mergedInteractions.click,
-            ...mergedInteractions.click,
-        }),
-        useDismiss(floating.context, {
-            enabled: !!mergedInteractions.dismiss,
-            outsidePress: closeOnOutsideClick,
-            bubbles: tree != null,
-            ...mergedInteractions.dismiss,
-        }),
-        useHover(floating.context, {
-            enabled: !!mergedInteractions.hover,
-            delay: 100,
-            handleClose: safePolygon({
-                buffer: 1,
-                blockPointerEvents: true,
+  const {
+    placement = 'bottom-start',
+    visible,
+    onVisibleChange,
+    closeOnOutsideClick,
+    autoUpdateOptions,
+    matchWidth,
+    interactions: interactionsProp,
+    role,
+    ...rest
+  } = options;
+  const mergedInteractions = React.useMemo(
+    () => ({
+      ...{
+        click: true,
+        dismiss: true,
+        hover: false,
+        focus: false,
+      },
+      ...interactionsProp,
+    }),
+    [interactionsProp],
+  );
+  const tree = useFloatingTree();
+  const middleware = React.useMemo(
+    () => ({
+      flip: true,
+      shift: true,
+      ...options.middleware,
+    }),
+    [options.middleware],
+  );
+  const [open, onOpenChange] = useControlledState(
+    false,
+    visible,
+    onVisibleChange,
+  );
+  const floating = useFloating({
+    placement,
+    open,
+    onOpenChange,
+    whileElementsMounted: React.useMemo(
+      () =>
+        open ? (...args) => autoUpdate(...args, autoUpdateOptions) : undefined,
+      [autoUpdateOptions, open],
+    ),
+    ...rest,
+    middleware: React.useMemo(
+      () =>
+        [
+          middleware.offset !== undefined && offset(middleware.offset),
+          middleware.flip && flip(),
+          middleware.shift && shift(),
+          matchWidth &&
+            size({
+              apply: ({ rects }) => {
+                setReferenceWidth(rects.reference.width);
+              },
             }),
-            move: false,
-            ...mergedInteractions.hover,
-        }),
-        useFocus(floating.context, {
-            enabled: !!mergedInteractions.focus,
-            ...mergedInteractions.focus,
-        }),
-        useRole(floating.context, { role: 'dialog', enabled: !!role }),
-        useListNavigation(floating.context, {
-            enabled: !!mergedInteractions.listNavigation,
-            ...mergedInteractions.listNavigation,
-        }),
-    ]);
-    const [referenceWidth, setReferenceWidth] = React.useState();
-    const getFloatingProps = React.useCallback((userProps) => interactions.getFloatingProps({
+          middleware.autoPlacement && autoPlacement(),
+          middleware.inline && inline(),
+          middleware.hide && hide(),
+        ].filter(Boolean),
+      [matchWidth, middleware],
+    ),
+  });
+  const interactions = useInteractions([
+    useClick(floating.context, {
+      enabled: !!mergedInteractions.click,
+      ...mergedInteractions.click,
+    }),
+    useDismiss(floating.context, {
+      enabled: !!mergedInteractions.dismiss,
+      outsidePress: closeOnOutsideClick,
+      bubbles: tree != null,
+      ...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,
+    }),
+  ]);
+  const [referenceWidth, setReferenceWidth] = React.useState();
+  const getFloatingProps = React.useCallback(
+    (userProps) =>
+      interactions.getFloatingProps({
         ...userProps,
         style: {
-            ...floating.floatingStyles,
-            zIndex: 9999,
-            ...(matchWidth && referenceWidth
-                ? {
-                    minInlineSize: `${referenceWidth}px`,
-                    maxInlineSize: `min(${referenceWidth * 2}px, 90vw)`,
-                }
-                : {}),
-            ...userProps?.style,
+          ...floating.floatingStyles,
+          zIndex: 9999,
+          ...(matchWidth && referenceWidth
+            ? {
+                minInlineSize: `${referenceWidth}px`,
+                maxInlineSize: `min(${referenceWidth * 2}px, 90vw)`,
+              }
+            : {}),
+          ...userProps?.style,
         },
-    }), [floating.floatingStyles, interactions, matchWidth, referenceWidth]);
-    return React.useMemo(() => ({
-        open,
-        onOpenChange,
-        ...interactions,
-        getFloatingProps,
-        ...floating,
-    }), [open, onOpenChange, interactions, getFloatingProps, floating]);
+      }),
+    [floating.floatingStyles, interactions, matchWidth, referenceWidth],
+  );
+  const 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],
+  );
 };
-/**
- * A utility component to help with positioning of floating content relative to a trigger.
- * Built on top of [`floating-ui`](https://floating-ui.com/).
- *
- * @see https://itwinui.bentley.com/docs/popover
- *
- * @example
- * <Popover content='This is a popover'>
- *   <Button>Show popover</Button>
- * </Popover>
- */
 export const Popover = React.forwardRef((props, forwardedRef) => {
-    const { portal = true, 
-    //
-    // popover options
-    visible, placement = 'bottom-start', onVisibleChange, closeOnOutsideClick = true, middleware, 
-    //
-    // extra props
-    positionReference, 
-    //
-    // dom props
-    className, children, content, applyBackground = false, ...rest } = props;
-    const popover = usePopover({
-        visible,
-        placement,
-        onVisibleChange,
-        closeOnOutsideClick,
-        role: 'dialog',
-        middleware,
-    });
-    const [popoverElement, setPopoverElement] = React.useState();
-    const popoverRef = useMergedRefs(popover.refs.setFloating, forwardedRef, setPopoverElement);
-    const triggerId = `${useId()}-trigger`;
-    const 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,
-        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
-                            ? popover.refs.domReference.current?.id
-                            : undefined, ...popover.getFloatingProps(rest), ref: popoverRef }, content))))) : null));
+  const {
+    portal = true,
+    visible,
+    placement = 'bottom-start',
+    onVisibleChange,
+    closeOnOutsideClick = true,
+    middleware,
+    positionReference,
+    className,
+    children,
+    content,
+    applyBackground = false,
+    ...rest
+  } = props;
+  const popover = usePopover({
+    visible,
+    placement,
+    onVisibleChange,
+    closeOnOutsideClick,
+    role: 'dialog',
+    middleware,
+  });
+  const [popoverElement, setPopoverElement] = React.useState();
+  const popoverRef = useMergedRefs(
+    popover.refs.setFloating,
+    forwardedRef,
+    setPopoverElement,
+  );
+  const triggerId = `${useId()}-trigger`;
+  const 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
+                    ? popover.refs.domReference.current?.id
+                    : undefined,
+                  ...popover.getFloatingProps(rest),
+                  ref: popoverRef,
+                },
+                content,
+              ),
+            ),
+          ),
+        )
+      : null,
+  );
 });
-// ----------------------------------------------------------------------------
-const PopoverPortal = ({ children, portal = true, }) => {
-    const portalTo = usePortalTo(portal);
-    return (React.createElement(FloatingPortal, { root: portalTo },
-        React.createElement(DisplayContents, null),
-        children));
+const PopoverPortal = ({ children, portal = true }) => {
+  const portalTo = usePortalTo(portal);
+  return React.createElement(
+    FloatingPortal,
+    {
+      key: portalTo?.id,
+      root: portalTo,
+    },
+    React.createElement(DisplayContents, null),
+    children,
+  );
 };
-// ----------------------------------------------------------------------------
-/** Applies `display: contents` to the parent div. */
 const DisplayContents = React.memo(() => {
-    return (React.createElement(ShadowRoot, { css: `
+  return React.createElement(
+    ShadowRoot,
+    {
+      css: `
         :host {
           display: contents;
         }
-      ` },
-        React.createElement("slot", null)));
+      `,
+    },
+    React.createElement('slot', null),
+  );
 });

package/esm/core/ProgressIndicators/ProgressLinear.js

@@ -1,42 +1,58 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
 import { Box, ShadowRoot, getBoundedValue } from '../../utils/index.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
-/**
- * Shows progress on a linear bar
- * @example
- * // Determinate
- * <ProgressLinear value={25}/>
- * // Indeterminate
- * <ProgressLinear indeterminate={true}/>
- * // Labeled - Center
- * <ProgressLinear value={50} labels={['Centered Label']} />
- * // Labeled - Left & Right
- * <ProgressLinear value={50} labels={['Loading...', '50%']} />
- * // Status
- * <ProgressLinear
- *   status='positive'
- *   labels={[
- *    'Upload done!',
- *    <Icon key='icon'>
- *      <SvgStatusSuccess />{' '}
- *    </Icon>
- *   ]}
- * />
- * <ProgressLinear status='negative' />
- */
 export const ProgressLinear = React.forwardRef((props, forwardedRef) => {
-    const { value, indeterminate = value === undefined, labels = [], isAnimated = false, status, className, labelGroupProps, ...rest } = props;
-    const 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' : undefined, "data-iui-animated": isAnimated ? 'true' : undefined, style: {
-            '--iui-progress-percentage': `${boundedValue}%`,
-        }, ...rest },
-        React.createElement(ShadowRoot, null,
-            value !== 100 && 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)))))));
+  const {
+    value,
+    indeterminate = value === undefined,
+    labels = [],
+    isAnimated = false,
+    status,
+    className,
+    labelGroupProps,
+    ...rest
+  } = props;
+  const 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' : undefined,
+      'data-iui-animated': isAnimated ? 'true' : undefined,
+      style: {
+        '--iui-progress-percentage': `${boundedValue}%`,
+      },
+      ...rest,
+    },
+    React.createElement(
+      ShadowRoot,
+      null,
+      value !== 100 && 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,
+          ),
+        ),
+      ),
+  );
 });

package/esm/core/ProgressIndicators/ProgressRadial.js

@@ -1,44 +1,59 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 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';
-/**
- * Circular Progress Indicator
- * @example
- * Basic
- * <ProgressRadial value={50} />
- * Indeterminate
- * <ProgressRadial indeterminate />
- * // Positive / Negative / Warning
- * <ProgressRadial status='positive' />
- * <ProgressRadial status='negative' />
- * <ProgressRadial status='warning' />
- * Centered Content
- * <ProgressRadial value={63}>63</ProgressRadial>
- * Small
- * <ProgressRadial size={'small'} indeterminate/>
- */
 export const ProgressRadial = React.forwardRef((props, forwardedRef) => {
-    const { value, indeterminate = value === undefined, status, size, className, style, children, ...rest } = props;
-    const 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' : undefined, ref: forwardedRef, style: {
-            ...(value !== undefined && {
-                '--iui-progress-percentage': `${getBoundedValue(value, 0, 100)}%`,
-            }),
-            ...style,
-        }, ...rest },
-        React.createElement(ShadowRoot, null,
-            value !== 100 && React.createElement(VisuallyHidden, null, "Loading."),
-            React.createElement("slot", null)),
-        size !== 'x-small'
-            ? children ?? (!!status ? statusMap[status] : null)
-            : null));
+  const {
+    value,
+    indeterminate = value === undefined,
+    status,
+    size,
+    className,
+    style,
+    children,
+    ...rest
+  } = props;
+  const 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' : undefined,
+      ref: forwardedRef,
+      style: {
+        ...(value !== undefined && {
+          '--iui-progress-percentage': `${getBoundedValue(value, 0, 100)}%`,
+        }),
+        ...style,
+      },
+      ...rest,
+    },
+    React.createElement(
+      ShadowRoot,
+      null,
+      value !== 100 && React.createElement(VisuallyHidden, null, 'Loading.'),
+      React.createElement('slot', null),
+    ),
+    size !== 'x-small'
+      ? children ?? (!!status ? statusMap[status] : null)
+      : null,
+  );
 });