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

package/cjs/core/Overlay/Overlay.js

@@ -1,44 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'Overlay', {
-  enumerable: true,
-  get: function () {
-    return Overlay;
-  },
-});
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _index = require('../../utils/index.js');
-const 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),
-  );
-});
-const OverlayHiddenContent = _react.forwardRef((props, ref) => {
-  let { children, ...rest } = props;
-  return _react.createElement(
-    _index.Box,
-    {
-      inert: '',
-      ref: ref,
-      ...rest,
-    },
-    children,
-  );
-});
-const OverlayOverlay = _index.polymorphic.div('iui-overlay');
-const OverlayWrapper = _index.polymorphic.div('iui-overlay-wrapper');
-const Overlay = Object.assign(OverlayComponent, {
-  Wrapper: OverlayWrapper,
-  HiddenContent: OverlayHiddenContent,
-  Overlay: OverlayOverlay,
-});

package/cjs/core/Panels/Panels.d.ts

@@ -1,174 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import { Text } from '../Typography/Text.js';
-import type { FocusEntry, PanelsInstance, TriggerMapEntry } from './helpers.js';
-type PanelsWrapperProps = {
-    /**
-     * Function that gets called when the active panel is changed.
-     */
-    onActiveIdChange?: (newActiveId: string) => void;
-    children: React.ReactNode;
-    /**
-     * Pass an instance created by `useInstance` to control the panels imperatively.
-     *
-     * @example
-     * const panels = Panels.useInstance();
-     * <Panels instance={panels} />
-     */
-    instance?: PanelsInstance;
-};
-export declare const PanelsWrapper: PolymorphicForwardRefComponent<"div", PanelsWrapperProps>;
-export declare const PanelsWrapperContext: React.Context<{
-    activePanelId: string | undefined;
-    setActivePanelId: React.Dispatch<React.SetStateAction<string>>;
-    /**
-     * Simpler alternative to a full history stack.
-     *
-     * ```
-     * Record<
-     *   string, // Id of a panel
-     *   {
-     *     triggerId: string, // Id of the trigger element that points to this panel
-     *     panelId: string, // Id of the panel element in which the trigger is present
-     *   }
-     * >
-     * ```
-     */
-    triggers: Record<string, TriggerMapEntry>;
-    setTriggers: React.Dispatch<React.SetStateAction<Record<string, TriggerMapEntry>>>;
-    changeActivePanel: (newActiveId: string) => void;
-    shouldFocus: FocusEntry;
-    setShouldFocus: React.Dispatch<React.SetStateAction<FocusEntry>>;
-    panels: React.MutableRefObject<Set<string>>;
-} | undefined>;
-type PanelProps = {
-    id: string;
-};
-type PanelTriggerProps = {
-    for: string;
-    children: React.ReactElement;
-};
-type PanelHeaderProps = {
-    titleProps?: React.ComponentProps<typeof Text>;
-};
-export declare const Panels: {
-    /**
-     * Component that manages the logic for layered panels.
-     * It can be used anywhere to create layers. E.g. `Menu`, `InformationPanel`, `Popover`, etc.
-     *
-     * Requirements:
-     * - The initial displayed Panel should be the first `Panel` in the `Panels.Wrapper`.
-     * - A panel can have only one trigger pointing to it. i.e. out of all the triggers across all panels,
-     *   only one can point to a particular panel.
-     * - The `Panels.Panel`s within the wrapper should be in the order of the navigation. E.g.:
-     *   ```jsx
-     *   <Panels.Wrapper>
-     *     <Panels.Panel id={root} /> // Must come before moreDetails since it contains the trigger to moreDetails
-     *     <Panels.Panel id={moreDetails}> // Must come after root since it is navigated to from root
-     *   </Panels.Wrapper>
-     *   ```
-     *
-     * @example
-     * <Panels.Wrapper as={Surface}>
-     *   <Panels.Panel
-     *     id={panelIdRoot}
-     *     as={Surface}
-     *     border={false}
-     *     elevation={0}
-     *   >
-     *     <Surface.Header as={Panels.Header}>Root</Surface.Header>
-     *     <Surface.Body as={List}>
-     *       <ListItem>
-     *         <Panels.Trigger for={panelIdMoreInfo}>
-     *           <ListItem.Action>More details</ListItem.Action>
-     *         </Panels.Trigger>
-     *       </ListItem>
-     *     </Surface.Body>
-     *   </Panels.Panel>
-     *
-     *   <Panels.Panel
-     *     id={panelIdMoreInfo}
-     *     as={Surface}
-     *     border={false}
-     *     elevation={0}
-     *   >
-     *     <Surface.Header as={Panels.Header}>More details</Surface.Header>
-     *     <Surface.Body isPadded>
-     *       <Text>Content</Text>
-     *     </Surface.Body>
-     *   </Panels.Panel>
-     * </Panels.Wrapper>
-     */
-    Wrapper: PolymorphicForwardRefComponent<"div", PanelsWrapperProps>;
-    /**
-     * Takes an `id` and the panel content.
-     * Match this `id` with a `Panels.Triggers`'s `for` prop to create a link between them.
-     *
-     * @example
-     * <Panels.Panel id={panelIdRoot} as={Surface} border={false} elevation={0}>
-     *   <Surface.Header as={Panels.Header}>Root</Surface.Header>
-     *   <Surface.Body as={List}>
-     *     <ListItem>
-     *       <Panels.Trigger for={panelIdMoreInfo}>
-     *         <ListItem.Action>More details</ListItem.Action>
-     *       </Panels.Trigger>
-     *     </ListItem>
-     *   </Surface.Body>
-     * </Panels.Panel>
-     */
-    Panel: PolymorphicForwardRefComponent<"div", PanelProps>;
-    /**
-     * Wraps the clickable element and appends an `onClick` to change the active panel to the one specified in the `for`
-     * prop. Also appends some attributes for accessibility.
-     *
-     * @example
-     * <Panels.Trigger for={nextPanelId}>
-     *   <Button>go to next panel</Button>
-     * </Panels.Trigger>
-     *
-     * @example
-     * <ListItem>
-     *   <Panels.Trigger for={panelIdMoreInfo}>
-     *     <ListItem.Action>More details</ListItem.Action>
-     *   </Panels.Trigger>
-     * </ListItem>
-     */
-    Trigger: {
-        (props: PanelTriggerProps): string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null;
-        displayName: string;
-    };
-    /**
-     * Required component to add an accessible name and also a back button (if previous panel exists) to the panel.
-     *
-     * @example
-     * <Panels.Panel id={panelIdRoot}>
-     *   <Panels.Header>Root</Panels.Header>
-     *   …
-     * </Panels.Panel>
-     *
-     * @example
-     * <Panels.Panel
-     *   id={panelIdMoreInfo}
-     *   as={Surface}
-     *   border={false}
-     *   elevation={0}
-     * >
-     *   <Surface.Header as={Panels.Header}>More details</Surface.Header>
-     *   <Surface.Body isPadded>
-     *     <Text>Content</Text>
-     *   </Surface.Body>
-     * </Panels.Panel>
-     */
-    Header: PolymorphicForwardRefComponent<"div", PanelHeaderProps>;
-    /**
-     * You can use methods from `Panels.useInstance()` to control the state programmatically.
-     *
-     * @example
-     * const panels = Panels.useInstance();
-     *
-     * <Button onClick={() => panels.goBack()}>Go back</Button>
-     * <Panels.Wrapper instance={panels}>{…}</Panels.Wrapper>;
-     */
-    useInstance: () => PanelsInstance;
-};
-export {};

package/cjs/core/Panels/Panels.js

@@ -1,315 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-function _export(target, all) {
-  for (var name in all)
-    Object.defineProperty(target, name, {
-      enumerable: true,
-      get: all[name],
-    });
-}
-_export(exports, {
-  Panels: function () {
-    return Panels;
-  },
-  PanelsWrapper: function () {
-    return PanelsWrapper;
-  },
-  PanelsWrapperContext: function () {
-    return PanelsWrapperContext;
-  },
-});
-const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _reactdom = _interop_require_wildcard._(require('react-dom'));
-const _index = require('../../utils/index.js');
-const _IconButton = require('../Buttons/IconButton.js');
-const _Flex = require('../Flex/Flex.js');
-const _Text = require('../Typography/Text.js');
-const _classnames = _interop_require_default._(require('classnames'));
-const _helpers = require('./helpers.js');
-const PanelsWrapper = _react.forwardRef((props, forwardedRef) => {
-  let {
-    children,
-    className,
-    onActiveIdChange: onActiveIdChangeProp,
-    instance,
-    ...rest
-  } = props;
-  let onActiveIdChange = (0, _index.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 = (0, _index.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(
-      _helpers.PanelsInstanceProvider,
-      {
-        instance: instance,
-      },
-      _react.createElement(
-        _index.Box,
-        {
-          ref: (0, _index.useMergedRefs)(ref, forwardedRef),
-          ...rest,
-          className: (0, _classnames.default)('iui-panel-wrapper', className),
-        },
-        children,
-      ),
-    ),
-  );
-});
-const PanelsWrapperContext = _react.createContext(void 0);
-const Panel = _react.forwardRef((props, forwardedRef) => {
-  let { id, children, className, ...rest } = props;
-  let { activePanelId, triggers, panels, setActivePanelId } = (0,
-  _index.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;
-  (0, _index.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(
-        _index.Box,
-        {
-          ref: forwardedRef,
-          id: id,
-          className: (0, _classnames.default)('iui-panel', className),
-          'aria-labelledby': `${id}-header-title`,
-          role: 'group',
-          inert: isInert ? '' : void 0,
-          'data-iui-transitioning': isTransitioning ? 'true' : void 0,
-          ...rest,
-        },
-        children,
-      ),
-  );
-});
-const PanelContext = _react.createContext(void 0);
-const PanelTrigger = (props) => {
-  let { children, for: forProp } = props;
-  let {
-    changeActivePanel,
-    triggers,
-    setTriggers,
-    activePanelId: activePanel,
-    shouldFocus,
-    setShouldFocus,
-    panels,
-  } = (0, _index.useSafeContext)(PanelsWrapperContext);
-  let { id: panelId } = (0, _index.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 = (0, _index.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 (0, _index.cloneElementWithRef)(children, (children) => ({
-    ...children.props,
-    id: triggerId,
-    ref: focusRef,
-    onClick: (0, _index.mergeEventHandlers)(children.props.onClick, onClick),
-    'aria-expanded': activePanel === forProp,
-    'aria-controls': forProp,
-  }));
-};
-const PanelHeader = _react.forwardRef((props, forwardedRef) => {
-  let { titleProps, children, ...rest } = props;
-  let { shouldFocus, setShouldFocus } = (0, _index.useSafeContext)(
-    PanelsWrapperContext,
-  );
-  let { id: panelId, associatedTrigger: panelAssociatedTrigger } = (0,
-  _index.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.Flex,
-    {
-      ref: forwardedRef,
-      ...rest,
-    },
-    panelAssociatedTrigger && _react.createElement(PanelBackButton, null),
-    _react.createElement(
-      _Text.Text,
-      {
-        id: `${panelId}-header-title`,
-        as: 'h2',
-        tabIndex: -1,
-        ref: focusRef,
-        ...titleProps,
-      },
-      children,
-    ),
-  );
-});
-const PanelBackButton = _react.forwardRef((props, forwardedRef) => {
-  let { children, onClick, ...rest } = props;
-  let { instance: panelInstance } = (0, _index.useSafeContext)(
-    _helpers.PanelsInstanceContext,
-  );
-  return _react.createElement(
-    _IconButton.IconButton,
-    {
-      ref: forwardedRef,
-      'aria-label': 'Previous panel',
-      styleType: 'borderless',
-      size: 'small',
-      'data-iui-shift': 'left',
-      ...rest,
-      onClick: (0, _index.mergeEventHandlers)(
-        _react.useCallback(() => panelInstance?.goBack(), [panelInstance]),
-        onClick,
-      ),
-    },
-    children || _react.createElement(_index.SvgChevronLeft, null),
-  );
-});
-const Panels = {
-  Wrapper: PanelsWrapper,
-  Panel,
-  Trigger: PanelTrigger,
-  Header: PanelHeader,
-  useInstance: _index.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/cjs/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/cjs/core/Panels/helpers.js

@@ -1,61 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-function _export(target, all) {
-  for (var name in all)
-    Object.defineProperty(target, name, {
-      enumerable: true,
-      get: all[name],
-    });
-}
-_export(exports, {
-  PanelsInstanceContext: function () {
-    return PanelsInstanceContext;
-  },
-  PanelsInstanceProvider: function () {
-    return PanelsInstanceProvider;
-  },
-});
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _index = require('../../utils/index.js');
-const _Panels = require('./Panels.js');
-const PanelsInstanceContext = _react.createContext(void 0);
-const PanelsInstanceProvider = (props) => {
-  let { children, instance: instanceProp } = props;
-  let instanceBackup = _Panels.Panels.useInstance();
-  let instance = instanceProp || instanceBackup;
-  let { activePanelId, changeActivePanel, triggers, setShouldFocus } = (0,
-  _index.useSafeContext)(_Panels.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]);
-  (0, _index.useSynchronizeInstance)(
-    instance,
-    _react.useMemo(
-      () => ({
-        goBack,
-      }),
-      [goBack],
-    ),
-  );
-  return _react.createElement(
-    PanelsInstanceContext.Provider,
-    {
-      value: {
-        instance,
-      },
-    },
-    children,
-  );
-};