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

package/esm/core/NonIdealState/NonIdealState.js

@@ -1,70 +0,0 @@
-import * as React from 'react';
-import { Box } from '../../utils/index.js';
-import cx from 'classnames';
-export const NonIdealState = React.forwardRef((props, forwardedRef) => {
-  let {
-    className,
-    svg,
-    heading,
-    description,
-    actions,
-    illustrationProps,
-    titleProps,
-    descriptionProps,
-    actionsProps,
-    ...rest
-  } = props;
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-non-ideal-state', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    React.createElement(
-      Box,
-      {
-        as: 'div',
-        ...illustrationProps,
-        className: cx(
-          'iui-non-ideal-state-illustration',
-          illustrationProps?.className,
-        ),
-      },
-      svg,
-    ),
-    heading &&
-      React.createElement(
-        Box,
-        {
-          as: 'div',
-          ...titleProps,
-          className: cx('iui-non-ideal-state-title', titleProps?.className),
-        },
-        heading,
-      ),
-    description &&
-      React.createElement(
-        Box,
-        {
-          as: 'div',
-          ...descriptionProps,
-          className: cx(
-            'iui-non-ideal-state-description',
-            descriptionProps?.className,
-          ),
-        },
-        description,
-      ),
-    actions &&
-      React.createElement(
-        Box,
-        {
-          as: 'div',
-          ...actionsProps,
-          className: cx('iui-non-ideal-state-actions', actionsProps?.className),
-        },
-        actions,
-      ),
-  );
-});

package/esm/core/NotificationMarker/NotificationMarker.d.ts

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type NotificationMarkerProps = {
-    /**
-     * Content of the NotificationMarker.
-     */
-    children: React.ReactNode;
-    /**
-     * Status of notification
-     *
-     * - 'primary' = blue,
-     * - 'positive' = green,
-     * - 'warning' = orange,
-     * - 'negative' = red,
-     * - 'white' = white (useful for notifications in buttons with `style` = `high-visibility` | `cta`),
-     * @default 'primary'
-     */
-    status?: 'primary' | 'positive' | 'warning' | 'negative' | 'white';
-    /**
-     * Adds a pulse effect to the notification.
-     *
-     * **WARNING**: Avoid overuse of this prop.
-     * @default false
-     */
-    pulsing?: boolean;
-    /**
-     * Instead of conditionally rendering the `NotificationMarker`, the `enabled` prop can be used.
-     *
-     * When `enabled` is set to `false`, the DOM element will still be present, but the notification marker will not be displayed visually.
-     *
-     * @example
-     * <NotificationMarker enabled={notifications.length > 0}>
-     *  …
-     * </NotificationMarker>
-     * @default true
-     */
-    enabled?: boolean;
-};
-/**
- * A small notification circle to the top-right of the passed children prop.
- * This can be applied to almost anything but mostly intended for icons within buttons with `styleType = default / borderless`.
- * @example
- * <IconButton styleType='borderless'>
- *   <NotificationMarker>
- *     <SvgNotification />
- *   </NotificationMarker>
- * </IconButton>
- * @example
- * <NotificationMarker status='positive' pulsing={true}>Live</NotificationMarker>
- */
-export declare const NotificationMarker: PolymorphicForwardRefComponent<"span", NotificationMarkerProps>;
-export {};

package/esm/core/NotificationMarker/NotificationMarker.js

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { Box } from '../../utils/index.js';
-import cx from 'classnames';
-export const NotificationMarker = React.forwardRef((props, ref) => {
-  let {
-    className,
-    children,
-    status = 'primary',
-    pulsing = false,
-    enabled = true,
-    ...rest
-  } = props;
-  return React.createElement(
-    Box,
-    {
-      as: 'span',
-      ref: ref,
-      className: cx(
-        {
-          'iui-notification-marker': enabled,
-        },
-        className,
-      ),
-      'data-iui-variant': enabled ? status : null,
-      'data-iui-urgent': enabled ? pulsing : null,
-      ...rest,
-    },
-    children,
-  );
-});

package/esm/core/Overlay/Overlay.d.ts

@@ -1,53 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type OverlayComponentProps = {
-    /**
-     * Page elements that are blurred by the Overlay. Will become blurred and inert.
-     */
-    children?: React.ReactNode;
-    /**
-     * Content shown inside the Overlay, on top of the blurred content.
-     *
-     * Can be used to show a loading indicator.
-     */
-    content?: React.ReactNode;
-};
-/**
- * The Overlay component can be used to hide some UI while its content is loading or revalidating,
- * and display a loading indicator on top of it.
- *
- * The hidden content gets blurred and becomes inert so it cannot be interacted with.
- *
- * @example
- * <Overlay content="loading…">
- *   content beneath the overlay… (text, img, etc.)
- * </Overlay>
- *
- * @example
- * <Overlay.Wrapper>
- *   <Overlay.Overlay>
- *     loading…
- *   <Overlay.Overlay>
- *   <Overlay.HiddenContent>
- *     content beneath the overlay… (text, img, etc.)
- *   <Overlay.HiddenContent />
- * </Overlay.Wrapper>
- */
-export declare const Overlay: PolymorphicForwardRefComponent<"div", OverlayComponentProps> & {
-    /**
-     * The main component is a wrapper to hold the
-     * `Overlay.HiddenContent` and `Overlay.Overlay`.
-     */
-    Wrapper: PolymorphicForwardRefComponent<"div", {}>;
-    /**
-     * `Overlay.HiddenContent` houses page elements that are blurred by the
-     * Overlay. These elements will become inert when the overlay is active.
-     */
-    HiddenContent: PolymorphicForwardRefComponent<"div", {}>;
-    /**
-     * `Overlay.Overlay` sits on top of the HiddenContent, and can show
-     * any arbitrary content like a progress indicator and loading message.
-     */
-    Overlay: PolymorphicForwardRefComponent<"div", {}>;
-};
-export {};

package/esm/core/Overlay/Overlay.js

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { Box, polymorphic } from '../../utils/index.js';
-let OverlayComponent = React.forwardRef((props, forwardedRef) => {
-  let { content, children, ...rest } = props;
-  return React.createElement(
-    OverlayWrapper,
-    {
-      ref: forwardedRef,
-      ...rest,
-    },
-    React.createElement(OverlayOverlay, null, content),
-    React.createElement(OverlayHiddenContent, null, children),
-  );
-});
-let OverlayHiddenContent = React.forwardRef((props, ref) => {
-  let { children, ...rest } = props;
-  return React.createElement(
-    Box,
-    {
-      inert: '',
-      ref: ref,
-      ...rest,
-    },
-    children,
-  );
-});
-let OverlayOverlay = polymorphic.div('iui-overlay');
-let OverlayWrapper = polymorphic.div('iui-overlay-wrapper');
-export const Overlay = Object.assign(OverlayComponent, {
-  Wrapper: OverlayWrapper,
-  HiddenContent: OverlayHiddenContent,
-  Overlay: OverlayOverlay,
-});

package/esm/core/Popover/Popover.d.ts

@@ -1,188 +0,0 @@
-import * as React from 'react';
-import { FloatingFocusManager } from '@floating-ui/react';
-import type { Placement, UseFloatingOptions, UseHoverProps, UseClickProps, UseFocusProps, UseDismissProps } 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;
-    /**
-     * Middleware options.
-     *
-     * By default, `flip`, `shift`, `size`, and `hide` are enabled.
-     *
-     * If the floating content 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?: {
-        offset?: number;
-        flip?: boolean;
-        shift?: boolean;
-        size?: boolean | {
-            /**
-             * Override the maximum height of the popover. Must be a CSS-compatible value.
-             * @default "400px"
-             */
-            maxHeight?: string;
-        };
-        autoPlacement?: boolean;
-        hide?: boolean;
-        inline?: 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;
-    };
-    /**
-     * By default, only the click and dismiss interactions/triggers are enabled.
-     * Explicitly pass `false` to disable the defaults.
-     *
-     * Pass a boolean or an object to enable/disable any of the supported interactions.
-     * The passed objects can be used to override the default props that the Popover sets for an interaction/trigger.
-     *
-     * @example
-     * const popover = usePopover({
-     *   interactions: {
-     *     click: false,
-     *     focus: true,
-     *     hover: { move: false },
-     *   }
-     *   // …
-     * });
-     */
-    interactions?: {
-        click?: boolean | Omit<UseClickProps, 'enabled'>;
-        dismiss?: boolean | Omit<UseDismissProps, 'enabled'>;
-        hover?: boolean | Omit<UseHoverProps, 'enabled'>;
-        focus?: boolean | Omit<UseFocusProps, 'enabled'>;
-    };
-    role?: 'dialog' | 'menu' | 'listbox';
-    /**
-     * Whether the popover should match the width of the trigger.
-     */
-    matchWidth?: boolean;
-} & Omit<UseFloatingOptions, 'middleware' | 'placement'>;
-type InitialFocus = React.ComponentPropsWithoutRef<typeof FloatingFocusManager>['initialFocus'];
-/** Stores the current open/closed state of the popover. */
-export declare const PopoverOpenContext: React.Context<boolean | undefined>;
-/**
- * Stores the initialFocus of the popover.
- *
- * E.g. Popover's descendants can disable the popover's initialFocus to prevent conflicts with its own focus management.
- */
-export declare const PopoverInitialFocusContext: React.Context<{
-    setInitialFocus: React.Dispatch<React.SetStateAction<InitialFocus>>;
-} | undefined>;
-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: {
-        placement: Placement;
-        strategy: import("@floating-ui/utils").Strategy;
-        x: number;
-        y: number;
-        middlewareData: import("@floating-ui/core").MiddlewareData;
-        isPositioned: boolean;
-        update: () => void;
-        floatingStyles: React.CSSProperties;
-        open: boolean;
-        onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => 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>;
-    };
-    open: boolean;
-    onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
-    getReferenceProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
-    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
-};
-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;
-    /**
-     * This is used to position the popover relative to a different element than the trigger.
-     *
-     * Recommended to use state to store this element, rather than a ref.
-     */
-    positionReference?: HTMLElement;
-} & 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 {};