@itwin/itwinui-react 3.0.0-dev.9 → 3.0.1

package/esm/core/NonIdealState/ErrorPage.js

@@ -3,9 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Button } from '../Buttons/Button/index.js';
+import { Button } from '../Buttons/Button.js';
 import { NonIdealState } from './NonIdealState.js';
-import { ProgressRadial } from '../ProgressIndicators/index.js';
+import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 import { dynamicImport } from '../utils/index.js';
 const Svg401 = React.lazy(() =>
   dynamicImport('@itwin/itwinui-illustrations-react/Svg401'),

package/esm/core/{utils/components → Popover}/Popover.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Placement } from '@floating-ui/react';
-import type { PolymorphicForwardRefComponent } from '../index.js';
-import type { PortalProps } from './Portal.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PortalProps } from '../utils/components/Portal.js';
 type PopoverOptions = {
     /**
      * Placement of the popover content.
@@ -19,12 +19,10 @@ type PopoverOptions = {
     onVisibleChange?: (visible: boolean) => void;
     /**
      * If true, the popover will close when clicking outside it.
+     *
+     * @default true
      */
     closeOnOutsideClick?: boolean;
-    /**
-     * Whether the popover should match the width of the trigger.
-     */
-    matchWidth?: boolean;
 };
 type PopoverInternalProps = {
     /**
@@ -64,6 +62,10 @@ type PopoverInternalProps = {
      */
     trigger?: Partial<Record<'hover' | 'click' | 'focus', boolean>>;
     role?: 'dialog' | 'menu' | 'listbox';
+    /**
+     * Whether the popover should match the width of the trigger.
+     */
+    matchWidth?: boolean;
 };
 export declare const usePopover: (options: PopoverOptions & PopoverInternalProps) => {
     placement: Placement;
@@ -81,11 +83,7 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
         setFloating: (node: HTMLElement | null) => void;
     } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
     elements: {
-        reference: import("@floating-ui/react-dom").ReferenceType | null; /**
-         * Middleware options.
-         *
-         * @see https://floating-ui.com/docs/offset
-         */
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
         floating: HTMLElement | null;
     } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     context: {
@@ -113,13 +111,31 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
     onOpenChange: React.Dispatch<React.SetStateAction<boolean | undefined>>;
 };
 type PopoverPublicProps = {
+    /**
+     * Content displayed inside the popover.
+     */
     content?: React.ReactNode;
+    /**
+     * Element that triggers the popover. Should usually be a button.
+     */
     children?: React.ReactNode;
+    /**
+     * Whether the popover adds recommended CSS (background-color, box-shadow, etc.) to itself.
+     *
+     * @default false
+     */
     applyBackground?: boolean;
 } & PortalProps & PopoverOptions;
 /**
- * A utility component to help with positioning of floating content.
- * Built on top of [`floating-ui`](https://floating-ui.com/)
+ * 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 declare const Popover: PolymorphicForwardRefComponent<"div", PopoverPublicProps>;
 export default Popover;

package/esm/core/{utils/components → Popover}/Popover.js

@@ -3,6 +3,7 @@
  * 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,
@@ -21,16 +22,17 @@ import {
   useFocus,
   safePolygon,
   useRole,
+  FloatingPortal,
 } from '@floating-ui/react';
 import {
   Box,
   cloneElementWithRef,
   useControlledState,
+  useId,
   useMergedRefs,
-} from '../index.js';
-import { Portal } from './Portal.js';
-import { Surface } from '../../Surface/index.js';
-import { ThemeProvider } from '../../ThemeProvider/index.js';
+} from '../utils/index.js';
+import { Portal } from '../utils/components/Portal.js';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider.js';
 // ----------------------------------------------------------------------------
 export const usePopover = (options) => {
   const {
@@ -111,8 +113,15 @@ export const usePopover = (options) => {
   );
 };
 /**
- * A utility component to help with positioning of floating content.
- * Built on top of [`floating-ui`](https://floating-ui.com/)
+ * 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 {
@@ -120,15 +129,15 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
     //
     // popover options
     visible,
-    placement,
+    placement = 'bottom-start',
     onVisibleChange,
-    closeOnOutsideClick,
-    matchWidth,
+    closeOnOutsideClick = true,
     //
     // dom props
+    className,
     children,
     content,
-    applyBackground,
+    applyBackground = false,
     ...rest
   } = props;
   const popover = usePopover({
@@ -136,7 +145,6 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
     placement,
     onVisibleChange,
     closeOnOutsideClick,
-    matchWidth,
     role: 'dialog',
   });
   const [popoverElement, setPopoverElement] = React.useState();
@@ -145,10 +153,13 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
     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,
     })),
@@ -157,24 +168,33 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
           Portal,
           { portal: portal },
           React.createElement(
-            ThemeProvider,
-            { portalContainer: popoverElement },
+            FloatingPortal,
+            null,
             React.createElement(
-              FloatingFocusManager,
-              {
-                context: popover.context,
-                modal: false,
-                initialFocus: -1,
-                returnFocus: true,
-              },
+              ThemeProvider,
+              { portalContainer: popoverElement },
               React.createElement(
-                Box,
+                FloatingFocusManager,
                 {
-                  as: applyBackground ? Surface : 'div',
-                  ...popover.getFloatingProps(rest),
-                  ref: popoverRef,
+                  context: popover.context,
+                  modal: false,
+                  initialFocus: popover.refs.floating,
                 },
-                content,
+                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,
+                ),
               ),
             ),
           ),

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,6 +1,6 @@
 import * as React from 'react';
-import { usePopover } 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.
@@ -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,20 +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,
   useId,
   AutoclearingHiddenLiveRegion,
   Box,
-  usePopover,
   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;
 };
@@ -74,7 +75,7 @@ const isSingleOnChange = (onChange, multiple) => {
  *   )}
  * />
  */
-export const Select = (props) => {
+export const Select = React.forwardRef((props, forwardedRef) => {
   const uid = useId();
   const {
     options,
@@ -193,7 +194,7 @@ export const Select = (props) => {
         className: cx('iui-input-with-icon', className),
         style: style,
         ...rest,
-        ref: popover.refs.setPositionReference,
+        ref: useMergedRefs(popover.refs.setPositionReference, forwardedRef),
       },
       React.createElement(
         Box,
@@ -263,7 +264,7 @@ export const Select = (props) => {
           Menu,
           {
             role: 'listbox',
-            className: cx('iui-scroll', menuClassName),
+            className: menuClassName,
             id: `${uid}-menu`,
             key: `${uid}-menu`,
             ...popover.getFloatingProps({
@@ -274,13 +275,19 @@ export const Select = (props) => {
                 }
               },
             }),
-            ref: popover.refs.setFloating,
+            ref: (node) => {
+              // early return if ref is already set, to prevent repeated re-renders
+              if (popover.refs.floating.current || !node) {
+                return;
+              }
+              popover.refs.setFloating(node);
+            },
           },
           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,

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Tooltip } from '../Tooltip/index.js';
-import type { SliderProps } from './Slider.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 type ThumbProps = {
     /**
      * Thumb value.
@@ -54,7 +53,7 @@ type ThumbProps = {
      * Additional props for Thumb.
      */
     thumbProps?: React.HTMLAttributes<HTMLDivElement>;
-} & Pick<SliderProps, 'orientation'>;
+};
 /**
  * Thumb is a local component used to show and modify the values maintained by the Slider.
  * Only one Thumb can be active at a time. A Thumb is made active when the user selects

package/esm/core/Slider/Thumb.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Tooltip } from '../Tooltip/index.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import { Box } from '../utils/index.js';
 /**
  * Thumb is a local component used to show and modify the values maintained by the Slider.
@@ -26,7 +26,6 @@ export const Thumb = (props) => {
     tooltipProps,
     thumbProps,
     disabled,
-    orientation,
   } = props;
   const thumbRef = React.useRef(null);
   const handleOnKeyboardEvent = React.useCallback(
@@ -93,13 +92,10 @@ export const Thumb = (props) => {
     },
     React.createElement(Box, {
       ...rest,
-      'data-index': index,
       ref: thumbRef,
       style: {
         ...style,
-        ...(orientation === 'horizontal'
-          ? { insetInlineStart: `${lowPercent}%` }
-          : { insetBlockEnd: `${lowPercent}%` }),
+        '--iui-slider-thumb-position': `${lowPercent}%`,
       },
       className: cx('iui-slider-thumb', { 'iui-active': isActive }, className),
       role: 'slider',

package/esm/core/StatusMessage/StatusMessage.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Icon } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { Icon } from '../Icon/Icon.js';
 type StatusMessageProps = {
     /**
      * Custom icon to be displayed at the beginning.

package/esm/core/StatusMessage/StatusMessage.js

@@ -3,8 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Box, StatusIconMap, Icon } from '../utils/index.js';
+import { Box, StatusIconMap } from '../utils/index.js';
 import cx from 'classnames';
+import { Icon } from '../Icon/Icon.js';
 /**
  * Component to display icon and text below the form field.
  * @example

package/esm/core/Stepper/StepperStep.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Tooltip } from '../Tooltip/index.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import { Box } from '../utils/index.js';
 export const StepperStep = React.forwardRef((props, forwardedRef) => {
   const {

package/esm/core/Stepper/WorkflowDiagramStep.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Tooltip } from '../Tooltip/index.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import { Box } from '../utils/index.js';
 export const WorkflowDiagramStep = (props) => {
   const { title, description, className, style, contentProps, ...rest } = props;

package/esm/core/Surface/Surface.d.ts

@@ -11,6 +11,14 @@ type SurfaceProps = {
      * Sets the elevation of the surface
      */
     elevation?: 0 | 1 | 2 | 3 | 4 | 5;
+    /**
+     * Sets the border of the surface.
+     *
+     * Can be a boolean to toggle the default border, or a string value to specify a custom border.
+     *
+     * @default true
+     */
+    border?: boolean | string;
     /**
      * Content in the surface.
      */

package/esm/core/Surface/Surface.js

@@ -26,6 +26,16 @@ const getSurfaceElevationValue = (elevation) => {
       return '';
   }
 };
+/** Returns correct border value based on prop */
+const getBorderValue = (border) => {
+  if (typeof border === 'string') {
+    return border;
+  }
+  if (border === false) {
+    return 'none';
+  }
+  return '';
+};
 // ----------------------------------------------------------------------------
 // Surface.Header component
 const SurfaceHeader = React.forwardRef((props, ref) => {
@@ -73,10 +83,18 @@ const SurfaceBody = React.forwardRef((props, ref) => {
  */
 export const Surface = Object.assign(
   React.forwardRef((props, ref) => {
-    const { elevation, className, style, children, ...rest } = props;
+    const {
+      elevation,
+      border = true,
+      className,
+      style,
+      children,
+      ...rest
+    } = props;
     const [hasLayout, setHasLayout] = React.useState(false);
     const _style = {
       '--iui-surface-elevation': getSurfaceElevationValue(elevation),
+      '--iui-surface-border': getBorderValue(border),
       ...style,
     };
     return React.createElement(

package/esm/core/Table/SubRowExpander.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Cell, CellProps } from 'react-table';
+import type { Cell, CellProps } from '../../react-table/react-table.js';
 export type SubRowExpanderProps<T extends Record<string, unknown>> = {
     cell: Cell<T>;
     expanderCell?: (cellProps: CellProps<T>) => React.ReactNode;