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

package/cjs/core/NonIdealState/ErrorPage.js

@@ -7,38 +7,38 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../Buttons/Button/index.js');
+const Button_js_1 = require('../Buttons/Button.js');
 const NonIdealState_js_1 = require('./NonIdealState.js');
-const index_js_2 = require('../ProgressIndicators/index.js');
-const index_js_3 = require('../utils/index.js');
+const ProgressRadial_js_1 = require('../ProgressIndicators/ProgressRadial.js');
+const index_js_1 = require('../utils/index.js');
 const Svg401 = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg401'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg401'),
 );
 const Svg403 = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg403'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg403'),
 );
 const Svg404 = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg404'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg404'),
 );
 const Svg500 = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg500'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg500'),
 );
 const Svg502 = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg502'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg502'),
 );
 const Svg503 = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg503'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/Svg503'),
 );
 const SvgError = React.lazy(() =>
-  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/SvgError'),
+  (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/SvgError'),
 );
 const SvgRedirect = React.lazy(() =>
-  (0, index_js_3.dynamicImport)(
+  (0, index_js_1.dynamicImport)(
     '@itwin/itwinui-illustrations-react/SvgRedirect',
   ),
 );
 const SvgTimedOut = React.lazy(() =>
-  (0, index_js_3.dynamicImport)(
+  (0, index_js_1.dynamicImport)(
     '@itwin/itwinui-illustrations-react/SvgTimedOut',
   ),
 );
@@ -161,7 +161,7 @@ exports.ErrorPage = React.forwardRef((props, forwardedRef) => {
       return undefined;
     }
     return React.createElement(
-      index_js_1.Button,
+      Button_js_1.Button,
       { styleType: 'high-visibility', onClick: primaryButtonHandle },
       primaryButtonLabel,
     );
@@ -171,7 +171,7 @@ exports.ErrorPage = React.forwardRef((props, forwardedRef) => {
       return undefined;
     }
     return React.createElement(
-      index_js_1.Button,
+      Button_js_1.Button,
       { styleType: 'default', onClick: secondaryButtonHandle },
       secondaryButtonLabel,
     );
@@ -192,7 +192,9 @@ exports.ErrorPage = React.forwardRef((props, forwardedRef) => {
   return React.createElement(NonIdealState_js_1.NonIdealState, {
     svg: React.createElement(
       React.Suspense,
-      { fallback: React.createElement(index_js_2.ProgressRadial, null) },
+      {
+        fallback: React.createElement(ProgressRadial_js_1.ProgressRadial, null),
+      },
       getErrorIcon(),
     ),
     heading: getHeadingMessage(),

package/cjs/core/Popover/Popover.d.ts

@@ -0,0 +1,141 @@
+import * as React from 'react';
+import type { Placement } from '@floating-ui/react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PortalProps } from '../utils/components/Portal.js';
+type PopoverOptions = {
+    /**
+     * Placement of the popover content.
+     * @default 'bottom-start'
+     */
+    placement?: Placement;
+    /**
+     * Controlled flag for whether the popover is visible.
+     */
+    visible?: boolean;
+    /**
+     * Callback invoked every time the popover visibility changes as a result
+     * of internal logic. Should be used alongside `visible` prop.
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * If true, the popover will close when clicking outside it.
+     *
+     * @default true
+     */
+    closeOnOutsideClick?: boolean;
+};
+type PopoverInternalProps = {
+    /**
+     * autoUpdate options that recalculates position
+     * to ensure the floating element remains anchored
+     * to its reference element, such as when scrolling
+     * and resizing the screen
+     *
+     * https://floating-ui.com/docs/autoUpdate#options
+     */
+    autoUpdateOptions?: {
+        ancestorScroll?: boolean;
+        ancestorResize?: boolean;
+        elementResize?: boolean;
+        /**
+         * Use this if you want popover to follow moving trigger element
+         */
+        animationFrame?: boolean;
+        layoutShift?: boolean;
+    };
+    /**
+     * Middleware options.
+     *
+     * @see https://floating-ui.com/docs/offset
+     */
+    middleware?: {
+        offset?: number;
+        flip?: boolean;
+        shift?: boolean;
+        autoPlacement?: boolean;
+        hide?: boolean;
+        inline?: boolean;
+    };
+    /**
+     * By default, the popover will only open on click.
+     * `hover` and `focus` can be manually specified as triggers.
+     */
+    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;
+    strategy: import("@floating-ui/utils").Strategy;
+    middlewareData: import("@floating-ui/core").MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: React.MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: {
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    context: {
+        x: number;
+        y: number;
+        placement: Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event | undefined) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    open: boolean | undefined;
+    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 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/cjs/core/Popover/Popover.js

@@ -0,0 +1,188 @@
+'use strict';
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.Popover = exports.usePopover = void 0;
+const tslib_1 = require('tslib');
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const react_1 = require('@floating-ui/react');
+const index_js_1 = require('../utils/index.js');
+const Portal_js_1 = require('../utils/components/Portal.js');
+const ThemeProvider_js_1 = require('../ThemeProvider/ThemeProvider.js');
+// ----------------------------------------------------------------------------
+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] = (0, index_js_1.useControlledState)(
+    false,
+    visible,
+    onVisibleChange,
+  );
+  const floating = (0, react_1.useFloating)({
+    placement,
+    open,
+    onOpenChange,
+    whileElementsMounted: (...args) =>
+      (0, react_1.autoUpdate)(...args, autoUpdateOptions),
+    middleware: [
+      middleware.offset !== undefined && (0, react_1.offset)(middleware.offset),
+      middleware.flip && (0, react_1.flip)(),
+      middleware.shift && (0, react_1.shift)(),
+      matchWidth &&
+        (0, react_1.size)({
+          apply: ({ rects }) => {
+            setReferenceWidth(rects.reference.width);
+          },
+        }),
+      middleware.autoPlacement && (0, react_1.autoPlacement)(),
+      middleware.inline && (0, react_1.inline)(),
+      middleware.hide && (0, react_1.hide)(),
+    ].filter(Boolean),
+  });
+  const interactions = (0, react_1.useInteractions)([
+    (0, react_1.useClick)(floating.context, { enabled: !!trigger.click }),
+    (0, react_1.useDismiss)(floating.context, {
+      outsidePress: closeOnOutsideClick,
+    }),
+    (0, react_1.useHover)(floating.context, {
+      enabled: !!trigger.hover,
+      delay: 100,
+      handleClose: (0, react_1.safePolygon)({ buffer: 1 }),
+    }),
+    (0, react_1.useFocus)(floating.context, { enabled: !!trigger.focus }),
+    (0, react_1.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],
+  );
+};
+exports.usePopover = usePopover;
+/**
+ * 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>
+ */
+exports.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 = (0, exports.usePopover)({
+    visible,
+    placement,
+    onVisibleChange,
+    closeOnOutsideClick,
+    role: 'dialog',
+  });
+  const [popoverElement, setPopoverElement] = React.useState();
+  const popoverRef = (0, index_js_1.useMergedRefs)(
+    popover.refs.setFloating,
+    forwardedRef,
+    setPopoverElement,
+  );
+  const triggerId = `${(0, index_js_1.useId)()}-trigger`;
+  const hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
+  return React.createElement(
+    React.Fragment,
+    null,
+    (0, index_js_1.cloneElementWithRef)(children, (children) => ({
+      id: children.props.id || triggerId,
+      ...popover.getReferenceProps(children.props),
+      ref: popover.refs.setReference,
+    })),
+    popover.open
+      ? React.createElement(
+          Portal_js_1.Portal,
+          { portal: portal },
+          React.createElement(
+            react_1.FloatingPortal,
+            null,
+            React.createElement(
+              ThemeProvider_js_1.ThemeProvider,
+              { portalContainer: popoverElement },
+              React.createElement(
+                react_1.FloatingFocusManager,
+                {
+                  context: popover.context,
+                  modal: false,
+                  initialFocus: popover.refs.floating,
+                },
+                React.createElement(
+                  index_js_1.Box,
+                  {
+                    className: (0, classnames_1.default)(
+                      { 'iui-popover-surface': applyBackground },
+                      className,
+                    ),
+                    'aria-labelledby': !hasAriaLabel
+                      ? popover.refs.domReference.current?.id
+                      : undefined,
+                    ...popover.getFloatingProps(rest),
+                    ref: popoverRef,
+                  },
+                  content,
+                ),
+              ),
+            ),
+          ),
+        )
+      : null,
+  );
+});
+exports.default = exports.Popover;

package/cjs/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/cjs/core/RadioTiles/RadioTileGroup.js

@@ -7,8 +7,8 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../InputGroup/index.js');
-const index_js_2 = require('../utils/index.js');
+const InputGroup_js_1 = require('../InputGroup/InputGroup.js');
+const index_js_1 = require('../utils/index.js');
 /**
  * RadioTileGroup component to group RadioTile components together
  * @example
@@ -20,10 +20,10 @@ const index_js_2 = require('../utils/index.js');
 exports.RadioTileGroup = React.forwardRef((props, forwardedRef) => {
   const { children, label, ...rest } = props;
   return React.createElement(
-    index_js_1.InputGroup,
+    InputGroup_js_1.InputGroup,
     { label: label, ref: forwardedRef, ...rest },
     React.createElement(
-      index_js_2.Box,
+      index_js_1.Box,
       { className: 'iui-radio-tile-container' },
       children,
     ),

package/cjs/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/cjs/core/SearchBox/SearchBox.js

@@ -9,7 +9,8 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../Buttons/IconButton/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
+const Icon_js_1 = require('../Icon/Icon.js');
 const SearchBoxContext = React.createContext(undefined);
 const SearchBoxComponent = React.forwardRef((props, ref) => {
   const {
@@ -122,7 +123,7 @@ SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState';
 const SearchBoxIcon = React.forwardRef((props, ref) => {
   const { className, children, ...rest } = props;
   return React.createElement(
-    index_js_1.Icon,
+    Icon_js_1.Icon,
     {
       'aria-hidden': true,
       className: (0, classnames_1.default)('iui-search-icon', className),
@@ -162,7 +163,7 @@ const SearchBoxButton = React.forwardRef((props, ref) => {
     SearchBoxContext,
   );
   return React.createElement(
-    index_js_2.IconButton,
+    IconButton_js_1.IconButton,
     {
       styleType: 'borderless',
       size: sizeContext,

package/cjs/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;