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

package/cjs/core/Select/Select.js

@@ -85,55 +85,27 @@ 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 +131,7 @@ const Select = (props) => {
           }
           if (isSingleOnChange(onChange, multiple)) {
             onChange?.(option.value);
-            setIsOpen(false);
+            hide();
           } else {
             onChange?.(option.value, isSelected ? 'removed' : 'added');
           }
@@ -188,7 +160,7 @@ 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,57 +175,42 @@ const Select = (props) => {
       label: item.label,
     });
   }, []);
+  const popover = (0, index_js_2.usePopover)({
+    visible: isOpen,
+    matchWidth: true,
+    closeOnOutsideClick: true,
+    ...popoverProps,
+    onVisibleChange: (open) => (open ? show() : hide()),
+  });
   return React.createElement(
-    index_js_2.Box,
-    {
-      className: (0, classnames_1.default)('iui-input-with-icon', className),
-      style: style,
-      ...rest,
-    },
+    React.Fragment,
+    null,
     React.createElement(
-      index_js_2.Popover,
+      index_js_2.Box,
       {
-        content: React.createElement(
-          index_js_1.Menu,
-          {
-            role: 'listbox',
-            className: (0, classnames_1.default)('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: (0, classnames_1.default)('iui-input-with-icon', className),
+        style: style,
+        ...rest,
+        ref: popover.refs.setPositionReference,
       },
       React.createElement(
         index_js_2.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: (0, index_js_2.useMergedRefs)(
+            selectRef,
+            popover.refs.setReference,
+          ),
           className: (0, classnames_1.default)(
             'iui-select-button',
             {
@@ -281,24 +238,48 @@ const Select = (props) => {
               selectedItemRenderer: selectedItemRenderer,
             }),
       ),
+      React.createElement(
+        index_js_2.Icon,
+        {
+          as: 'span',
+          'aria-hidden': true,
+          className: (0, classnames_1.default)('iui-end-icon', {
+            'iui-disabled': disabled,
+            'iui-open': isOpen,
+          }),
+        },
+        React.createElement(index_js_2.SvgCaretDownSmall, null),
+      ),
+      multiple
+        ? React.createElement(index_js_2.AutoclearingHiddenLiveRegion, {
+            text: liveRegionSelection,
+          })
+        : null,
     ),
-    React.createElement(
-      index_js_2.Icon,
-      {
-        as: 'span',
-        'aria-hidden': true,
-        className: (0, classnames_1.default)('iui-end-icon', {
-          'iui-disabled': disabled,
-          'iui-open': isOpen,
-        }),
-      },
-      React.createElement(index_js_2.SvgCaretDownSmall, null),
-    ),
-    multiple
-      ? React.createElement(index_js_2.AutoclearingHiddenLiveRegion, {
-          text: liveRegionSelection,
-        })
-      : null,
+    popover.open &&
+      React.createElement(
+        index_js_2.Portal,
+        null,
+        React.createElement(
+          index_js_1.Menu,
+          {
+            role: 'listbox',
+            className: (0, classnames_1.default)('iui-scroll', menuClassName),
+            id: `${uid}-menu`,
+            key: `${uid}-menu`,
+            ...popover.getFloatingProps({
+              style: menuStyle,
+              onKeyDown: ({ key }) => {
+                if (key === 'Tab') {
+                  hide();
+                }
+              },
+            }),
+            ref: popover.refs.setFloating,
+          },
+          menuItems,
+        ),
+      ),
   );
 };
 exports.Select = Select;

package/cjs/core/Table/columns/actionColumn.js

@@ -109,13 +109,9 @@ const ActionColumn = ({ columnManager = false } = {}) => {
         {
           ...dropdownMenuProps,
           menuItems: headerCheckBoxes,
-          onHide: (i) => {
-            setIsOpen(false);
-            dropdownMenuProps.onHide?.(i);
-          },
-          onShow: (i) => {
-            setIsOpen(true);
-            dropdownMenuProps.onShow?.(i);
+          onVisibleChange: (open) => {
+            setIsOpen(open);
+            dropdownMenuProps?.onVisibleChange?.(open);
           },
           className: (0, classnames_1.default)(
             'iui-scroll',

package/cjs/core/Table/filters/DateRangeFilter/DatePickerInput.js

@@ -69,54 +69,49 @@ const DatePickerInput = React.forwardRef((props, forwardedRef) => {
     [onChange, parseInput],
   );
   return React.createElement(
-    index_js_1.Popover,
-    {
-      content: React.createElement(index_js_2.DatePicker, {
-        date: date,
-        onChange: onDateSelected,
-        setFocus: true,
-        isDateDisabled: isDateDisabled,
-        localizedNames: localizedNames,
-      }),
-      placement: 'bottom',
-      visible: isVisible,
-      onClickOutside: (_, e) => {
-        if (!buttonRef.current?.contains(e.target)) {
-          close();
-        }
+    index_js_3.InputGrid,
+    { labelPlacement: 'inline', ...wrapperProps },
+    React.createElement(
+      index_js_4.Label,
+      {
+        as: 'label',
+        required: required,
+        disabled: disabled,
+        htmlFor: id,
+        ...labelProps,
       },
-      appendTo: 'parent',
-    },
+      label,
+    ),
     React.createElement(
-      index_js_3.InputGrid,
-      { labelPlacement: 'inline', ...wrapperProps },
+      index_js_5.InputWithDecorations,
+      { ...inputWrapperProps },
+      React.createElement(index_js_5.InputWithDecorations.Input, {
+        id: id,
+        value: inputValue,
+        onChange: onInputChange,
+        required: required,
+        disabled: disabled,
+        ref: forwardedRef,
+        ...rest,
+      }),
       React.createElement(
-        index_js_4.Label,
+        index_js_1.Popover,
         {
-          as: 'label',
-          required: required,
-          disabled: disabled,
-          htmlFor: id,
-          ...labelProps,
+          content: React.createElement(index_js_2.DatePicker, {
+            date: date,
+            onChange: onDateSelected,
+            setFocus: true,
+            isDateDisabled: isDateDisabled,
+            localizedNames: localizedNames,
+          }),
+          placement: 'bottom-end',
+          visible: isVisible,
+          onVisibleChange: setIsVisible,
+          closeOnOutsideClick: true,
         },
-        label,
-      ),
-      React.createElement(
-        index_js_5.InputWithDecorations,
-        { ...inputWrapperProps },
-        React.createElement(index_js_5.InputWithDecorations.Input, {
-          id: id,
-          value: inputValue,
-          onChange: onInputChange,
-          onClick: close,
-          required: required,
-          disabled: disabled,
-          ref: forwardedRef,
-          ...rest,
-        }),
         React.createElement(
           index_js_5.InputWithDecorations.Button,
-          { onClick: () => setIsVisible((v) => !v), ref: buttonRef },
+          { 'aria-label': 'Date picker', ref: buttonRef },
           React.createElement(index_js_1.SvgCalendar, null),
         ),
       ),

package/cjs/core/Table/filters/FilterToggle.js

@@ -42,7 +42,8 @@ const FilterToggle = (props) => {
           content: column.render('Filter', { close, setFilter, clearFilter }),
           placement: 'bottom-start',
           visible: isVisible,
-          onClickOutside: close,
+          onVisibleChange: setIsVisible,
+          closeOnOutsideClick: true,
         },
         React.createElement(
           index_js_2.IconButton,
@@ -53,8 +54,8 @@ const FilterToggle = (props) => {
               'iui-table-filter-button',
               className,
             ),
+            'aria-label': 'Filter',
             onClick: (e) => {
-              setIsVisible((v) => !v);
               // Prevents from triggering sort
               e.stopPropagation();
             },

package/cjs/core/Tile/Tile.js

@@ -227,32 +227,31 @@ const TileMoreOptions = React.forwardRef((props, forwardedRef) => {
   const { className, children = [], buttonProps, ...rest } = props;
   const [isMenuVisible, setIsMenuVisible] = React.useState(false);
   return React.createElement(
-    index_js_2.DropdownMenu,
+    index_js_1.Box,
     {
-      onShow: React.useCallback(() => setIsMenuVisible(true), []),
-      onHide: React.useCallback(() => setIsMenuVisible(false), []),
-      menuItems: (close) =>
-        children?.map((option) =>
-          React.cloneElement(option, {
-            onClick: (value) => {
-              close();
-              option.props.onClick?.(value);
-            },
-          }),
-        ),
+      className: (0, classnames_1.default)(
+        'iui-tile-more-options',
+        {
+          'iui-visible': isMenuVisible,
+        },
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
     },
     React.createElement(
-      index_js_1.Box,
+      index_js_2.DropdownMenu,
       {
-        className: (0, classnames_1.default)(
-          'iui-tile-more-options',
-          {
-            'iui-visible': isMenuVisible,
-          },
-          className,
-        ),
-        ref: forwardedRef,
-        ...rest,
+        onVisibleChange: setIsMenuVisible,
+        menuItems: (close) =>
+          children?.map((option) =>
+            React.cloneElement(option, {
+              onClick: (value) => {
+                close();
+                option.props.onClick?.(value);
+              },
+            }),
+          ),
       },
       React.createElement(
         index_js_3.IconButton,

package/cjs/core/index.d.ts

@@ -65,4 +65,4 @@ export { Anchor, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography/inde
 export { Stepper, WorkflowDiagram } from './Stepper/index.js';
 export type { StepProperties, StepperLocalization } from './Stepper/index.js';
 export { SearchBox } from './SearchBox/index.js';
-export { getUserColor, ColorValue, MiddleTextTruncation, LinkBox, LinkAction, Icon, Flex, VisuallyHidden, Divider, } from './utils/index.js';
+export { getUserColor, ColorValue, MiddleTextTruncation, LinkBox, LinkAction, Icon, Flex, VisuallyHidden, Divider, Popover, } from './utils/index.js';

package/cjs/core/index.js

@@ -102,7 +102,8 @@ exports.Tree =
   exports.Label =
   exports.InputGrid =
     void 0;
-exports.Divider =
+exports.Popover =
+  exports.Divider =
   exports.VisuallyHidden =
   exports.Flex =
   exports.Icon =
@@ -907,3 +908,9 @@ Object.defineProperty(exports, 'Divider', {
     return index_js_58.Divider;
   },
 });
+Object.defineProperty(exports, 'Popover', {
+  enumerable: true,
+  get: function () {
+    return index_js_58.Popover;
+  },
+});

package/cjs/core/utils/components/InputContainer.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-export type InputContainerProps<T extends React.ElementType = 'div'> = {
-    as?: T;
+import type { PolymorphicForwardRefComponent } from '../props.js';
+export type InputContainerProps = {
     label?: React.ReactNode;
     disabled?: boolean;
     required?: boolean;
@@ -11,9 +11,9 @@ export type InputContainerProps<T extends React.ElementType = 'div'> = {
     statusMessage?: React.ReactNode;
     inputId?: string;
     labelId?: string;
-} & React.ComponentPropsWithoutRef<T>;
+};
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
  */
-export declare const InputContainer: <T extends React.ElementType<any> = "div">(props: InputContainerProps<T>) => React.JSX.Element;
+export declare const InputContainer: PolymorphicForwardRefComponent<"div", InputContainerProps>;

package/cjs/core/utils/components/InputContainer.js

@@ -15,7 +15,7 @@ const index_js_2 = require('../../StatusMessage/index.js');
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
  */
-const InputContainer = (props) => {
+exports.InputContainer = React.forwardRef((props, forwardedRef) => {
   const {
     label,
     disabled,
@@ -39,12 +39,17 @@ const InputContainer = (props) => {
       'data-iui-status': status,
       'data-iui-label-placement': isLabelInline ? 'inline' : undefined,
       style: style,
+      ref: forwardedRef,
       ...rest,
     },
     label &&
       React.createElement(
         index_js_1.Label,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
           as: inputId && props.as !== 'label' ? 'label' : 'div',
           required: required,
           disabled: disabled,
@@ -63,5 +68,4 @@ const InputContainer = (props) => {
             message,
           ),
   );
-};
-exports.InputContainer = InputContainer;
+});

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

@@ -1,39 +1,125 @@
 import * as React from 'react';
-import type { TippyProps } from '@tippyjs/react';
-import type { Placement, Instance } from 'tippy.js';
-export type PopoverInstance = Instance;
-export type PopoverProps = {
+import type { Placement } from '@floating-ui/react';
+import type { PolymorphicForwardRefComponent } from '../index.js';
+import type { PortalProps } from './Portal.js';
+type PopoverOptions = {
+    /**
+     * Placement of the popover content.
+     * @default 'bottom-start'
+     */
+    placement?: Placement;
     /**
      * Controlled flag for whether the popover is visible.
      */
     visible?: boolean;
     /**
-     * Determines the events that cause the popover to show.
-     * Should not be used when `visible` is set.
-     * @see [tippy.js trigger prop](https://atomiks.github.io/tippyjs/v6/all-props/#trigger)
+     * Callback invoked every time the popover visibility changes as a result
+     * of internal logic. Should be used alongside `visible` prop.
      */
-    trigger?: string;
+    onVisibleChange?: (visible: boolean) => void;
     /**
-     * Placement of the popover content.
-     * @default 'bottom-start'
-     * @see [tippy.js placement prop](https://atomiks.github.io/tippyjs/v6/all-props/#placement).
+     * If true, the popover will close when clicking outside it.
      */
-    placement?: Placement;
-} & Omit<TippyProps, 'placement' | 'trigger' | 'visible'>;
-/**
- * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
- * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
- * @private
- */
-export declare const Popover: React.ForwardRefExoticComponent<Omit<PopoverProps, "ref"> & React.RefAttributes<unknown>>;
-/**
- * Plugin to hide Popover when either Esc key is pressed,
- * or when the content inside is not tabbable and Tab key is pressed.
- */
-export declare const hideOnEscOrTab: {
-    fn(instance: Instance): {
-        onShow(): void;
-        onHide(): void;
+    closeOnOutsideClick?: boolean;
+    /**
+     * Whether the popover should match the width of the trigger.
+     */
+    matchWidth?: 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';
+};
+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; /**
+         * Middleware options.
+         *
+         * @see https://floating-ui.com/docs/offset
+         */
+        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?: React.ReactNode;
+    children?: React.ReactNode;
+    applyBackground?: boolean;
+} & PortalProps & PopoverOptions;
+/**
+ * A utility component to help with positioning of floating content.
+ * Built on top of [`floating-ui`](https://floating-ui.com/)
+ */
+export declare const Popover: PolymorphicForwardRefComponent<"div", PopoverPublicProps>;
 export default Popover;