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

package/esm/core/Panels/Panels.js

@@ -1,297 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import {
-  Box,
-  cloneElementWithRef,
-  mergeEventHandlers,
-  SvgChevronLeft,
-  useInstance,
-  useMergedRefs,
-  useSafeContext,
-  useMediaQuery,
-  useWarningLogger,
-  useLayoutEffect,
-  useLatestRef,
-} from '../../utils/index.js';
-import { IconButton } from '../Buttons/IconButton.js';
-import { Flex } from '../Flex/Flex.js';
-import { Text } from '../Typography/Text.js';
-import cx from 'classnames';
-import { PanelsInstanceContext, PanelsInstanceProvider } from './helpers.js';
-export const PanelsWrapper = React.forwardRef((props, forwardedRef) => {
-  let {
-    children,
-    className,
-    onActiveIdChange: onActiveIdChangeProp,
-    instance,
-    ...rest
-  } = props;
-  let onActiveIdChange = useLatestRef(onActiveIdChangeProp);
-  let ref = React.useRef(null);
-  let [activePanelId, setActivePanelId] = React.useState(void 0);
-  let [triggers, setTriggers] = React.useState({});
-  let panels = React.useRef(new Set());
-  let [shouldFocus, setShouldFocus] = React.useState(void 0);
-  let motionOk = useMediaQuery('(prefers-reduced-motion: no-preference)');
-  let changeActivePanel = React.useCallback(
-    (newActiveId) => {
-      if (!panels.current.has(newActiveId) || newActiveId === activePanelId)
-        return;
-      ReactDOM.flushSync(() => setActivePanelId(newActiveId));
-      onActiveIdChange.current?.(newActiveId);
-      ref.current
-        ?.getRootNode()
-        .getElementById(newActiveId)
-        ?.scrollIntoView({
-          block: 'nearest',
-          inline: 'center',
-          behavior: motionOk ? 'smooth' : 'instant',
-        });
-    },
-    [activePanelId, motionOk, onActiveIdChange],
-  );
-  return React.createElement(
-    PanelsWrapperContext.Provider,
-    {
-      value: React.useMemo(
-        () => ({
-          activePanelId,
-          setActivePanelId,
-          changeActivePanel,
-          triggers,
-          setTriggers,
-          shouldFocus,
-          setShouldFocus,
-          panels,
-        }),
-        [
-          activePanelId,
-          changeActivePanel,
-          setActivePanelId,
-          setTriggers,
-          shouldFocus,
-          triggers,
-        ],
-      ),
-    },
-    React.createElement(
-      PanelsInstanceProvider,
-      {
-        instance: instance,
-      },
-      React.createElement(
-        Box,
-        {
-          ref: useMergedRefs(ref, forwardedRef),
-          ...rest,
-          className: cx('iui-panel-wrapper', className),
-        },
-        children,
-      ),
-    ),
-  );
-});
-export const PanelsWrapperContext = React.createContext(void 0);
-let Panel = React.forwardRef((props, forwardedRef) => {
-  let { id, children, className, ...rest } = props;
-  let { activePanelId, triggers, panels, setActivePanelId } =
-    useSafeContext(PanelsWrapperContext);
-  let associatedTrigger = React.useMemo(() => triggers[id], [id, triggers]);
-  let previousActivePanelId = useDelayed(activePanelId) || activePanelId;
-  let isMounted = [activePanelId, previousActivePanelId].includes(id);
-  let isTransitioning =
-    activePanelId === id && activePanelId !== previousActivePanelId;
-  let isInert = previousActivePanelId === id && activePanelId !== id;
-  useLayoutEffect(() => {
-    let isFirstPanel = null == activePanelId && 0 === panels.current.size;
-    if (isFirstPanel) setActivePanelId(id);
-    let panelsCurrent = panels.current;
-    if (!panelsCurrent.has(id)) panelsCurrent.add(id);
-    return () => {
-      panelsCurrent.delete(id);
-    };
-  }, [activePanelId, id, panels, setActivePanelId]);
-  return React.createElement(
-    PanelContext.Provider,
-    {
-      value: React.useMemo(
-        () => ({
-          id,
-          associatedTrigger,
-        }),
-        [associatedTrigger, id],
-      ),
-    },
-    isMounted &&
-      React.createElement(
-        Box,
-        {
-          ref: forwardedRef,
-          id: id,
-          className: cx('iui-panel', className),
-          'aria-labelledby': `${id}-header-title`,
-          role: 'group',
-          inert: isInert ? '' : void 0,
-          'data-iui-transitioning': isTransitioning ? 'true' : void 0,
-          ...rest,
-        },
-        children,
-      ),
-  );
-});
-let PanelContext = React.createContext(void 0);
-let PanelTrigger = (props) => {
-  let { children, for: forProp } = props;
-  let {
-    changeActivePanel,
-    triggers,
-    setTriggers,
-    activePanelId: activePanel,
-    shouldFocus,
-    setShouldFocus,
-    panels,
-  } = useSafeContext(PanelsWrapperContext);
-  let { id: panelId } = useSafeContext(PanelContext);
-  let fallbackId = React.useId();
-  let triggerId = children.props.id || fallbackId;
-  let onClick = React.useCallback(() => {
-    if (null == activePanel) return;
-    setShouldFocus({
-      fromPanelId: activePanel,
-      toPanelId: forProp,
-      direction: 'forward',
-    });
-    changeActivePanel?.(forProp);
-  }, [activePanel, changeActivePanel, forProp, setShouldFocus]);
-  let focusRef = React.useCallback(
-    (el) => {
-      if (
-        shouldFocus?.direction === 'backward' &&
-        shouldFocus?.toPanelId === panelId &&
-        shouldFocus?.fromPanelId === forProp
-      ) {
-        el?.focus({
-          preventScroll: true,
-        });
-        setShouldFocus(void 0);
-      }
-    },
-    [forProp, panelId, setShouldFocus, shouldFocus],
-  );
-  let logWarning = useWarningLogger();
-  React.useEffect(() => {
-    if (!panels.current.has(forProp))
-      logWarning(
-        `Panels.Trigger's \`for\` prop ("${forProp}") corresponds to no Panel.`,
-      );
-  }, [forProp, logWarning, panels, triggers]);
-  React.useEffect(() => {
-    setTriggers((oldTriggers) => {
-      let triggersMatch = oldTriggers[forProp];
-      if (
-        null == triggersMatch ||
-        panelId !== triggersMatch.panelId ||
-        triggerId !== triggersMatch.triggerId
-      )
-        return {
-          ...oldTriggers,
-          [forProp]: {
-            panelId,
-            triggerId,
-          },
-        };
-      return oldTriggers;
-    });
-  }, [forProp, panelId, setTriggers, triggerId]);
-  return cloneElementWithRef(children, (children) => ({
-    ...children.props,
-    id: triggerId,
-    ref: focusRef,
-    onClick: mergeEventHandlers(children.props.onClick, onClick),
-    'aria-expanded': activePanel === forProp,
-    'aria-controls': forProp,
-  }));
-};
-let PanelHeader = React.forwardRef((props, forwardedRef) => {
-  let { titleProps, children, ...rest } = props;
-  let { shouldFocus, setShouldFocus } = useSafeContext(PanelsWrapperContext);
-  let { id: panelId, associatedTrigger: panelAssociatedTrigger } =
-    useSafeContext(PanelContext);
-  let focusRef = React.useCallback(
-    (el) => {
-      if (
-        shouldFocus?.direction === 'forward' &&
-        shouldFocus.toPanelId === panelId
-      ) {
-        el?.focus({
-          preventScroll: true,
-        });
-        setShouldFocus(void 0);
-      }
-    },
-    [panelId, setShouldFocus, shouldFocus?.direction, shouldFocus?.toPanelId],
-  );
-  return React.createElement(
-    Flex,
-    {
-      ref: forwardedRef,
-      ...rest,
-    },
-    panelAssociatedTrigger && React.createElement(PanelBackButton, null),
-    React.createElement(
-      Text,
-      {
-        id: `${panelId}-header-title`,
-        as: 'h2',
-        tabIndex: -1,
-        ref: focusRef,
-        ...titleProps,
-      },
-      children,
-    ),
-  );
-});
-let PanelBackButton = React.forwardRef((props, forwardedRef) => {
-  let { children, onClick, ...rest } = props;
-  let { instance: panelInstance } = useSafeContext(PanelsInstanceContext);
-  return React.createElement(
-    IconButton,
-    {
-      ref: forwardedRef,
-      'aria-label': 'Previous panel',
-      styleType: 'borderless',
-      size: 'small',
-      'data-iui-shift': 'left',
-      ...rest,
-      onClick: mergeEventHandlers(
-        React.useCallback(() => panelInstance?.goBack(), [panelInstance]),
-        onClick,
-      ),
-    },
-    children || React.createElement(SvgChevronLeft, null),
-  );
-});
-export const Panels = {
-  Wrapper: PanelsWrapper,
-  Panel,
-  Trigger: PanelTrigger,
-  Header: PanelHeader,
-  useInstance: useInstance,
-};
-function useDelayed(
-  value,
-  { delay } = {
-    delay: 500,
-  },
-) {
-  let [delayed, setDelayed] = React.useState(void 0);
-  let timeout = React.useRef(void 0);
-  React.useEffect(() => {
-    if (0 === delay) setDelayed(value);
-    else timeout.current = setTimeout(() => setDelayed(value), delay);
-    return () => {
-      clearTimeout(timeout.current);
-    };
-  }, [value, delay]);
-  return delayed;
-}

package/esm/core/Panels/helpers.d.ts

@@ -1,23 +0,0 @@
-import * as React from 'react';
-export type PanelsInstance = {
-    /** Go back to the panel that has a trigger that points to the current panel. */
-    goBack: () => void;
-};
-export type TriggerMapEntry = {
-    triggerId: string;
-    panelId: string;
-};
-export type FocusEntry = {
-    fromPanelId: string;
-    toPanelId: string;
-    direction: 'forward' | 'backward';
-} | undefined;
-export declare const PanelsInstanceContext: React.Context<{
-    instance: PanelsInstance;
-} | undefined>;
-type PanelInstanceProviderProps = {
-    children: React.ReactNode;
-    instance: PanelsInstance | undefined;
-};
-export declare const PanelsInstanceProvider: (props: PanelInstanceProviderProps) => React.JSX.Element;
-export {};

package/esm/core/Panels/helpers.js

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import { useSafeContext, useSynchronizeInstance } from '../../utils/index.js';
-import { Panels, PanelsWrapperContext } from './Panels.js';
-export const PanelsInstanceContext = React.createContext(void 0);
-export const PanelsInstanceProvider = (props) => {
-  let { children, instance: instanceProp } = props;
-  let instanceBackup = Panels.useInstance();
-  let instance = instanceProp || instanceBackup;
-  let { activePanelId, changeActivePanel, triggers, setShouldFocus } =
-    useSafeContext(PanelsWrapperContext);
-  let goBack = React.useCallback(async () => {
-    if (null == activePanelId) return;
-    let trigger = triggers[activePanelId];
-    if (null != trigger.triggerId) {
-      setShouldFocus({
-        fromPanelId: activePanelId,
-        toPanelId: trigger.panelId,
-        direction: 'backward',
-      });
-      changeActivePanel(trigger.panelId);
-    }
-  }, [activePanelId, changeActivePanel, setShouldFocus, triggers]);
-  useSynchronizeInstance(
-    instance,
-    React.useMemo(
-      () => ({
-        goBack,
-      }),
-      [goBack],
-    ),
-  );
-  return React.createElement(
-    PanelsInstanceContext.Provider,
-    {
-      value: {
-        instance,
-      },
-    },
-    children,
-  );
-};

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 {};