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

package/DEV-esm/core/Panels/Panels.js

@@ -1,304 +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,
-      ),
-    ),
-  );
-});
-PanelsWrapper.displayName = 'Panels.Wrapper';
-export const PanelsWrapperContext = React.createContext(void 0);
-PanelsWrapperContext.displayName = 'PanelsWrapperContext';
-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,
-      ),
-  );
-});
-Panel.displayName = 'Panels.Panel';
-let PanelContext = React.createContext(void 0);
-PanelContext.displayName = 'PanelContext';
-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,
-  }));
-};
-PanelTrigger.displayName = 'Panels.Trigger';
-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,
-    ),
-  );
-});
-PanelHeader.displayName = 'Panels.Header';
-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),
-  );
-});
-PanelBackButton.displayName = 'Panels.BackButton';
-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/DEV-esm/core/Panels/helpers.js

@@ -1,42 +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);
-PanelsInstanceContext.displayName = 'PanelsInstanceContext';
-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/DEV-esm/core/Popover/Popover.js

@@ -1,343 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import {
-  useFloating,
-  useClick,
-  useDismiss,
-  useInteractions,
-  size,
-  autoUpdate,
-  offset,
-  flip,
-  shift,
-  autoPlacement,
-  inline,
-  hide,
-  FloatingFocusManager,
-  useHover,
-  useFocus,
-  safePolygon,
-  useRole,
-  FloatingPortal,
-  useFloatingTree,
-} from '@floating-ui/react';
-import {
-  Box,
-  ShadowRoot,
-  cloneElementWithRef,
-  isUnitTest,
-  mergeEventHandlers,
-  useControlledState,
-  useId,
-  useLayoutEffect,
-  useMergedRefs,
-} from '../../utils/index.js';
-import { usePortalTo } from '../../utils/components/Portal.js';
-import { ThemeProvider } from '../ThemeProvider/ThemeProvider.js';
-export const PopoverOpenContext = React.createContext(void 0);
-export const PopoverInitialFocusContext = React.createContext(void 0);
-export const usePopover = (options) => {
-  let {
-    placement = 'bottom-start',
-    visible,
-    onVisibleChange,
-    closeOnOutsideClick,
-    autoUpdateOptions,
-    matchWidth,
-    interactions: interactionsProp,
-    role,
-    ...rest
-  } = options;
-  let mergedInteractions = React.useMemo(
-    () => ({
-      ...interactionsProp,
-      click: interactionsProp?.click ?? true,
-      dismiss: interactionsProp?.dismiss ?? true,
-      hover: interactionsProp?.hover ?? false,
-      focus: interactionsProp?.focus ?? false,
-    }),
-    [interactionsProp],
-  );
-  let tree = useFloatingTree();
-  let middleware = React.useMemo(
-    () => ({
-      ...options.middleware,
-      flip: options.middleware?.flip ?? true,
-      shift: options.middleware?.shift ?? true,
-      size: options.middleware?.size ?? true,
-      hide: options.middleware?.hide || !isUnitTest,
-    }),
-    [options.middleware],
-  );
-  let maxHeight =
-    'boolean' == typeof middleware.size ? '400px' : middleware.size?.maxHeight;
-  let [open, onOpenChange] = useControlledState(
-    false,
-    visible,
-    onVisibleChange,
-  );
-  let floating = useFloating({
-    placement,
-    open,
-    onOpenChange,
-    strategy: 'fixed',
-    whileElementsMounted: React.useMemo(
-      () =>
-        open ? (...args) => autoUpdate(...args, autoUpdateOptions) : void 0,
-      [autoUpdateOptions, open],
-    ),
-    ...rest,
-    middleware: React.useMemo(
-      () =>
-        [
-          void 0 !== middleware.offset && offset(middleware.offset),
-          middleware.flip &&
-            flip({
-              padding: 4,
-            }),
-          middleware.shift &&
-            shift({
-              padding: 4,
-            }),
-          (matchWidth || middleware.size) &&
-            size({
-              padding: 4,
-              apply: ({ rects, availableHeight }) => {
-                if (middleware.size)
-                  setAvailableHeight(Math.round(availableHeight));
-                if (matchWidth) setReferenceWidth(rects.reference.width);
-              },
-            }),
-          middleware.autoPlacement &&
-            autoPlacement({
-              padding: 4,
-            }),
-          middleware.inline && inline(),
-          middleware.hide &&
-            hide({
-              padding: 4,
-            }),
-        ].filter(Boolean),
-      [matchWidth, middleware],
-    ),
-  });
-  let interactions = useInteractions([
-    useClick(floating.context, {
-      enabled: !!mergedInteractions.click,
-      ...mergedInteractions.click,
-    }),
-    useDismiss(floating.context, {
-      enabled: !!mergedInteractions.dismiss,
-      outsidePress: closeOnOutsideClick,
-      bubbles: null != tree,
-      ...mergedInteractions.dismiss,
-    }),
-    useHover(floating.context, {
-      enabled: !!mergedInteractions.hover,
-      delay: 100,
-      handleClose: safePolygon({
-        buffer: 1,
-        blockPointerEvents: true,
-      }),
-      move: false,
-      ...mergedInteractions.hover,
-    }),
-    useFocus(floating.context, {
-      enabled: !!mergedInteractions.focus,
-      ...mergedInteractions.focus,
-    }),
-    useRole(floating.context, {
-      role: 'dialog',
-      enabled: !!role,
-    }),
-  ]);
-  let [referenceWidth, setReferenceWidth] = React.useState();
-  let [availableHeight, setAvailableHeight] = React.useState();
-  let getFloatingProps = React.useCallback(
-    (userProps) =>
-      interactions.getFloatingProps({
-        ...userProps,
-        style: {
-          ...floating.floatingStyles,
-          ...(middleware.size &&
-            availableHeight && {
-              maxBlockSize: `min(${availableHeight}px, ${maxHeight})`,
-            }),
-          zIndex: 9999,
-          ...(matchWidth && referenceWidth
-            ? {
-                minInlineSize: `${referenceWidth}px`,
-                maxInlineSize: `min(${2 * referenceWidth}px, 90vw)`,
-              }
-            : {}),
-          ...(middleware.hide &&
-            floating.middlewareData.hide?.referenceHidden && {
-              visibility: 'hidden',
-            }),
-          ...userProps?.style,
-        },
-      }),
-    [
-      interactions,
-      floating.floatingStyles,
-      floating.middlewareData.hide?.referenceHidden,
-      middleware.size,
-      middleware.hide,
-      availableHeight,
-      maxHeight,
-      matchWidth,
-      referenceWidth,
-    ],
-  );
-  let getReferenceProps = React.useCallback(
-    (userProps) =>
-      interactions.getReferenceProps({
-        ...userProps,
-        onClick: mergeEventHandlers(userProps?.onClick, () => {
-          if (!!mergedInteractions.click && visible) onOpenChange(false);
-        }),
-      }),
-    [interactions, mergedInteractions.click, visible, onOpenChange],
-  );
-  return React.useMemo(
-    () => ({
-      open,
-      onOpenChange,
-      getReferenceProps,
-      getFloatingProps,
-      ...floating,
-    }),
-    [open, onOpenChange, getFloatingProps, floating, getReferenceProps],
-  );
-};
-export const Popover = React.forwardRef((props, forwardedRef) => {
-  let {
-    portal = true,
-    visible,
-    placement = 'bottom-start',
-    onVisibleChange,
-    closeOnOutsideClick = true,
-    middleware,
-    positionReference,
-    className,
-    children,
-    content,
-    applyBackground = false,
-    ...rest
-  } = props;
-  let popover = usePopover({
-    visible,
-    placement,
-    onVisibleChange,
-    closeOnOutsideClick,
-    role: 'dialog',
-    middleware,
-  });
-  let [popoverElement, setPopoverElement] = React.useState();
-  let popoverRef = useMergedRefs(
-    popover.refs.setFloating,
-    forwardedRef,
-    setPopoverElement,
-  );
-  let triggerId = `${useId()}-trigger`;
-  let hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
-  useLayoutEffect(() => {
-    if (!positionReference) return;
-    popover.refs.setPositionReference(positionReference);
-    return () => void popover.refs.setPositionReference(null);
-  }, [popover.refs, positionReference]);
-  let [initialFocus, setInitialFocus] = React.useState();
-  let initialFocusContextValue = React.useMemo(
-    () => ({
-      setInitialFocus,
-    }),
-    [],
-  );
-  return React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(
-      PopoverOpenContext.Provider,
-      {
-        value: popover.open,
-      },
-      cloneElementWithRef(children, (children) => ({
-        id: children.props.id || triggerId,
-        ...popover.getReferenceProps(children.props),
-        ref: popover.refs.setReference,
-      })),
-    ),
-    popover.open
-      ? React.createElement(
-          PopoverInitialFocusContext.Provider,
-          {
-            value: initialFocusContextValue,
-          },
-          React.createElement(
-            PopoverPortal,
-            {
-              portal: portal,
-            },
-            React.createElement(
-              ThemeProvider,
-              {
-                portalContainer: popoverElement,
-              },
-              React.createElement(DisplayContents, null),
-              React.createElement(
-                FloatingFocusManager,
-                {
-                  context: popover.context,
-                  modal: false,
-                  initialFocus: initialFocus,
-                },
-                React.createElement(
-                  Box,
-                  {
-                    className: cx(
-                      {
-                        'iui-popover-surface': applyBackground,
-                      },
-                      className,
-                    ),
-                    'aria-labelledby': hasAriaLabel
-                      ? void 0
-                      : popover.refs.domReference.current?.id,
-                    ...popover.getFloatingProps(rest),
-                    ref: popoverRef,
-                  },
-                  content,
-                ),
-              ),
-            ),
-          ),
-        )
-      : null,
-  );
-});
-Popover.displayName = 'Popover';
-let PopoverPortal = ({ children, portal = true }) => {
-  let portalTo = usePortalTo(portal);
-  return React.createElement(
-    FloatingPortal,
-    {
-      key: portalTo?.id,
-      root: portalTo,
-    },
-    React.createElement(DisplayContents, null),
-    children,
-  );
-};
-let DisplayContents = React.memo(() =>
-  React.createElement(
-    ShadowRoot,
-    {
-      css: `
-        :host {
-          display: contents;
-        }
-      `,
-    },
-    React.createElement('slot', null),
-  ),
-);