@itwin/itwinui-react 3.15.5 → 5.0.0-alpha.0

package/esm/core/Menu/MenuItem.js

@@ -1,132 +0,0 @@
-import * as React from 'react';
-import {
-  SvgCaretRightSmall,
-  useMergedRefs,
-  useId,
-  useWarningLogger,
-} from '../../utils/index.js';
-import { Menu, MenuContext } from './Menu.js';
-import { ListItem } from '../List/ListItem.js';
-import cx from 'classnames';
-export const MenuItem = React.forwardRef((props, forwardedRef) => {
-  let {
-    className,
-    children,
-    isSelected,
-    disabled,
-    value,
-    onClick: onClickProp,
-    sublabel,
-    size = sublabel ? 'large' : 'default',
-    icon,
-    startIcon = icon,
-    badge,
-    endIcon = badge,
-    role = 'menuitem',
-    subMenuItems = [],
-    ...rest
-  } = props;
-  let logWarning = useWarningLogger();
-  let parentMenu = React.useContext(MenuContext);
-  let menuItemRef = React.useRef(null);
-  let submenuId = useId();
-  let popoverProps = React.useMemo(
-    () => ({
-      placement: 'right-start',
-      interactions: {
-        click: true,
-        hover: true,
-        listNavigation: {
-          nested: subMenuItems.length > 0,
-          openOnArrowKeyDown: true,
-        },
-      },
-    }),
-    [subMenuItems.length],
-  );
-  let onClick = () => {
-    if (disabled) return;
-    onClickProp?.(value);
-  };
-  let handlers = {
-    onClick,
-  };
-  let focusableItemIndex = parentMenu?.focusableElements.findIndex(
-    (el) => el === menuItemRef.current,
-  );
-  let trigger = React.createElement(
-    ListItem,
-    {
-      as: 'button',
-      type: 'button',
-      className: cx('iui-button-base', className),
-      actionable: true,
-      size: size,
-      active: isSelected,
-      disabled: disabled,
-      ref: useMergedRefs(menuItemRef, forwardedRef),
-      role: role,
-      tabIndex: isSelected ? 0 : -1,
-      'aria-selected': isSelected,
-      'aria-haspopup': subMenuItems.length > 0 ? 'true' : void 0,
-      'aria-controls': subMenuItems.length > 0 ? submenuId : void 0,
-      'aria-disabled': disabled,
-      ...(parentMenu?.popoverGetItemProps != null
-        ? parentMenu.popoverGetItemProps({
-            focusableItemIndex,
-            userProps: handlers,
-          })
-        : handlers),
-      ...rest,
-    },
-    startIcon &&
-      React.createElement(
-        ListItem.Icon,
-        {
-          as: 'span',
-          'aria-hidden': true,
-        },
-        startIcon,
-      ),
-    React.createElement(
-      ListItem.Content,
-      null,
-      React.createElement('div', null, children),
-      sublabel && React.createElement(ListItem.Description, null, sublabel),
-    ),
-    !endIcon &&
-      subMenuItems.length > 0 &&
-      React.createElement(
-        ListItem.Icon,
-        {
-          as: 'span',
-          'aria-hidden': true,
-        },
-        React.createElement(SvgCaretRightSmall, null),
-      ),
-    endIcon &&
-      React.createElement(
-        ListItem.Icon,
-        {
-          as: 'span',
-          'aria-hidden': true,
-        },
-        endIcon,
-      ),
-  );
-  return React.createElement(
-    React.Fragment,
-    null,
-    subMenuItems.length > 0 && !disabled
-      ? React.createElement(
-          Menu,
-          {
-            id: submenuId,
-            trigger: trigger,
-            popoverProps: popoverProps,
-          },
-          subMenuItems,
-        )
-      : trigger,
-  );
-});

package/esm/core/Menu/MenuItemSkeleton.d.ts

@@ -1,30 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type MenuItemSkeletonProps = {
-    /**
-     * Flag whether to show skeleton for sub-label.
-     */
-    hasSublabel?: boolean;
-    /**
-     * Flag whether to show skeleton for icon.
-     */
-    hasIcon?: boolean;
-    /**
-     * Skeleton content width.
-     */
-    contentWidth?: string;
-    /**
-     * Translated strings used for accessibility.
-     */
-    translatedStrings?: {
-        /**
-         * Label for loading state. Defaults to "Loading…".
-         * It is only visible for the screen readers.
-         */
-        loading: string;
-    };
-};
-/**
- * Menu item that uses skeletons to indicate loading state.
- */
-export declare const MenuItemSkeleton: PolymorphicForwardRefComponent<"div", MenuItemSkeletonProps>;
-export {};

package/esm/core/Menu/MenuItemSkeleton.js

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { Box } from '../../utils/index.js';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
-export const MenuItemSkeleton = React.forwardRef((props, forwardedRef) => {
-  let {
-    hasSublabel,
-    hasIcon,
-    contentWidth,
-    translatedStrings = {
-      loading: 'Loading…',
-    },
-    className,
-    style,
-    ...rest
-  } = props;
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-menu-item-skeleton', className),
-      'data-iui-size': hasSublabel && 'large',
-      style: {
-        '--iui-menu-item-content-skeleton-max-width': contentWidth,
-        ...style,
-      },
-      ref: forwardedRef,
-      ...rest,
-    },
-    hasIcon &&
-      React.createElement(Box, {
-        className: 'iui-icon iui-skeleton',
-        'aria-hidden': true,
-      }),
-    React.createElement(
-      Box,
-      {
-        as: 'span',
-        className: 'iui-content',
-      },
-      React.createElement(Box, {
-        className: 'iui-menu-label iui-skeleton',
-        'aria-hidden': true,
-      }),
-      hasSublabel &&
-        React.createElement(Box, {
-          className: 'iui-menu-description iui-skeleton',
-          'aria-hidden': true,
-        }),
-      React.createElement(VisuallyHidden, null, translatedStrings.loading),
-    ),
-  );
-});

package/esm/core/Modal/Modal.d.ts

@@ -1,80 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
-import type { DialogMainProps } from '../Dialog/DialogMain.js';
-type ModalProps = {
-    /**
-     * Modal title.
-     */
-    title: React.ReactNode;
-    /**
-     * Handler that is called when Modal is closed.
-     */
-    onClose?: (event?: React.SyntheticEvent) => void;
-    /**
-     * Flag whether modal is dismissible. If false, you can't close it.
-     * @default true
-     */
-    isDismissible?: boolean;
-    /**
-     * Flag whether modal should be closed on background overlay press.
-     * @default true
-     */
-    closeOnExternalClick?: boolean;
-    /**
-     * Flag whether modal should be closed on Escape key press.
-     * @default true
-     */
-    closeOnEsc?: boolean;
-    /**
-     * Handle key press. Returns the keyboard event.
-     */
-    onKeyDown?: React.KeyboardEventHandler;
-    /**
-     * If true, the dialog will be portaled into a <div> inside the nearest `ThemeProvider`.
-     *
-     * 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).
-     *
-     * @default true
-     */
-    portal?: PortalProps['portal'];
-    /**
-     * Content of the modal.
-     */
-    children: React.ReactNode;
-    /**
-     * Props for customizing the title bar element.
-     */
-    titleBarProps?: React.ComponentPropsWithRef<'div'>;
-    /**
-     * Props for customizing the dialog-wrapper element.
-     */
-    wrapperProps?: React.ComponentPropsWithoutRef<'div'>;
-    /**
-     * Props for customizing the backdrop element.
-     */
-    backdropProps?: React.ComponentPropsWithRef<'div'>;
-} & Pick<DialogMainProps, 'isOpen' | 'styleType'>;
-/**
- * Modal component which can wrap any content.
- * @example
- * <Modal
- *   isOpen={true}
- *   title='My modal'
- *   onClose={onClose}
- * >
- *   <ModalContent>
- *     Here is my modal content
- *   </ModalContent>
- *   <ModalButtonBar>
- *     <Button styleType='high-visibility'>
- *       Primary button
- *     </Button>
- *     <Button>
- *       Secondary button
- *     </Button>
- *   </ModalButtonBar>
- * </Modal>
- */
-export declare const Modal: PolymorphicForwardRefComponent<"div", ModalProps>;
-export {};

package/esm/core/Modal/Modal.js

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { Dialog } from '../Dialog/Dialog.js';
-export const Modal = React.forwardRef((props, forwardedRef) => {
-  let {
-    isOpen = false,
-    isDismissible = true,
-    closeOnEsc = true,
-    closeOnExternalClick = true,
-    onClose,
-    title,
-    children,
-    portal = true,
-    wrapperProps,
-    backdropProps,
-    titleBarProps,
-    ...rest
-  } = props;
-  return React.createElement(
-    Dialog,
-    {
-      isOpen: isOpen,
-      closeOnEsc: closeOnEsc,
-      closeOnExternalClick: closeOnExternalClick,
-      isDismissible: isDismissible,
-      onClose: onClose,
-      preventDocumentScroll: true,
-      trapFocus: true,
-      setFocus: true,
-      ref: forwardedRef,
-      portal: portal,
-      ...wrapperProps,
-    },
-    React.createElement(Dialog.Backdrop, backdropProps),
-    React.createElement(
-      Dialog.Main,
-      {
-        'aria-modal': true,
-        ...rest,
-      },
-      React.createElement(Dialog.TitleBar, {
-        titleText: title,
-        ...titleBarProps,
-      }),
-      children,
-    ),
-  );
-});

package/esm/core/Modal/ModalButtonBar.d.ts

@@ -1,4 +0,0 @@
-/**
- * Container for Buttons in modal.
- */
-export declare const ModalButtonBar: import("../../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;

package/esm/core/Modal/ModalButtonBar.js

@@ -1,2 +0,0 @@
-import { DialogButtonBar } from '../Dialog/DialogButtonBar.js';
-export const ModalButtonBar = Object.assign({}, DialogButtonBar);

package/esm/core/Modal/ModalContent.d.ts

@@ -1,4 +0,0 @@
-/**
- * Container for content in `Modal`.
- */
-export declare const ModalContent: import("../../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;

package/esm/core/Modal/ModalContent.js

@@ -1,2 +0,0 @@
-import { DialogContent } from '../Dialog/DialogContent.js';
-export const ModalContent = Object.assign({}, DialogContent);

package/esm/core/NonIdealState/ErrorPage.d.ts

@@ -1,61 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-/** @deprecated Use `NonIdealState` instead. */
-export type ErrorPageType = '300' | '301' | '302' | '303' | '304' | '305' | '307' | '308' | '401' | '403' | '404' | '408' | '500' | '502' | '503' | '504' | 'generic';
-/** @deprecated Use `NonIdealState` instead. */
-export type ErrorTypeTranslations = {
-    badGateway: string;
-    error: string;
-    forbidden: string;
-    internalServerError: string;
-    redirect?: string;
-    pageNotFound: string;
-    serviceUnavailable: string;
-    timedOut?: string;
-    unauthorized: string;
-};
-type ErrorPageProps = {
-    /**
-     * Type of error controls image and default text
-     */
-    errorType: ErrorPageType;
-    /**
-     * Primary heading for the error page
-     */
-    errorName?: string;
-    /**
-     * Secondary text to explain the error
-     * Can include html in order to provide a hyperlink
-     * E.g. `Please visit <a href="https://www.bentley.com/help">our support page</a> for help.`
-     */
-    errorMessage?: React.ReactNode;
-    /**
-     * On click handler for primary button, if left out no primary button will be displayed
-     */
-    primaryButtonHandle?: () => void;
-    /**
-     * Text for primary button, if left out no primary button will be displayed
-     */
-    primaryButtonLabel?: string;
-    /**
-     * On click handler for secondary button, if left out no secondary button will be displayed
-     */
-    secondaryButtonHandle?: () => void;
-    /**
-     * Text for secondary button, if left out no secondary button will be displayed
-     */
-    secondaryButtonLabel?: string;
-    /**
-     * Used to translate default error messages, if no specific @errorName passed in
-     */
-    translatedErrorMessages?: ErrorTypeTranslations;
-};
-/**
- * @deprecated Use `NonIdealState` instead for a smaller client bundle.
- *
- * A stylized display to communicate common http errors.
- * @example
- * <ErrorPage errorType='401' />
- */
-export declare const ErrorPage: PolymorphicForwardRefComponent<"div", ErrorPageProps>;
-export {};

package/esm/core/NonIdealState/ErrorPage.js

@@ -1,166 +0,0 @@
-import * as React from 'react';
-import { Button } from '../Buttons/Button.js';
-import { NonIdealState } from './NonIdealState.js';
-import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
-let Svg401 = React.lazy(
-  () => import('@itwin/itwinui-illustrations-react/Svg401'),
-);
-let Svg403 = React.lazy(
-  () => import('@itwin/itwinui-illustrations-react/Svg403'),
-);
-let Svg404 = React.lazy(
-  () => import('@itwin/itwinui-illustrations-react/Svg404'),
-);
-let Svg500 = React.lazy(
-  () => import('@itwin/itwinui-illustrations-react/Svg500'),
-);
-let Svg502 = React.lazy(
-  () => import('@itwin/itwinui-illustrations-react/Svg502'),
-);
-let Svg503 = React.lazy(
-  () => import('@itwin/itwinui-illustrations-react/Svg503'),
-);
-let SvgError = React.lazy(
-  () => import('@itwin/itwinui-illustrations-react/SvgError'),
-);
-let SvgRedirect = React.lazy(
-  () => import('@itwin/itwinui-illustrations-react/SvgRedirect'),
-);
-let SvgTimedOut = React.lazy(
-  () => import('@itwin/itwinui-illustrations-react/SvgTimedOut'),
-);
-export const ErrorPage = React.forwardRef((props, forwardedRef) => {
-  let {
-    errorType,
-    errorName,
-    errorMessage,
-    primaryButtonHandle,
-    primaryButtonLabel,
-    secondaryButtonHandle,
-    secondaryButtonLabel,
-    translatedErrorMessages,
-    ...rest
-  } = props;
-  let defaultErrorMessages = {
-    badGateway: 'Bad gateway',
-    error: 'Error',
-    forbidden: 'Forbidden',
-    internalServerError: 'Internal server error',
-    redirect: 'Redirect',
-    pageNotFound: 'Page not found',
-    serviceUnavailable: 'Service unavailable',
-    timedOut: 'Timed out',
-    unauthorized: 'Unauthorized',
-    ...translatedErrorMessages,
-  };
-  function getErrorIcon() {
-    switch (errorType) {
-      case '300':
-      case '301':
-      case '302':
-      case '303':
-      case '304':
-      case '305':
-      case '307':
-      case '308':
-        return React.createElement(SvgRedirect, null);
-      case '401':
-        return React.createElement(Svg401, null);
-      case '403':
-        return React.createElement(Svg403, null);
-      case '404':
-        return React.createElement(Svg404, null);
-      case '408':
-      case '504':
-        return React.createElement(SvgTimedOut, null);
-      case '500':
-        return React.createElement(Svg500, null);
-      case '502':
-        return React.createElement(Svg502, null);
-      case '503':
-        return React.createElement(Svg503, null);
-      case 'generic':
-      default:
-        return React.createElement(SvgError, null);
-    }
-  }
-  function getHeadingMessage() {
-    if (errorName) return errorName;
-    switch (errorType) {
-      case '300':
-      case '301':
-      case '302':
-      case '303':
-      case '304':
-      case '305':
-      case '307':
-      case '308':
-        return defaultErrorMessages.redirect || '';
-      case '401':
-        return defaultErrorMessages.unauthorized;
-      case '403':
-        return defaultErrorMessages.forbidden;
-      case '404':
-        return defaultErrorMessages.pageNotFound;
-      case '408':
-      case '504':
-        return defaultErrorMessages.timedOut || '';
-      case '500':
-        return defaultErrorMessages.internalServerError;
-      case '502':
-        return defaultErrorMessages.badGateway;
-      case '503':
-        return defaultErrorMessages.serviceUnavailable;
-      case 'generic':
-      default:
-        return defaultErrorMessages.error;
-    }
-  }
-  function getPrimaryButton() {
-    if (!primaryButtonHandle || !primaryButtonLabel) return null;
-    return React.createElement(
-      Button,
-      {
-        styleType: 'high-visibility',
-        onClick: primaryButtonHandle,
-      },
-      primaryButtonLabel,
-    );
-  }
-  function getSecondaryButton() {
-    if (!secondaryButtonHandle || !secondaryButtonLabel) return null;
-    return React.createElement(
-      Button,
-      {
-        styleType: 'default',
-        onClick: secondaryButtonHandle,
-      },
-      secondaryButtonLabel,
-    );
-  }
-  function getActions() {
-    let primaryButton = getPrimaryButton();
-    let secondaryButton = getSecondaryButton();
-    if (!primaryButton && !secondaryButton) return null;
-    return React.createElement(
-      React.Fragment,
-      null,
-      primaryButton,
-      secondaryButton,
-    );
-  }
-  return React.createElement(NonIdealState, {
-    svg: React.createElement(
-      React.Suspense,
-      {
-        fallback: React.createElement(ProgressRadial, null),
-      },
-      getErrorIcon(),
-    ),
-    heading: getHeadingMessage(),
-    description: errorMessage,
-    actions: getActions(),
-    ref: forwardedRef,
-    ...rest,
-  });
-});

package/esm/core/NonIdealState/NonIdealState.d.ts

@@ -1,66 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type NonIdealStateProps = {
-    /**
-     * An svg component, preferably from `@itwin/itwinui-illustrations-react`.
-     *
-     * @example
-     * import { Svg404 } from '@itwin/itwinui-illustrations-react';
-     * <NonIdealState svg={<Svg404 />} heading='Not found' />
-     */
-    svg: React.ReactNode;
-    /**
-     * Primary heading for the `NonIdealState`
-     */
-    heading?: React.ReactNode;
-    /**
-     * Secondary text to explain the error
-     * Can include html in order to provide a hyperlink
-     *
-     * @example
-     * <>
-     *   Please visit <Anchor href="https://www.bentley.com/help">our support page</Anchor> for help.
-     * </>
-     */
-    description?: React.ReactNode;
-    /**
-     * Actions to provide the user with a way to recover from the error.
-     * Typically should be a primary and secondary button.
-     *
-     * @example
-     * <NonIdealState
-     *   actions={
-     *     <>
-     *       <Button styleType={'high-visibility'}>Retry</Button>
-     *       <Button>Contact us</Button>
-     *     </>
-     *   }
-     * />
-     */
-    actions?: React.ReactNode;
-    /**
-     *  Allows props to be passed for non-ideal-state-illustration
-     */
-    illustrationProps?: React.ComponentProps<'div'>;
-    /**
-     *  Allows props to be passed for non-ideal-state-title
-     */
-    titleProps?: React.ComponentProps<'div'>;
-    /**
-     *  Allows props to be passed for non-ideal-state-description
-     */
-    descriptionProps?: React.ComponentProps<'div'>;
-    /**
-     *  Allows props to be passed for non-ideal-state-action
-     */
-    actionsProps?: React.ComponentProps<'div'>;
-};
-/**
- * A stylized display to communicate common http errors and other non-ideal states.
- * Works well with svgs from `@itwin/itwinui-illustrations-react`.
- *
- * @example
- * <NonIdealState svg={<Svg404 />} heading='Not found' />
- */
-export declare const NonIdealState: PolymorphicForwardRefComponent<"div", NonIdealStateProps>;
-export {};