@itwin/itwinui-react 3.0.0-dev.8 → 3.0.0

package/esm/core/Popover/Popover.js

@@ -0,0 +1,205 @@
+/*---------------------------------------------------------------------------------------------
+ * 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,
+} from '@floating-ui/react';
+import {
+  Box,
+  cloneElementWithRef,
+  useControlledState,
+  useId,
+  useMergedRefs,
+} from '../utils/index.js';
+import { Portal } from '../utils/components/Portal.js';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider.js';
+// ----------------------------------------------------------------------------
+export const usePopover = (options) => {
+  const {
+    placement = 'bottom-start',
+    visible,
+    onVisibleChange,
+    closeOnOutsideClick,
+    autoUpdateOptions,
+    middleware = { flip: true, shift: true },
+    matchWidth,
+    trigger = { click: true, hover: false, focus: false },
+    role,
+  } = options;
+  const [open, onOpenChange] = useControlledState(
+    false,
+    visible,
+    onVisibleChange,
+  );
+  const floating = useFloating({
+    placement,
+    open,
+    onOpenChange,
+    whileElementsMounted: (...args) => autoUpdate(...args, autoUpdateOptions),
+    middleware: [
+      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),
+  });
+  const interactions = useInteractions([
+    useClick(floating.context, { enabled: !!trigger.click }),
+    useDismiss(floating.context, { outsidePress: closeOnOutsideClick }),
+    useHover(floating.context, {
+      enabled: !!trigger.hover,
+      delay: 100,
+      handleClose: safePolygon({ buffer: 1 }),
+    }),
+    useFocus(floating.context, { enabled: !!trigger.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, interactions, matchWidth, referenceWidth],
+  );
+  return React.useMemo(
+    () => ({
+      open,
+      onOpenChange,
+      ...interactions,
+      getFloatingProps,
+      ...floating,
+    }),
+    [open, onOpenChange, interactions, getFloatingProps, floating],
+  );
+};
+/**
+ * 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,
+    //
+    // dom props
+    className,
+    children,
+    content,
+    applyBackground = false,
+    ...rest
+  } = props;
+  const popover = usePopover({
+    visible,
+    placement,
+    onVisibleChange,
+    closeOnOutsideClick,
+    role: 'dialog',
+  });
+  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'];
+  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(
+          Portal,
+          { portal: portal },
+          React.createElement(
+            FloatingPortal,
+            null,
+            React.createElement(
+              ThemeProvider,
+              { portalContainer: popoverElement },
+              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,
+  );
+});
+export default Popover;

package/esm/core/RadioTiles/RadioTileGroup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { InputGroup } from '../InputGroup/index.js';
+import { InputGroup } from '../InputGroup/InputGroup.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type RadioTileGroupProps = Omit<React.ComponentProps<typeof InputGroup>, 'displayStyle' | 'disabled'>;
 /**

package/esm/core/RadioTiles/RadioTileGroup.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { InputGroup } from '../InputGroup/index.js';
+import { InputGroup } from '../InputGroup/InputGroup.js';
 import { Box } from '../utils/index.js';
 /**
  * RadioTileGroup component to group RadioTile components together

package/esm/core/SearchBox/SearchBox.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import type { IconProps, PolymorphicForwardRefComponent, InputFlexContainerProps } from '../utils/index.js';
-import type { IconButtonProps } from '../Buttons/IconButton/IconButton.js';
+import type { PolymorphicForwardRefComponent, InputFlexContainerProps } from '../utils/index.js';
+import type { IconButtonProps } from '../Buttons/IconButton.js';
+import type { IconProps } from '../Icon/Icon.js';
 type SearchBoxOwnProps = {
     /**
      * Whether the searchbox is expandable.

package/esm/core/SearchBox/SearchBox.js

@@ -10,12 +10,12 @@ import {
   SvgCloseSmall,
   useSafeContext,
   useId,
-  Icon,
   useMergedRefs,
   mergeEventHandlers,
   Box,
 } from '../utils/index.js';
-import { IconButton } from '../Buttons/IconButton/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
+import { Icon } from '../Icon/Icon.js';
 const SearchBoxContext = React.createContext(undefined);
 const SearchBoxComponent = React.forwardRef((props, ref) => {
   const {

package/esm/core/Select/Select.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import type { PopoverProps, CommonProps } from '../utils/index.js';
+import type { CommonProps } from '../utils/index.js';
+import { usePopover } from '../Popover/Popover.js';
 export type ItemRendererProps = {
     /**
      * Close handler that closes the dropdown.
@@ -110,15 +111,14 @@ export type SelectProps<T> = {
      */
     menuStyle?: React.CSSProperties;
     /**
-     * Props to customize {@link Popover} behavior.
-     * @see [tippy.js props](https://atomiks.github.io/tippyjs/v6/all-props/)
+     * Props to customize Popover behavior.
      */
-    popoverProps?: Omit<PopoverProps, 'onShow' | 'onHide' | 'disabled'>;
+    popoverProps?: Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth' | 'closeOnOutsideClick'>;
     /**
      * Props to pass to the select button (trigger) element.
      */
     triggerProps?: React.ComponentPropsWithoutRef<'div'>;
-} & SelectMultipleTypeProps<T> & Pick<PopoverProps, 'onShow' | 'onHide'> & Omit<React.ComponentPropsWithoutRef<'div'>, 'size' | 'disabled' | 'placeholder' | 'onChange'>;
+} & SelectMultipleTypeProps<T> & Omit<React.ComponentPropsWithoutRef<'div'>, 'size' | 'disabled' | 'placeholder' | 'onChange'>;
 /**
  * Select component to select value from options.
  * Generic type is used for value. It prevents you from mistakenly using other types in `options`, `value` and `onChange`.
@@ -168,5 +168,5 @@ export type SelectProps<T> = {
  *   )}
  * />
  */
-export declare const Select: <T>(props: SelectProps<T>) => JSX.Element;
+export declare const Select: React.ForwardRefExoticComponent<SelectProps<unknown> & React.RefAttributes<HTMLElement>>;
 export default Select;

package/esm/core/Select/Select.js

@@ -4,18 +4,21 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Menu, MenuItem } from '../Menu/index.js';
+import { Menu } from '../Menu/Menu.js';
+import { MenuItem } from '../Menu/MenuItem.js';
 import {
   SvgCaretDownSmall,
-  Popover,
   useId,
   AutoclearingHiddenLiveRegion,
   Box,
+  Portal,
+  useMergedRefs,
   SvgCheckmark,
-  Icon,
 } from '../utils/index.js';
-import SelectTag from './SelectTag.js';
-import SelectTagContainer from './SelectTagContainer.js';
+import { SelectTag } from './SelectTag.js';
+import { SelectTagContainer } from './SelectTagContainer.js';
+import { Icon } from '../Icon/Icon.js';
+import { usePopover } from '../Popover/Popover.js';
 const isMultipleEnabled = (variable, multiple) => {
   return multiple;
 };
@@ -72,7 +75,7 @@ const isSingleOnChange = (onChange, multiple) => {
  *   )}
  * />
  */
-export const Select = (props) => {
+export const Select = React.forwardRef((props, forwardedRef) => {
   const uid = useId();
   const {
     options,
@@ -87,55 +90,27 @@ export const Select = (props) => {
     style,
     menuClassName,
     menuStyle,
-    onShow,
-    onHide,
-    popoverProps,
     multiple = false,
     triggerProps,
     status,
+    popoverProps,
     ...rest
   } = props;
-  const [isOpenState, setIsOpen] = React.useState(false);
-  const isOpen = popoverProps?.visible ?? isOpenState;
-  const [minWidth, setMinWidth] = React.useState(0);
+  const [isOpen, setIsOpen] = React.useState(false);
   const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
   const selectRef = React.useRef(null);
-  const onShowHandler = React.useCallback(
-    (instance) => {
-      setIsOpen(true);
-      onShow?.(instance);
-    },
-    [onShow],
-  );
-  const onHideHandler = React.useCallback(
-    (instance) => {
-      setIsOpen(false);
-      selectRef.current?.focus({ preventScroll: true }); // move focus back to select button
-      onHide?.(instance);
-    },
-    [onHide],
-  );
-  React.useEffect(() => {
-    if (selectRef.current) {
-      setMinWidth(selectRef.current.offsetWidth);
-    }
-  }, [isOpen]);
-  const onKeyDown = (event) => {
-    if (event.altKey) {
+  const show = React.useCallback(() => {
+    if (disabled) {
       return;
     }
-    switch (event.key) {
-      case 'Enter':
-      case ' ':
-      case 'Spacebar': {
-        setIsOpen((o) => !o);
-        event.preventDefault();
-        break;
-      }
-      default:
-        break;
-    }
-  };
+    setIsOpen(true);
+    popoverProps?.onVisibleChange?.(true);
+  }, [disabled, popoverProps]);
+  const hide = React.useCallback(() => {
+    setIsOpen(false);
+    selectRef.current?.focus({ preventScroll: true }); // move focus back to select button
+    popoverProps?.onVisibleChange?.(false);
+  }, [popoverProps]);
   const menuItems = React.useMemo(() => {
     return options.map((option, index) => {
       const isSelected = isMultipleEnabled(value, multiple)
@@ -159,7 +134,7 @@ export const Select = (props) => {
           }
           if (isSingleOnChange(onChange, multiple)) {
             onChange?.(option.value);
-            setIsOpen(false);
+            hide();
           } else {
             onChange?.(option.value, isSelected ? 'removed' : 'added');
           }
@@ -188,7 +163,7 @@ export const Select = (props) => {
         ...menuItem.props,
       });
     });
-  }, [itemRenderer, multiple, onChange, options, value]);
+  }, [hide, itemRenderer, multiple, onChange, options, value]);
   const selectedItems = React.useMemo(() => {
     if (value == null) {
       return undefined;
@@ -203,53 +178,39 @@ export const Select = (props) => {
       label: item.label,
     });
   }, []);
+  const popover = usePopover({
+    visible: isOpen,
+    matchWidth: true,
+    closeOnOutsideClick: true,
+    ...popoverProps,
+    onVisibleChange: (open) => (open ? show() : hide()),
+  });
   return React.createElement(
-    Box,
-    { className: cx('iui-input-with-icon', className), style: style, ...rest },
+    React.Fragment,
+    null,
     React.createElement(
-      Popover,
+      Box,
       {
-        content: React.createElement(
-          Menu,
-          {
-            role: 'listbox',
-            className: cx('iui-scroll', menuClassName),
-            style: {
-              minInlineSize: minWidth,
-              maxInlineSize: `min(${minWidth * 2}px, 90vw)`,
-              ...menuStyle,
-            },
-            id: `${uid}-menu`,
-            key: `${uid}-menu`,
-          },
-          menuItems,
-        ),
-        placement: 'bottom-start',
-        aria: { content: null },
-        onShow: onShowHandler,
-        onHide: onHideHandler,
-        ...popoverProps,
-        visible: isOpen,
-        onClickOutside: () => {
-          setIsOpen(false);
-        },
+        className: cx('iui-input-with-icon', className),
+        style: style,
+        ...rest,
+        ref: useMergedRefs(popover.refs.setPositionReference, forwardedRef),
       },
       React.createElement(
         Box,
         {
+          ...popover.getReferenceProps(),
           tabIndex: 0,
           role: 'combobox',
-          ref: selectRef,
           'data-iui-size': size,
           'data-iui-status': status,
-          onClick: () => !disabled && setIsOpen((o) => !o),
-          onKeyDown: (e) => !disabled && onKeyDown(e),
           'aria-disabled': disabled,
           'aria-autocomplete': 'none',
           'aria-expanded': isOpen,
           'aria-haspopup': 'listbox',
           'aria-controls': `${uid}-menu`,
           ...triggerProps,
+          ref: useMergedRefs(selectRef, popover.refs.setReference),
           className: cx(
             'iui-select-button',
             {
@@ -277,26 +238,50 @@ export const Select = (props) => {
               selectedItemRenderer: selectedItemRenderer,
             }),
       ),
+      React.createElement(
+        Icon,
+        {
+          as: 'span',
+          'aria-hidden': true,
+          className: cx('iui-end-icon', {
+            'iui-disabled': disabled,
+            'iui-open': isOpen,
+          }),
+        },
+        React.createElement(SvgCaretDownSmall, null),
+      ),
+      multiple
+        ? React.createElement(AutoclearingHiddenLiveRegion, {
+            text: liveRegionSelection,
+          })
+        : null,
     ),
-    React.createElement(
-      Icon,
-      {
-        as: 'span',
-        'aria-hidden': true,
-        className: cx('iui-end-icon', {
-          'iui-disabled': disabled,
-          'iui-open': isOpen,
-        }),
-      },
-      React.createElement(SvgCaretDownSmall, null),
-    ),
-    multiple
-      ? React.createElement(AutoclearingHiddenLiveRegion, {
-          text: liveRegionSelection,
-        })
-      : null,
+    popover.open &&
+      React.createElement(
+        Portal,
+        null,
+        React.createElement(
+          Menu,
+          {
+            role: 'listbox',
+            className: menuClassName,
+            id: `${uid}-menu`,
+            key: `${uid}-menu`,
+            ...popover.getFloatingProps({
+              style: menuStyle,
+              onKeyDown: ({ key }) => {
+                if (key === 'Tab') {
+                  hide();
+                }
+              },
+            }),
+            ref: popover.refs.setFloating,
+          },
+          menuItems,
+        ),
+      ),
   );
-};
+});
 const SingleSelectButton = ({ selectedItem, selectedItemRenderer }) => {
   const startIcon = selectedItem?.startIcon ?? selectedItem?.icon;
   return React.createElement(

package/esm/core/Select/SelectTagContainer.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useOverflow, useMergedRefs, Box } from '../utils/index.js';
-import SelectTag from './SelectTag.js';
+import { SelectTag } from './SelectTag.js';
 /**
  */
 export const SelectTagContainer = React.forwardRef((props, ref) => {

package/esm/core/SideNavigation/SideNavigation.js

@@ -5,8 +5,8 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { WithCSSTransition, SvgChevronRight, Box } from '../utils/index.js';
-import { IconButton } from '../Buttons/index.js';
-import { Tooltip } from '../Tooltip/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 /**
  * Left side navigation menu component.
  * @example

package/esm/core/SideNavigation/SidenavButton.d.ts

@@ -1,5 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { ButtonProps } from '../Buttons/Button/Button.js';
+import type { ButtonProps } from '../Buttons/Button.js';
 type SidenavButtonProps = {
     /**
      * Whether the sidenav button is active,

package/esm/core/SideNavigation/SidenavButton.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Button } from '../Buttons/index.js';
+import { Button } from '../Buttons/Button.js';
 /**
  * Wrapper around Button to be used as SideNavigation items.
  * Label is hidden when sidenav is collapsed.

package/esm/core/Slider/Slider.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { Tooltip } from '../Tooltip/index.js';
+import type { Tooltip } from '../Tooltip/Tooltip.js';
 /**
  * Determines which segments are shown with color.
  */
@@ -65,9 +65,9 @@ export type SliderProps = {
      */
     maxLabel?: React.ReactNode;
     /**
-     * Additional props for container `<div>` that hold the slider rail, thumbs, and tracks.
+     * Additional props for container `<div>` that hold the slider thumbs, and tracks.
      */
-    railContainerProps?: React.HTMLAttributes<HTMLDivElement>;
+    trackContainerProps?: React.HTMLAttributes<HTMLDivElement>;
     /**
      * Allows props to be passed for slider-min
      */
@@ -76,10 +76,6 @@ export type SliderProps = {
      * Allows props to be passed for slider-max
      */
     maxProps?: React.ComponentProps<'span'>;
-    /**
-     * Allows props to be passed for slider-rail
-     */
-    railProps?: React.ComponentProps<'div'>;
     /**
      * Allows props to be passed for slider-track
      */

package/esm/core/Slider/Slider.js

@@ -78,10 +78,9 @@ export const Slider = React.forwardRef((props, ref) => {
     onUpdate,
     thumbProps,
     className,
-    railContainerProps,
+    trackContainerProps,
     minProps,
     maxProps,
-    railProps,
     trackProps,
     tickProps,
     ticksProps,
@@ -306,12 +305,9 @@ export const Slider = React.forwardRef((props, ref) => {
     Box,
     {
       ref: ref,
-      className: cx(
-        'iui-slider-component-container',
-        `iui-slider-${orientation}`,
-        { 'iui-disabled': disabled },
-        className,
-      ),
+      className: cx('iui-slider-container', className),
+      'data-iui-orientation': orientation,
+      'data-iui-disabled': disabled ? 'true' : undefined,
       ...rest,
     },
     minValueLabel &&
@@ -327,23 +323,17 @@ export const Slider = React.forwardRef((props, ref) => {
     React.createElement(
       Box,
       {
-        as: 'div',
         ref: containerRef,
-        ...railContainerProps,
+        ...trackContainerProps,
         className: cx(
-          'iui-slider-container',
+          'iui-slider',
           {
             'iui-grabbing': undefined !== activeThumbIndex,
           },
-          railContainerProps?.className,
+          trackContainerProps?.className,
         ),
         onPointerDown: handlePointerDownOnSlider,
       },
-      React.createElement(Box, {
-        as: 'div',
-        ...railProps,
-        className: cx('iui-slider-rail', railProps?.className),
-      }),
       currentValues.map((thumbValue, index) => {
         const [minVal, maxVal] = getAllowableThumbRange(index);
         const thisThumbProps = thumbProps?.(index);
@@ -362,7 +352,6 @@ export const Slider = React.forwardRef((props, ref) => {
           step: step,
           sliderMin: min,
           sliderMax: max,
-          orientation: orientation,
         });
       }),
       React.createElement(Track, {
@@ -373,8 +362,8 @@ export const Slider = React.forwardRef((props, ref) => {
         orientation: orientation,
         ...trackProps,
       }),
-      tickMarkArea,
     ),
+    tickMarkArea,
     maxValueLabel &&
       React.createElement(
         Box,