@itwin/itwinui-react 3.16.1 → 5.0.0-alpha.1

package/esm/core/Dialog/DialogBackdrop.js

@@ -1,43 +0,0 @@
-import * as React from 'react';
-import { Backdrop } from '../Backdrop/Backdrop.js';
-import { useMergedRefs } from '../../utils/index.js';
-import { useDialogContext } from './DialogContext.js';
-import cx from 'classnames';
-export const DialogBackdrop = React.forwardRef((props, ref) => {
-  let dialogContext = useDialogContext();
-  let {
-    isVisible = dialogContext.isOpen,
-    isDismissible = dialogContext.isDismissible,
-    onClose = dialogContext.onClose,
-    closeOnExternalClick = dialogContext.closeOnExternalClick,
-    relativeTo = dialogContext.relativeTo,
-    onMouseDown,
-    className,
-    style,
-    ...rest
-  } = props;
-  let backdropRef = React.useRef(null);
-  let refs = useMergedRefs(backdropRef, ref);
-  let handleMouseDown = (event) => {
-    event.persist();
-    if (event.target !== backdropRef.current) return;
-    if (isDismissible && closeOnExternalClick && onClose) onClose(event);
-    onMouseDown?.(event);
-  };
-  return React.createElement(Backdrop, {
-    isVisible: isVisible,
-    className: cx(
-      {
-        'iui-backdrop-fixed': 'viewport' === relativeTo,
-      },
-      className,
-    ),
-    ref: refs,
-    onMouseDown: handleMouseDown,
-    style: {
-      pointerEvents: 'auto',
-      ...style,
-    },
-    ...rest,
-  });
-});

package/esm/core/Dialog/DialogButtonBar.d.ts

@@ -1,9 +0,0 @@
-/**
- * Container for Buttons in `Dialog`. Recommended to be used as a child of `Dialog`.
- * @example
- * <Dialog.ButtonBar>
- *   <Button styleType='high-visibility'>Confirm</Button>
- *   <Button>Close</Button>
- * </Dialog.ButtonBar>
- */
-export declare const DialogButtonBar: import("../../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;

package/esm/core/Dialog/DialogButtonBar.js

@@ -1,2 +0,0 @@
-import { polymorphic } from '../../utils/index.js';
-export const DialogButtonBar = polymorphic.div('iui-dialog-button-bar');

package/esm/core/Dialog/DialogContent.d.ts

@@ -1,8 +0,0 @@
-/**
- * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
- * @example
- * <Dialog.Content>
- *   My dialog content
- * </Dialog.Content>
- */
-export declare const DialogContent: import("../../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;

package/esm/core/Dialog/DialogContent.js

@@ -1,2 +0,0 @@
-import { polymorphic } from '../../utils/index.js';
-export const DialogContent = polymorphic.div('iui-dialog-content');

package/esm/core/Dialog/DialogContext.d.ts

@@ -1,93 +0,0 @@
-import * as React from 'react';
-import type { PortalProps } from '../../utils/index.js';
-export type DialogContextProps = {
-    /**
-     * Flag whether dialog should be shown.
-     *
-     * It is recommended to directly pass the boolean condition to this prop instead of rendering the `Dialog`
-     * conditionally with `isOpen` hard-coded to `true`. One benefit of this is getting an exit animation.
-     *
-     * @default false
-     */
-    isOpen?: boolean;
-    /**
-     * Handler that is called when dialog is closed.
-     */
-    onClose?: (event?: React.SyntheticEvent) => void;
-    /**
-     * Flag whether dialog is dismissible. If false, you can't close it.
-     * @default true
-     */
-    isDismissible?: boolean;
-    /**
-     * Flag whether dialog should be closed on backdrop press.
-     * @default false
-     */
-    closeOnExternalClick?: boolean;
-    /**
-     * Flag whether dialog should be closed on Escape key press.
-     * @default true
-     */
-    closeOnEsc?: boolean;
-    /**
-     * Prevents focus from leaving the dialog. This is useful when the dialog is modal.
-     *
-     * Setting this prop to `true` will also set `setFocus` to `true`.
-     *
-     * @default false
-     */
-    trapFocus?: boolean;
-    /**
-     * If true, focuses the dialog.
-     *
-     * Defaults to `true` if `trapFocus` is set to `true`, otherwise defaults to `false`.
-     */
-    setFocus?: boolean;
-    /**
-     * Prevents body from being scrollable. This is useful when the dialog is modal.
-     * @default false
-     */
-    preventDocumentScroll?: boolean;
-    /**
-     * Flag whether dialog is draggable.
-     *
-     * If you want to make dialog draggable relatively to the container, you should use set `relativeTo` to `container`.
-     *
-     * @default false
-     */
-    isDraggable?: boolean;
-    /**
-     * Flag whether dialog is resizable.
-     * @default false
-     */
-    isResizable?: boolean;
-    /**
-     * Whether dialog should be positioned relatively to a container or the viewport.
-     *
-     * Using `'container'` will absolutely position this dialog relative to the closest positioned ancestor.
-     * In other words, you must place the dialog as a child of an element that has `position` set to
-     * something other than `static`, e.g. `position: relative`.
-     * @default 'viewport'
-     */
-    relativeTo?: 'container' | 'viewport';
-    /**
-     * If true, the dialog will be portaled into a <div> inside the nearest `ThemeProvider`.
-     * Recommended to set to true when for modal dialogs that use `relativeTo='viewport'`.
-     *
-     * Can be set to an object with a `to` property to portal into a specific element.
-     * If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).
-     *
-     * Defaults to false if using `Dialog` and true if using `Modal`.
-     */
-    portal?: PortalProps['portal'];
-    /**
-     * Dialog root ref. For internal use.
-     */
-    dialogRootRef?: React.RefObject<HTMLDivElement>;
-    /**
-     * Determines the positioning of Dialog on page.
-     */
-    placement?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-};
-export declare const DialogContext: React.Context<DialogContextProps | undefined>;
-export declare const useDialogContext: () => DialogContextProps;

package/esm/core/Dialog/DialogContext.js

@@ -1,3 +0,0 @@
-import * as React from 'react';
-export const DialogContext = React.createContext(void 0);
-export const useDialogContext = () => React.useContext(DialogContext) || {};

package/esm/core/Dialog/DialogDragContext.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-export type DialogDragContextProps = {
-    onPointerDown?: (e: React.PointerEvent<HTMLElement>) => void;
-};
-export declare const DialogDragContext: React.Context<DialogDragContextProps | undefined>;
-export declare const useDialogDragContext: () => {
-    onPointerDown?: (e: React.PointerEvent<HTMLElement>) => void;
-};

package/esm/core/Dialog/DialogDragContext.js

@@ -1,8 +0,0 @@
-import * as React from 'react';
-export const DialogDragContext = React.createContext(void 0);
-export const useDialogDragContext = () => {
-  let context = React.useContext(DialogDragContext);
-  return {
-    ...context,
-  };
-};

package/esm/core/Dialog/DialogMain.d.ts

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import type { DialogContextProps } from './DialogContext.js';
-export type DialogMainProps = {
-    /**
-     * Type of the dialog.
-     * @default 'default'
-     */
-    styleType?: 'default' | 'fullPage';
-    /**
-     * Content of the dialog.
-     */
-    children: React.ReactNode;
-} & Omit<DialogContextProps, 'closeOnExternalClick' | 'dialogRootRef'>;
-/**
- * Dialog component which can wrap any content.
- * @example
- * <Dialog.Main>
- *   <Dialog.TitleBar>
- *     My dialog title
- *   </Dialog.TitleBar>
- *   <Dialog.Content>
- *     Here is my dialog content
- *   </Dialog.Content>
- *   <Dialog.ButtonBar>
- *     <Button styleType='high-visibility'>
- *       Primary button
- *     </Button>
- *     <Button>
- *       Secondary button
- *     </Button>
- *   </Dialog.ButtonBar>
- * </Dialog.Main>
- */
-export declare const DialogMain: PolymorphicForwardRefComponent<"div", DialogMainProps>;

package/esm/core/Dialog/DialogMain.js

@@ -1,178 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import {
-  FocusTrap,
-  getTranslateValuesFromElement,
-  Resizer,
-  useMergedRefs,
-  useLayoutEffect,
-  Box,
-  ShadowRoot,
-} from '../../utils/index.js';
-import { useDialogContext } from './DialogContext.js';
-import { Transition } from 'react-transition-group';
-import { DialogDragContext } from './DialogDragContext.js';
-import { useDragAndDrop } from '../../utils/hooks/useDragAndDrop.js';
-export const DialogMain = React.forwardRef((props, ref) => {
-  let dialogContext = useDialogContext();
-  let {
-    className,
-    children,
-    styleType = 'default',
-    isOpen = dialogContext.isOpen,
-    isDismissible = dialogContext.isDismissible,
-    onClose = dialogContext.onClose,
-    closeOnEsc = dialogContext.closeOnEsc,
-    trapFocus = dialogContext.trapFocus,
-    setFocus = dialogContext.setFocus,
-    preventDocumentScroll = dialogContext.preventDocumentScroll,
-    onKeyDown,
-    isDraggable = dialogContext.isDraggable,
-    isResizable = dialogContext.isResizable,
-    style: propStyle,
-    placement = dialogContext.placement,
-    ...rest
-  } = props;
-  let [style, setStyle] = React.useState();
-  let dialogRef = React.useRef(null);
-  let hasBeenResized = React.useRef(false);
-  let previousFocusedElement = React.useRef();
-  let originalBodyOverflow = React.useRef('');
-  React.useEffect(() => {
-    if (isOpen) originalBodyOverflow.current = document.body.style.overflow;
-  }, [isOpen]);
-  React.useEffect(() => {
-    let ownerDocument = dialogRef.current?.ownerDocument;
-    if (
-      !ownerDocument ||
-      !preventDocumentScroll ||
-      'hidden' === originalBodyOverflow.current
-    )
-      return;
-    if (isOpen) ownerDocument.body.style.overflow = 'hidden';
-    else ownerDocument.body.style.overflow = originalBodyOverflow.current;
-    return () => {
-      ownerDocument.body.style.overflow = originalBodyOverflow.current;
-    };
-  }, [isOpen, preventDocumentScroll]);
-  let handleKeyDown = (event) => {
-    if (event.altKey) return;
-    event.persist();
-    if (isDismissible && closeOnEsc && 'Escape' === event.key && onClose)
-      onClose(event);
-    onKeyDown?.(event);
-  };
-  let { onPointerDown, transform } = useDragAndDrop(
-    dialogRef,
-    dialogContext.dialogRootRef,
-    isDraggable,
-  );
-  let handlePointerDown = React.useCallback(
-    (event) => {
-      if (isDraggable) onPointerDown(event);
-    },
-    [isDraggable, onPointerDown],
-  );
-  useLayoutEffect(() => {
-    if (!isDraggable || !isOpen) return;
-    let [translateX, translateY] = getTranslateValuesFromElement(
-      dialogRef.current,
-    );
-    setStyle((oldStyle) => ({
-      ...oldStyle,
-      insetInlineStart: dialogRef.current?.offsetLeft,
-      insetBlockStart: dialogRef.current?.offsetTop,
-      transform: `translate(${translateX}px,${translateY}px)`,
-    }));
-  }, [isDraggable, isOpen]);
-  let setResizeStyle = React.useCallback((newStyle) => {
-    setStyle((oldStyle) => ({
-      ...oldStyle,
-      ...newStyle,
-    }));
-  }, []);
-  let content = React.createElement(
-    Box,
-    {
-      className: cx(
-        'iui-dialog',
-        {
-          'iui-dialog-default': 'default' === styleType,
-          'iui-dialog-full-page': 'fullPage' === styleType,
-          'iui-dialog-visible': isOpen,
-          'iui-dialog-draggable': isDraggable,
-        },
-        className,
-      ),
-      role: 'dialog',
-      ref: useMergedRefs(dialogRef, ref),
-      onKeyDown: handleKeyDown,
-      tabIndex: -1,
-      'data-iui-placement': placement,
-      style: {
-        transform,
-        ...style,
-        ...propStyle,
-      },
-      ...rest,
-    },
-    React.createElement(
-      ShadowRoot,
-      null,
-      React.createElement('slot', null),
-      isResizable &&
-        React.createElement(Resizer, {
-          elementRef: dialogRef,
-          containerRef: dialogContext.dialogRootRef,
-          onResizeStart: () => {
-            if (!hasBeenResized.current) {
-              hasBeenResized.current = true;
-              setResizeStyle({
-                maxInlineSize: '100%',
-              });
-            }
-          },
-          onResizeEnd: setResizeStyle,
-        }),
-    ),
-    children,
-  );
-  return React.createElement(
-    Transition,
-    {
-      in: isOpen,
-      appear: true,
-      timeout: {
-        exit: 600,
-      },
-      onEntered: () => {
-        previousFocusedElement.current =
-          dialogRef.current?.ownerDocument.activeElement;
-        setFocus &&
-          dialogRef.current?.focus({
-            preventScroll: true,
-          });
-      },
-      onExit: () => {
-        if (
-          dialogRef.current?.contains(
-            dialogRef.current?.ownerDocument.activeElement,
-          )
-        )
-          previousFocusedElement.current?.focus();
-      },
-      unmountOnExit: true,
-      nodeRef: dialogRef,
-    },
-    React.createElement(
-      DialogDragContext.Provider,
-      {
-        value: {
-          onPointerDown: handlePointerDown,
-        },
-      },
-      trapFocus && React.createElement(FocusTrap, null, content),
-      !trapFocus && content,
-    ),
-  );
-});

package/esm/core/Dialog/DialogTitleBar.d.ts

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import type { DialogContextProps } from './DialogContext.js';
-type DialogTitleBarProps = {
-    /**
-     * Dialog title bar content. If passed, then `title` prop is ignored.
-     */
-    children?: React.ReactNode;
-    /**
-     * Dialog title.
-     */
-    titleText?: React.ReactNode;
-} & Pick<DialogContextProps, 'isDismissible' | 'onClose' | 'isDraggable'>;
-/**
- * Dialog title bar. Recommended to be used as a child of `Dialog`.
- * @example
- * <Dialog.TitleBar title='My dialog title' />
- * @example
- * <Dialog.TitleBar>
- *   <Dialog.TitleBar.Title>My dialog title</Dialog.TitleBar.Title>
- *   <IconButton
- *     size='small'
- *     styleType='borderless'
- *     onClick={onClose}
- *     aria-label='Close'
- *   >
- *     <SvgClose />
- *   </IconButton>
- * </Dialog.TitleBar>
- */
-export declare const DialogTitleBar: PolymorphicForwardRefComponent<"div", DialogTitleBarProps> & {
-    Title: PolymorphicForwardRefComponent<"div", {}>;
-};
-export {};

package/esm/core/Dialog/DialogTitleBar.js

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { SvgClose, mergeEventHandlers, Box } from '../../utils/index.js';
-import { IconButton } from '../Buttons/IconButton.js';
-import { useDialogContext } from './DialogContext.js';
-import { DialogTitleBarTitle } from './DialogTitleBarTitle.js';
-import { useDialogDragContext } from './DialogDragContext.js';
-export const DialogTitleBar = Object.assign(
-  React.forwardRef((props, ref) => {
-    let dialogContext = useDialogContext();
-    let {
-      children,
-      titleText,
-      isDismissible = dialogContext.isDismissible,
-      onClose = dialogContext.onClose,
-      isDraggable = dialogContext.isDraggable,
-      className,
-      onPointerDown: onPointerDownProp,
-      ...rest
-    } = props;
-    let { onPointerDown } = useDialogDragContext();
-    return React.createElement(
-      Box,
-      {
-        className: cx('iui-dialog-title-bar', className, {
-          'iui-dialog-title-bar-filled': isDraggable,
-        }),
-        ref: ref,
-        onPointerDown: mergeEventHandlers(onPointerDownProp, onPointerDown),
-        ...rest,
-      },
-      children
-        ? children
-        : React.createElement(
-            React.Fragment,
-            null,
-            React.createElement(DialogTitleBarTitle, null, titleText),
-            isDismissible &&
-              React.createElement(
-                IconButton,
-                {
-                  size: 'small',
-                  styleType: 'borderless',
-                  onClick: onClose,
-                  'aria-label': 'Close',
-                  'data-iui-shift': 'right',
-                },
-                React.createElement(SvgClose, null),
-              ),
-          ),
-    );
-  }),
-  {
-    Title: DialogTitleBarTitle,
-  },
-);

package/esm/core/Dialog/DialogTitleBarTitle.d.ts

@@ -1,8 +0,0 @@
-/**
- * Dialog title bar. Recommended to be used as a child of `Dialog`.
- * @example
- * <Dialog.TitleBar>
- *   <Dialog.TitleBar.Title>My dialog title</Dialog.TitleBar.Title>
- * </Dialog.TitleBar>
- */
-export declare const DialogTitleBarTitle: import("../../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;

package/esm/core/Dialog/DialogTitleBarTitle.js

@@ -1,2 +0,0 @@
-import { polymorphic } from '../../utils/index.js';
-export const DialogTitleBarTitle = polymorphic.div('iui-dialog-title');

package/esm/core/Divider/Divider.d.ts

@@ -1,13 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/props.js';
-type DividerProps = {
-    /**
-     * Sets the orientation of the divider
-     * @default 'horizontal'
-     */
-    orientation?: 'horizontal' | 'vertical';
-};
-/**
- * Shows a divider
- */
-export declare const Divider: PolymorphicForwardRefComponent<"hr", DividerProps>;
-export {};

package/esm/core/Divider/Divider.js

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { Box } from '../../utils/components/Box.js';
-export const Divider = React.forwardRef((props, ref) => {
-  let { className, orientation = 'horizontal', ...rest } = props;
-  return React.createElement(Box, {
-    as: 'hr',
-    className: cx('iui-divider', className),
-    'aria-orientation': 'vertical' === orientation ? 'vertical' : void 0,
-    ref: ref,
-    ...rest,
-  });
-});

package/esm/core/DropdownMenu/DropdownMenu.d.ts

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
-import { usePopover } from '../Popover/Popover.js';
-export type DropdownMenuProps = {
-    /**
-     * List of menu items. Recommended to use MenuItem component.
-     * You can pass function that takes argument `close` that closes the dropdown menu, or a list of MenuItems.
-     */
-    menuItems: ((close: () => void) => JSX.Element[]) | JSX.Element[] | JSX.Element;
-    /**
-     * ARIA role. Role of menu. For menu use 'menu', for select use 'listbox'.
-     * @default 'menu'
-     */
-    role?: string;
-    /**
-     * Child element to wrap dropdown with.
-     */
-    children: React.ReactNode;
-    /**
-     * Middleware options.
-     *
-     * By default, `hide` is enabled. If the menu gets hidden even when it shouldn't (e.g. some custom styles interfering
-     * with the trigger's hide detection) consider disabling the `hide` middleware.
-     *
-     * @see https://floating-ui.com/docs/middleware
-     */
-    middleware?: {
-        hide?: boolean;
-    };
-} & Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth'> & Pick<PortalProps, 'portal'>;
-/**
- * Dropdown menu component.
- * Built on top of the {@link Popover} component.
- * @example
- * const menuItems = (close: () => void) => [
- *   <MenuItem key={1} onClick={onClick(1, close)}>
- *     Item #1
- *   </MenuItem>,
- *   <MenuItem key={2} onClick={onClick(2, close)}>
- *     Item #2
- *   </MenuItem>,
- *   <MenuItem key={3} onClick={onClick(3, close)}>
- *     Item #3
- *   </MenuItem>,
- * ];
- * <DropdownMenu menuItems={menuItems}>
- *   <Button>Menu</Button>
- * </DropdownMenu>
- */
-export declare const DropdownMenu: PolymorphicForwardRefComponent<"div", DropdownMenuProps>;

package/esm/core/DropdownMenu/DropdownMenu.js

@@ -1,63 +0,0 @@
-import * as React from 'react';
-import { mergeEventHandlers, useControlledState } from '../../utils/index.js';
-import { Menu } from '../Menu/Menu.js';
-import { FloatingTree } from '@floating-ui/react';
-export const DropdownMenu = React.forwardRef((props, forwardedRef) =>
-  React.createElement(
-    FloatingTree,
-    null,
-    React.createElement(DropdownMenuContent, {
-      ref: forwardedRef,
-      ...props,
-    }),
-  ),
-);
-let DropdownMenuContent = React.forwardRef((props, forwardedRef) => {
-  let {
-    menuItems,
-    children,
-    role = 'menu',
-    visible: visibleProp,
-    placement = 'bottom-start',
-    matchWidth = false,
-    onVisibleChange,
-    portal = true,
-    middleware,
-    ...rest
-  } = props;
-  let [visible, setVisible] = useControlledState(
-    false,
-    visibleProp,
-    onVisibleChange,
-  );
-  let menuContent = React.useMemo(() => {
-    if ('function' == typeof menuItems)
-      return menuItems(() => setVisible(false));
-    return menuItems;
-  }, [menuItems, setVisible]);
-  return React.createElement(
-    Menu,
-    {
-      trigger: children,
-      onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
-        if (e.defaultPrevented) return;
-        if ('Tab' === e.key) setVisible(false);
-      }),
-      role: role,
-      ref: forwardedRef,
-      portal: portal,
-      popoverProps: React.useMemo(
-        () => ({
-          placement,
-          matchWidth,
-          visible,
-          onVisibleChange: setVisible,
-          middleware,
-        }),
-        [matchWidth, middleware, placement, setVisible, visible],
-      ),
-      ...rest,
-    },
-    menuContent,
-  );
-});