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

package/DEV-esm/utils/components/MiddleTextTruncation.js

@@ -1,54 +0,0 @@
-import * as React from 'react';
-import { OverflowContainer } from './OverflowContainer.js';
-import { VisuallyHidden } from '../../core/VisuallyHidden/VisuallyHidden.js';
-import { ShadowRoot } from './ShadowRoot.js';
-let ELLIPSIS_CHAR = '…';
-export const MiddleTextTruncation = React.forwardRef((props, forwardedRef) => {
-  let { text, endCharsCount, textRenderer, style, ...rest } = props;
-  return React.createElement(
-    OverflowContainer,
-    {
-      as: 'span',
-      style: {
-        display: 'flex',
-        minWidth: 0,
-        flexGrow: 1,
-        whiteSpace: 'nowrap',
-        ...style,
-      },
-      itemsCount: text.length,
-      ...rest,
-      ref: forwardedRef,
-    },
-    React.createElement(
-      ShadowRoot,
-      null,
-      React.createElement(VisuallyHidden, null, text),
-      React.createElement('slot', {
-        'aria-hidden': true,
-        style: {
-          pointerEvents: 'none',
-        },
-      }),
-    ),
-    React.createElement(MiddleTextTruncationContent, {
-      text: text,
-      endCharsCount: endCharsCount,
-      textRenderer: textRenderer,
-    }),
-  );
-});
-MiddleTextTruncation.displayName = 'MiddleTextTruncation';
-let MiddleTextTruncationContent = (props) => {
-  let { text, endCharsCount = 6, textRenderer } = props;
-  let { visibleCount } = OverflowContainer.useContext();
-  let truncatedText = React.useMemo(() => {
-    if (visibleCount < text.length)
-      return `${text.substring(
-        0,
-        visibleCount - endCharsCount - ELLIPSIS_CHAR.length,
-      )}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
-    return text;
-  }, [endCharsCount, text, visibleCount]);
-  return textRenderer?.(truncatedText, text) ?? truncatedText;
-};

package/DEV-esm/utils/components/OverflowContainer.js

@@ -1,189 +0,0 @@
-import React from 'react';
-import { useMergedRefs } from '../hooks/useMergedRefs.js';
-import { Box } from './Box.js';
-import { useLayoutEffect } from '../hooks/useIsomorphicLayoutEffect.js';
-import { useSafeContext } from '../hooks/useSafeContext.js';
-import { isUnitTest } from '../functions/dev.js';
-import { useResizeObserver } from '../hooks/useResizeObserver.js';
-let OverflowContainerMain = React.forwardRef((props, forwardedRef) => {
-  let { itemsCount, children, overflowOrientation, ...rest } = props;
-  let [containerRef, visibleCount] = useOverflow(
-    itemsCount,
-    overflowOrientation,
-  );
-  let overflowContainerContextValue = React.useMemo(
-    () => ({
-      visibleCount,
-      itemsCount,
-    }),
-    [itemsCount, visibleCount],
-  );
-  return React.createElement(
-    OverflowContainerContext.Provider,
-    {
-      value: overflowContainerContextValue,
-    },
-    React.createElement(
-      Box,
-      {
-        ref: useMergedRefs(forwardedRef, containerRef),
-        ...rest,
-      },
-      children,
-    ),
-  );
-});
-let OverflowContainerOverflowNode = (props) => {
-  let { children } = props;
-  let { visibleCount, itemsCount } = useOverflowContainerContext();
-  let isOverflowing = visibleCount < itemsCount;
-  return isOverflowing ? children : null;
-};
-let OverflowContainerComponent = React.forwardRef((props, forwardedRef) => {
-  let { itemsCount, overflowOrientation = 'horizontal', ...rest } = props;
-  let [size, setSize] = React.useState(null);
-  let [resizeRef] = useResizeObserver(setSize);
-  let ref = useMergedRefs(resizeRef, forwardedRef);
-  let key = `${itemsCount}${
-    'vertical' === overflowOrientation ? size?.height : size?.width
-  }`;
-  return React.createElement(OverflowContainerMain, {
-    ...rest,
-    key: key,
-    ref: ref,
-    itemsCount: itemsCount,
-    overflowOrientation: overflowOrientation,
-  });
-});
-export const OverflowContainer = Object.assign(OverflowContainerComponent, {
-  OverflowNode: OverflowContainerOverflowNode,
-  useContext: useOverflowContainerContext,
-});
-let OverflowContainerContext = React.createContext(void 0);
-OverflowContainerContext.displayName = 'OverflowContainerContext';
-let useOverflow = (itemsCount, orientation = 'horizontal') => {
-  let [guessState, dispatch] = React.useReducer(
-    overflowGuessReducer,
-    {
-      itemsCount,
-    },
-    overflowGuessReducerInitialState,
-  );
-  let containerRef = React.useRef(null);
-  let isGuessing = React.useRef(false);
-  useLayoutEffect(() => {
-    let { minGuess, maxGuess, isStabilized, visibleCount } = guessState;
-    if (isStabilized) return;
-    guessVisibleCount();
-    function guessVisibleCount() {
-      if (isStabilized || isGuessing.current || isUnitTest) return;
-      try {
-        isGuessing.current = true;
-        if (null == containerRef.current) return;
-        let dimension = 'horizontal' === orientation ? 'Width' : 'Height';
-        let availableSize = containerRef.current[`offset${dimension}`];
-        let requiredSize = containerRef.current[`scroll${dimension}`];
-        let isOverflowing = availableSize < requiredSize;
-        if (
-          0 === itemsCount ||
-          (1 === visibleCount && isOverflowing) ||
-          (visibleCount === itemsCount && !isOverflowing) ||
-          (maxGuess - minGuess === 1 && visibleCount === minGuess)
-        ) {
-          dispatch({
-            type: 'stabilize',
-          });
-          return;
-        }
-        if (maxGuess === visibleCount && !isOverflowing) {
-          dispatch({
-            type: 'shiftGuessRangeForward',
-          });
-          return;
-        }
-        isOverflowing
-          ? dispatch({
-              type: 'decreaseMaxGuess',
-              currentState: guessState,
-            })
-          : dispatch({
-              type: 'increaseMinGuess',
-              currentState: guessState,
-            });
-      } finally {
-        isGuessing.current = false;
-      }
-    }
-  }, [guessState, itemsCount, orientation]);
-  return [containerRef, guessState.visibleCount];
-};
-let STARTING_MAX_ITEMS_COUNT = 32;
-let overflowGuessReducerInitialState = ({ itemsCount }) => {
-  let initialVisibleCount = Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT);
-  return isUnitTest
-    ? {
-        isStabilized: true,
-        minGuess: null,
-        maxGuess: null,
-        itemsCount,
-        visibleCount: itemsCount,
-      }
-    : {
-        isStabilized: false,
-        minGuess: 0,
-        maxGuess: initialVisibleCount,
-        itemsCount,
-        visibleCount: initialVisibleCount,
-      };
-};
-let overflowGuessReducer = (state, action) => {
-  let getSafeVisibleCount = ({ visibleCount, itemsCount }) =>
-    Math.min(itemsCount, visibleCount);
-  switch (action.type) {
-    case 'decreaseMaxGuess':
-    case 'increaseMinGuess':
-      if (state.isStabilized) return state;
-      let newMinGuess = state.minGuess;
-      let newMaxGuess = state.maxGuess;
-      if ('decreaseMaxGuess' === action.type)
-        newMaxGuess = action.currentState.visibleCount;
-      else newMinGuess = action.currentState.visibleCount;
-      let newVisibleCount = Math.floor((newMinGuess + newMaxGuess) / 2);
-      return {
-        ...state,
-        isStabilized: false,
-        minGuess: newMinGuess,
-        maxGuess: newMaxGuess,
-        visibleCount: getSafeVisibleCount({
-          visibleCount: newVisibleCount,
-          itemsCount: state.itemsCount,
-        }),
-      };
-    case 'shiftGuessRangeForward':
-      if (state.isStabilized) return state;
-      let doubleOfMaxGuess = 2 * state.maxGuess;
-      return {
-        ...state,
-        isStabilized: false,
-        minGuess: state.maxGuess,
-        maxGuess: doubleOfMaxGuess,
-        visibleCount: getSafeVisibleCount({
-          visibleCount: doubleOfMaxGuess,
-          itemsCount: state.itemsCount,
-        }),
-      };
-    case 'stabilize':
-      return {
-        ...state,
-        isStabilized: true,
-        minGuess: null,
-        maxGuess: null,
-      };
-    default:
-      return state;
-  }
-};
-function useOverflowContainerContext() {
-  let overflowContainerContext = useSafeContext(OverflowContainerContext);
-  return overflowContainerContext;
-}

package/DEV-esm/utils/components/Portal.js

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { useIsClient } from '../hooks/useIsClient.js';
-import { atom } from 'jotai';
-import { useScopedAtom } from '../providers/ScopeProvider.js';
-export const portalContainerAtom = atom(void 0);
-export const Portal = (props) => {
-  let { portal = true, children } = props;
-  let isClient = useIsClient();
-  let portalTo = usePortalTo(portal);
-  if (!isClient) return null;
-  return portalTo ? ReactDOM.createPortal(children, portalTo) : children;
-};
-export const usePortalTo = (portal) => {
-  let [portalContainer] = useScopedAtom(portalContainerAtom);
-  if ('boolean' == typeof portal) return portal ? portalContainer : null;
-  let portalTo = 'function' == typeof portal.to ? portal.to() : portal.to;
-  return portalTo ?? portalContainer;
-};

package/DEV-esm/utils/components/Resizer.js

@@ -1,255 +0,0 @@
-import * as React from 'react';
-import {
-  getBoundedValue,
-  getTranslateValuesFromElement,
-} from '../functions/index.js';
-export const Resizer = (props) =>
-  React.createElement(
-    'div',
-    {
-      style: {
-        position: 'absolute',
-        inset: -6,
-        display: 'grid',
-        pointerEvents: 'none',
-      },
-    },
-    React.createElement(ResizerStyles, null),
-    React.createElement(Resizers, props),
-  );
-let Resizers = (props) => {
-  let { elementRef, containerRef, onResizeStart, onResizeEnd } = props;
-  let isResizing = React.useRef(false);
-  let onResizePointerDown = (event) => {
-    if (!elementRef.current || 0 !== event.button) return;
-    let initialPointerX = event.clientX;
-    let initialPointerY = event.clientY;
-    let [initialTranslateX, initialTranslateY] = getTranslateValuesFromElement(
-      elementRef.current,
-    );
-    let { width: initialWidth, height: initialHeight } =
-      elementRef.current.getBoundingClientRect();
-    let width = `${initialWidth}px`;
-    let height = `${initialHeight}px`;
-    let translateX = initialTranslateX;
-    let translateY = initialTranslateY;
-    let minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
-    if (Number.isNaN(minWidth)) minWidth = 380;
-    let minHeight = parseFloat(getComputedStyle(elementRef.current).minHeight);
-    let resizer = event.currentTarget.dataset.iuiResizer;
-    let ownerDocument = elementRef.current.ownerDocument || document;
-    let originalUserSelect = ownerDocument.body.style.userSelect;
-    ownerDocument.body.style.userSelect = 'none';
-    let onResizePointerMove = (event) => {
-      if (!elementRef.current) return;
-      if (!isResizing.current) {
-        isResizing.current = true;
-        onResizeStart?.();
-      }
-      let containerRect = containerRef?.current?.getBoundingClientRect();
-      let clientX = getBoundedValue(
-        event.clientX,
-        containerRect?.left ?? 0,
-        containerRect?.right ?? ownerDocument.documentElement.clientWidth ?? 0,
-      );
-      let clientY = getBoundedValue(
-        event.clientY,
-        containerRect?.top ?? 0,
-        containerRect?.bottom ??
-          ownerDocument.documentElement.clientHeight ??
-          0,
-      );
-      let diffX = initialPointerX - clientX;
-      let diffY = initialPointerY - clientY;
-      switch (resizer) {
-        case 'top-left': {
-          let newHeight = initialHeight + diffY;
-          if (newHeight >= minHeight) {
-            height = elementRef.current.style.height = `${newHeight}px`;
-            translateY = initialTranslateY - diffY;
-          }
-          let newWidth = initialWidth + diffX;
-          if (newWidth >= minWidth) {
-            width = elementRef.current.style.width = `${newWidth}px`;
-            translateX = initialTranslateX - diffX;
-          }
-          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-          break;
-        }
-        case 'top': {
-          let newHeight = initialHeight + diffY;
-          if (newHeight < minHeight) break;
-          height = elementRef.current.style.height = `${newHeight}px`;
-          translateY = initialTranslateY - diffY;
-          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-          break;
-        }
-        case 'top-right': {
-          let newHeight = initialHeight + diffY;
-          if (newHeight >= minHeight) {
-            height = elementRef.current.style.height = `${newHeight}px`;
-            translateY = initialTranslateY - diffY;
-          }
-          width = elementRef.current.style.width = `${initialWidth - diffX}px`;
-          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-          break;
-        }
-        case 'right':
-          width = elementRef.current.style.width = `${initialWidth - diffX}px`;
-          height = elementRef.current.style.height = `${initialHeight}px`;
-          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-          break;
-        case 'bottom-right':
-          width = elementRef.current.style.width = `${initialWidth - diffX}px`;
-          height = elementRef.current.style.height = `${
-            initialHeight - diffY
-          }px`;
-          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-          break;
-        case 'bottom':
-          height = elementRef.current.style.height = `${
-            initialHeight - diffY
-          }px`;
-          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-          break;
-        case 'bottom-left': {
-          let newWidth = initialWidth + diffX;
-          if (newWidth >= minWidth) {
-            width = elementRef.current.style.width = `${newWidth}px`;
-            translateX = initialTranslateX - diffX;
-          }
-          height = elementRef.current.style.height = `${
-            initialHeight - diffY
-          }px`;
-          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-          break;
-        }
-        case 'left': {
-          let newWidth = initialWidth + diffX;
-          if (newWidth < minWidth) break;
-          width = elementRef.current.style.width = `${newWidth}px`;
-          height = elementRef.current.style.height = `${initialHeight}px`;
-          translateX = initialTranslateX - diffX;
-          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-          break;
-        }
-        default:
-          break;
-      }
-    };
-    ownerDocument.addEventListener('pointermove', onResizePointerMove);
-    ownerDocument.addEventListener(
-      'pointerup',
-      () => {
-        ownerDocument.removeEventListener('pointermove', onResizePointerMove);
-        if (elementRef.current) {
-          ownerDocument.body.style.userSelect = originalUserSelect;
-          isResizing.current = false;
-          onResizeEnd?.({
-            width,
-            height,
-            transform: `translate(${translateX}px, ${translateY}px)`,
-          });
-        }
-      },
-      {
-        once: true,
-      },
-    );
-  };
-  return React.createElement(
-    React.Fragment,
-    null,
-    React.createElement('div', {
-      'data-iui-resizer': 'top-left',
-      onPointerDown: onResizePointerDown,
-      style: {
-        cursor: 'nw-resize',
-      },
-    }),
-    React.createElement('div', {
-      'data-iui-resizer': 'top',
-      onPointerDown: onResizePointerDown,
-      style: {
-        cursor: 'n-resize',
-      },
-    }),
-    React.createElement('div', {
-      'data-iui-resizer': 'top-right',
-      onPointerDown: onResizePointerDown,
-      style: {
-        cursor: 'ne-resize',
-      },
-    }),
-    React.createElement('div', {
-      'data-iui-resizer': 'right',
-      onPointerDown: onResizePointerDown,
-      style: {
-        cursor: 'e-resize',
-      },
-    }),
-    React.createElement('div', {
-      'data-iui-resizer': 'bottom-right',
-      onPointerDown: onResizePointerDown,
-      style: {
-        cursor: 'se-resize',
-      },
-    }),
-    React.createElement('div', {
-      'data-iui-resizer': 'bottom',
-      onPointerDown: onResizePointerDown,
-      style: {
-        cursor: 's-resize',
-      },
-    }),
-    React.createElement('div', {
-      'data-iui-resizer': 'bottom-left',
-      onPointerDown: onResizePointerDown,
-      style: {
-        cursor: 'sw-resize',
-      },
-    }),
-    React.createElement('div', {
-      'data-iui-resizer': 'left',
-      onPointerDown: onResizePointerDown,
-      style: {
-        cursor: 'w-resize',
-      },
-    }),
-  );
-};
-let ResizerStyles = React.memo(() =>
-  React.createElement('style', null, resizerStyles),
-);
-let resizerStyles = `
-[data-iui-resizer] {
-  pointer-events: auto;
-  grid-area: 1 / 1 / -1 / -1;
-  width: 12px;
-  height: 12px;
-  z-index: 1;
-}
-[data-iui-resizer='top'],
-[data-iui-resizer='bottom'] {
-  height: 8px;
-  width: auto;
-  z-index: 0;
-}
-[data-iui-resizer='left'],
-[data-iui-resizer='right'] {
-  height: auto;
-  width: 8px;
-  z-index: 0;
-}
-[data-iui-resizer^='top'] {
-  align-self: start;
-}
-[data-iui-resizer^='bottom'] {
-  align-self: end;
-}
-[data-iui-resizer$='left'] {
-  justify-self: start;
-}
-[data-iui-resizer$='right'] {
-  justify-self: end;
-}`;

package/DEV-esm/utils/components/ShadowRoot.js

@@ -1,96 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { useLatestRef, useLayoutEffect } from '../hooks/index.js';
-import { useHydration } from '../providers/index.js';
-let isBrowser = 'undefined' != typeof document;
-let supportsDSD =
-  isBrowser && 'shadowRootMode' in HTMLTemplateElement.prototype;
-let supportsAdoptedStylesheets =
-  isBrowser && 'adoptedStyleSheets' in Document.prototype;
-export const ShadowRoot = ({ children, css }) => {
-  let isHydrating = 'hydrating' === useHydration();
-  if (!isBrowser)
-    return React.createElement(
-      'template',
-      {
-        shadowrootmode: 'open',
-      },
-      css && React.createElement('style', null, css),
-      children,
-    );
-  if (supportsDSD && isHydrating) return null;
-  return React.createElement(
-    ClientShadowRoot,
-    {
-      css: css,
-    },
-    children,
-  );
-};
-let ClientShadowRoot = ({ children, css }) => {
-  let templateRef = React.useRef(null);
-  let shadowRoot = useShadowRoot(templateRef, {
-    css,
-  });
-  let fallbackCss =
-    !supportsAdoptedStylesheets && css
-      ? React.createElement('style', null, css)
-      : null;
-  return shadowRoot
-    ? ReactDOM.createPortal(
-        React.createElement(React.Fragment, null, fallbackCss, children),
-        shadowRoot,
-      )
-    : React.createElement('template', {
-        ref: templateRef,
-      });
-};
-function useShadowRoot(templateRef, { css = '' }) {
-  let [shadowRoot, setShadowRoot] = React.useState(null);
-  let styleSheet = React.useRef();
-  let latestCss = useLatestRef(css);
-  let latestShadowRoot = useLatestRef(shadowRoot);
-  let createStyleSheet = React.useCallback(
-    (shadow) => {
-      if (shadow && supportsAdoptedStylesheets) {
-        let currentWindow = shadow.ownerDocument.defaultView || globalThis;
-        if (styleSheet.current instanceof currentWindow.CSSStyleSheet) return;
-        styleSheet.current = new currentWindow.CSSStyleSheet();
-        shadow.adoptedStyleSheets.push(styleSheet.current);
-        if (latestCss.current)
-          styleSheet.current.replaceSync(latestCss.current);
-      }
-    },
-    [latestCss],
-  );
-  useLayoutEffect(() => {
-    let parent = templateRef.current?.parentElement;
-    if (!parent) return;
-    let setupOrReuseShadowRoot = () => {
-      if (parent.shadowRoot && null === latestShadowRoot.current)
-        parent.shadowRoot.replaceChildren();
-      let shadow =
-        parent.shadowRoot ||
-        parent.attachShadow({
-          mode: 'open',
-        });
-      createStyleSheet(shadow);
-      ReactDOM.flushSync(() => setShadowRoot(shadow));
-    };
-    queueMicrotask(() => {
-      setupOrReuseShadowRoot();
-    });
-    return () => void setShadowRoot(null);
-  }, [templateRef, createStyleSheet, latestShadowRoot]);
-  useLayoutEffect(() => {
-    if (css && supportsAdoptedStylesheets) styleSheet.current?.replaceSync(css);
-  }, [css]);
-  React.useEffect(() => {
-    let listener = () => createStyleSheet(latestShadowRoot.current);
-    window.addEventListener('appui:reparent', listener);
-    return () => {
-      window.removeEventListener('appui:reparent', listener);
-    };
-  }, [createStyleSheet, latestShadowRoot]);
-  return shadowRoot;
-}

package/DEV-esm/utils/components/WithCSSTransition.js

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { CSSTransition } from 'react-transition-group';
-import { styles } from '../../styles.js';
-export const WithCSSTransition = (props) => {
-  let { in: visible, dimension = 'height', children, ...rest } = props;
-  let expandedSize = React.useRef(0);
-  let dimensionCamelCase = 'height' === dimension ? 'Height' : 'Width';
-  return React.createElement(
-    CSSTransition,
-    {
-      in: visible,
-      timeout: 200,
-      unmountOnExit: true,
-      onEnter: (node) => {
-        node.style[`min${dimensionCamelCase}`] = 'initial';
-        node.style[dimension] = '0px';
-      },
-      onEntering: (node) => {
-        node.style[dimension] = `${expandedSize.current}px`;
-      },
-      onEntered: (node) => {
-        node.style[`min${dimensionCamelCase}`] = '';
-        node.style[dimension] = '';
-      },
-      onExit: (node) => {
-        node.style[dimension] = `${expandedSize.current}px`;
-      },
-      onExiting: (node) => {
-        node.style[`min${dimensionCamelCase}`] = 'initial';
-        node.style[dimension] = '0px';
-      },
-      classNames: {
-        enter: styles['iui-enter'],
-        enterActive: styles['iui-enter-active'],
-        exit: styles['iui-exit'],
-        exitActive: styles['iui-exit-active'],
-      },
-      ...rest,
-    },
-    React.isValidElement(children)
-      ? React.cloneElement(children, {
-          ref: (el) => {
-            if (el)
-              expandedSize.current = el.getBoundingClientRect()[dimension];
-          },
-        })
-      : React.createElement(React.Fragment, null),
-  );
-};

package/DEV-esm/utils/components/index.js

@@ -1,15 +0,0 @@
-export * from './Resizer.js';
-export * from './FocusTrap.js';
-export * from './InputContainer.js';
-export * from './InputFlexContainer.js';
-export * from './InputWithIcon.js';
-export * from './WithCSSTransition.js';
-export * from './MiddleTextTruncation.js';
-export * from './AutoclearingHiddenLiveRegion.js';
-export * from './Box.js';
-export * from './ButtonBase.js';
-export * from './Portal.js';
-export * from './ShadowRoot.js';
-export * from './LineClamp.js';
-export * from './FieldsetBase.js';
-export * from './OverflowContainer.js';