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

package/esm/core/Tooltip/Tooltip.js

@@ -1,240 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import {
-  useFloating,
-  autoUpdate,
-  offset,
-  flip,
-  shift,
-  useHover,
-  useFocus,
-  useDismiss,
-  useInteractions,
-  safePolygon,
-  size,
-  autoPlacement,
-  hide,
-  inline,
-  useDelayGroup,
-} from '@floating-ui/react';
-import {
-  Box,
-  Portal,
-  cloneElementWithRef,
-  useControlledState,
-  useId,
-  useMergedRefs,
-} from '../../utils/index.js';
-let useTooltip = (options = {}) => {
-  let uniqueId = useId();
-  let {
-    placement = 'top',
-    visible,
-    onVisibleChange,
-    middleware = {
-      flip: true,
-      shift: true,
-    },
-    autoUpdateOptions = {},
-    reference,
-    ariaStrategy = 'description',
-    id = uniqueId,
-    ...props
-  } = options;
-  let [open, onOpenChange] = useControlledState(
-    false,
-    visible,
-    onVisibleChange,
-  );
-  let syncWithControlledState = React.useCallback(
-    (element) => {
-      queueMicrotask(() => {
-        try {
-          element?.togglePopover?.(open);
-        } catch {}
-      });
-    },
-    [open],
-  );
-  let floating = useFloating({
-    placement,
-    open,
-    onOpenChange,
-    strategy: 'fixed',
-    whileElementsMounted: React.useMemo(
-      () =>
-        open ? (...args) => autoUpdate(...args, autoUpdateOptions) : void 0,
-      [autoUpdateOptions, open],
-    ),
-    middleware: React.useMemo(
-      () =>
-        [
-          void 0 !== middleware.offset ? offset(middleware.offset) : offset(4),
-          middleware.flip &&
-            flip({
-              padding: 4,
-            }),
-          middleware.shift &&
-            shift({
-              padding: 4,
-            }),
-          middleware.size &&
-            size({
-              padding: 4,
-            }),
-          middleware.autoPlacement &&
-            autoPlacement({
-              padding: 4,
-            }),
-          middleware.inline && inline(),
-          middleware.hide &&
-            hide({
-              padding: 4,
-            }),
-        ].filter(Boolean),
-      [middleware],
-    ),
-    ...(reference && {
-      elements: {
-        reference,
-      },
-    }),
-  });
-  let ariaProps = React.useMemo(
-    () =>
-      'description' === ariaStrategy
-        ? {
-            'aria-describedby': id,
-          }
-        : 'label' === ariaStrategy
-          ? {
-              'aria-labelledby': id,
-            }
-          : {},
-    [ariaStrategy, id],
-  );
-  let { delay } = useDelayGroup(floating.context, {
-    id: useId(),
-  });
-  let interactions = useInteractions([
-    useHover(floating.context, {
-      delay:
-        0 !== delay
-          ? delay
-          : {
-              open: 50,
-              close: 250,
-            },
-      handleClose: safePolygon({
-        buffer: -1 / 0,
-      }),
-      move: false,
-    }),
-    useFocus(floating.context),
-    useDismiss(floating.context, {
-      referencePress: true,
-      referencePressEvent: 'click',
-    }),
-  ]);
-  React.useEffect(() => {
-    if (!reference) return;
-    let domEventName = (e) => e.toLowerCase().substring(2);
-    let cleanupValues = {};
-    Object.entries({
-      ...ariaProps,
-      ...interactions.getReferenceProps(),
-    }).forEach(([key, value]) => {
-      if ('function' == typeof value) {
-        let patchedHandler = (event) => {
-          value({
-            ...event,
-            nativeEvent: event,
-          });
-        };
-        reference.addEventListener(domEventName(key), patchedHandler);
-        cleanupValues[key] = patchedHandler;
-      } else if (value) {
-        cleanupValues[key] = reference.getAttribute(key);
-        reference.setAttribute(key, value);
-      }
-    });
-    return () => {
-      Object.entries(cleanupValues).forEach(([key, value]) => {
-        if ('function' == typeof value)
-          reference.removeEventListener(domEventName(key), value);
-        else if (value) reference.setAttribute(key, value);
-        else reference.removeAttribute(key);
-      });
-    };
-  }, [ariaProps, reference, interactions]);
-  let getReferenceProps = React.useCallback(
-    (userProps) =>
-      interactions.getReferenceProps({
-        ...userProps,
-        ...ariaProps,
-      }),
-    [interactions, ariaProps],
-  );
-  let floatingProps = React.useMemo(
-    () => ({
-      ...interactions.getFloatingProps({
-        hidden: !open,
-        'aria-hidden': 'true',
-        ...props,
-        id,
-      }),
-      popover: 'manual',
-    }),
-    [interactions, props, id, open],
-  );
-  return React.useMemo(
-    () => ({
-      getReferenceProps,
-      floatingProps,
-      ...floating,
-      refs: {
-        ...floating.refs,
-        setFloating: (element) => {
-          floating.refs.setFloating(element);
-          syncWithControlledState(element);
-        },
-      },
-      floatingStyles: floating.context.open ? floating.floatingStyles : {},
-    }),
-    [getReferenceProps, floatingProps, floating, syncWithControlledState],
-  );
-};
-export const Tooltip = React.forwardRef((props, forwardedRef) => {
-  let { content, children, portal = true, className, style, ...rest } = props;
-  let tooltip = useTooltip(rest);
-  let refs = useMergedRefs(tooltip.refs.setFloating, forwardedRef);
-  return React.createElement(
-    React.Fragment,
-    null,
-    cloneElementWithRef(children, (children) => ({
-      ...tooltip.getReferenceProps(children.props),
-      ref: tooltip.refs.setReference,
-    })),
-    'none' !== props.ariaStrategy || tooltip.context.open
-      ? React.createElement(
-          Portal,
-          {
-            portal: portal,
-          },
-          React.createElement(
-            Box,
-            {
-              className: cx('iui-tooltip', className),
-              ref: refs,
-              style: {
-                ...tooltip.floatingStyles,
-                ...style,
-              },
-              ...tooltip.floatingProps,
-            },
-            content,
-          ),
-        )
-      : null,
-  );
-});

package/esm/core/TransferList/TransferList.d.ts

@@ -1,69 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import { ListItem } from '../List/ListItem.js';
-type TransferListListboxWrapperOwnProps = {};
-type TransferListItemOwnProps = {
-    /**
-     * Callback fired when the the active state changes.
-     */
-    onActiveChange?: (value: boolean) => void;
-} & React.ComponentProps<typeof ListItem>;
-type TransferListListboxLabelOwnProps = {
-    /**
-     * Text label that is wrapped by `TransferList.ListboxLabel`
-     */
-    children?: string;
-};
-/**
- * The TransferList component is used to display a list within a box
- * @example
- * <TransferList>
- *   <TransferList.ListboxWrapper>
- *     <TransferList.Listbox>
- *       <TransferList.Item>Item 1</TransferList.Item>
- *       <TransferList.Item>Item 2</TransferList.Item>
- *       <TransferList.Item>Item 3</TransferList.Item>
- *       <TransferList.Item>Item 4</TransferList.Item>
- *       <TransferList.Item>Item 5</TransferList.Item>
- *       <TransferList.Item>Item 6</TransferList.Item>
- *     </TransferList.Listbox>
- *   </TransferList.ListboxWrapper>
- * </TransferList>
- */
-export declare const TransferList: PolymorphicForwardRefComponent<"div", {}> & {
-    /**
-     * 	TransferList listbox wrapper subcomponent
-     */
-    ListboxWrapper: PolymorphicForwardRefComponent<"div", TransferListListboxWrapperOwnProps>;
-    /**
-     * 	TransferList listbox subcomponent
-     */
-    Listbox: PolymorphicForwardRefComponent<"ul", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-    }, "as"> & {
-        as?: "div" | undefined;
-    }>;
-    /**
-     * 	TransferList item subcomponent
-     */
-    Item: PolymorphicForwardRefComponent<"li", TransferListItemOwnProps>;
-    /**
-     * 	TransferList listbox label subcomponent
-     */
-    ListboxLabel: PolymorphicForwardRefComponent<"div", TransferListListboxLabelOwnProps>;
-    /**
-     * 	TransferList toolbar subcomponent
-     */
-    Toolbar: PolymorphicForwardRefComponent<"div", object>;
-};
-export declare const TransferListContext: React.Context<{
-    /**
-     * Id to set to label and set 'aria-labelledby' prop of the listbox
-     */
-    labelId?: string;
-    /**
-     * Callback that's fired when labelId is changed
-     */
-    setLabelId: (labelId: string) => void;
-} | undefined>;
-export {};

package/esm/core/TransferList/TransferList.js

@@ -1,172 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import {
-  getFocusableElements,
-  useMergedRefs,
-  useId,
-  useSafeContext,
-  Box,
-  polymorphic,
-} from '../../utils/index.js';
-import { List } from '../List/List.js';
-import { ListItem } from '../List/ListItem.js';
-import { Label } from '../Label/Label.js';
-import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
-let TransferListComponent = polymorphic.div('iui-transfer-list-wrapper');
-let TransferListListboxWrapper = React.forwardRef((props, ref) => {
-  let { className, children, ...rest } = props;
-  let uid = useId();
-  let [labelId, setLabelId] = React.useState(uid);
-  return React.createElement(
-    Box,
-    {
-      as: 'div',
-      className: cx('iui-transfer-list-listbox-wrapper', className),
-      ref: ref,
-      ...rest,
-    },
-    React.createElement(
-      TransferListContext.Provider,
-      {
-        value: {
-          labelId,
-          setLabelId,
-        },
-      },
-      children,
-    ),
-  );
-});
-let TransferListListbox = React.forwardRef((props, ref) => {
-  let { children, className, ...rest } = props;
-  let { labelId } = useSafeContext(TransferListContext);
-  let [focusedIndex, setFocusedIndex] = React.useState();
-  let listRef = React.useRef(null);
-  let refs = useMergedRefs(listRef, ref);
-  let getFocusableNodes = React.useCallback(() => {
-    let focusableItems = getFocusableElements(listRef.current);
-    return focusableItems.filter(
-      (i) => !focusableItems.some((p) => p.contains(i.parentElement)),
-    );
-  }, []);
-  React.useEffect(() => {
-    let items = getFocusableNodes();
-    if (null != focusedIndex) {
-      items?.[focusedIndex]?.focus();
-      return;
-    }
-  }, [focusedIndex, getFocusableNodes]);
-  let onKeyDown = (event) => {
-    if (event.altKey) return;
-    let items = getFocusableNodes();
-    if (!items?.length) return;
-    let currentIndex = focusedIndex ?? 0;
-    switch (event.key) {
-      case 'ArrowDown':
-        setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-      case 'ArrowUp':
-        setFocusedIndex(Math.max(currentIndex - 1, 0));
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-      default:
-        break;
-    }
-  };
-  return React.createElement(
-    List,
-    {
-      className: cx('iui-transfer-list-listbox', className),
-      onKeyDown: onKeyDown,
-      role: 'listbox',
-      'aria-multiselectable': true,
-      'aria-labelledby': labelId,
-      tabIndex: 0,
-      ref: refs,
-      ...rest,
-    },
-    children,
-  );
-});
-let TransferListItem = React.forwardRef((props, ref) => {
-  let {
-    actionable = true,
-    disabled,
-    onActiveChange,
-    children,
-    active,
-    ...rest
-  } = props;
-  let onClickEvents = () =>
-    actionable && onActiveChange && onActiveChange(!active);
-  let onKeyDown = (event) => {
-    if (event.altKey) return;
-    if (
-      'Enter' === event.key ||
-      ' ' === event.key ||
-      'Spacebar' === event.key
-    ) {
-      disabled || onClickEvents();
-      event.preventDefault();
-    }
-  };
-  return React.createElement(
-    ListItem,
-    {
-      ref: ref,
-      onClick: onClickEvents,
-      onKeyDown: onKeyDown,
-      active: active,
-      actionable: actionable,
-      tabIndex: -1,
-      role: 'option',
-      'aria-disabled': disabled ? 'true' : void 0,
-      'aria-selected': active ? 'true' : void 0,
-      disabled: disabled,
-      ...rest,
-    },
-    children,
-  );
-});
-let TransferListListboxLabel = React.forwardRef((props, ref) => {
-  let { children, id, ...rest } = props;
-  let { labelId, setLabelId } = useSafeContext(TransferListContext);
-  React.useEffect(() => {
-    if (id && id !== labelId) setLabelId(id);
-  }, [id, labelId, setLabelId]);
-  return React.createElement(
-    Label,
-    {
-      as: 'div',
-      id: labelId,
-      ref: ref,
-      ...rest,
-    },
-    children,
-  );
-});
-let TransferListToolbar = React.forwardRef((props, ref) => {
-  let { className, children, ...rest } = props;
-  return React.createElement(
-    ButtonGroup,
-    {
-      role: 'toolbar',
-      ref: ref,
-      ...rest,
-      orientation: 'vertical',
-      className: cx('iui-transfer-list-toolbar', className),
-    },
-    children,
-  );
-});
-export const TransferList = Object.assign(TransferListComponent, {
-  ListboxWrapper: TransferListListboxWrapper,
-  Listbox: TransferListListbox,
-  Item: TransferListItem,
-  ListboxLabel: TransferListListboxLabel,
-  Toolbar: TransferListToolbar,
-});
-export const TransferListContext = React.createContext(void 0);

package/esm/core/Tree/Tree.d.ts

@@ -1,140 +0,0 @@
-import * as React from 'react';
-import type { CommonProps } from '../../utils/index.js';
-export type NodeData<T> = {
-    /**
-     * Array of the child nodes contained in the node.
-     */
-    subNodes?: Array<T>;
-    /**
-     * Unique id of the node.
-     */
-    nodeId: string;
-    /**
-     * Custom type used to map type `T` to `NodeData`
-     */
-    node: T;
-    /**
-     * Flag whether the node is expanded.
-     */
-    isExpanded?: boolean;
-    /**
-     * Flag whether the node is disabled.
-     */
-    isDisabled?: boolean;
-    /**
-     * Flag whether the node is selected.
-     */
-    isSelected?: boolean;
-    /**
-     * Flag whether the node has sub-nodes.
-     * Used to determine if node should be expandable.
-     */
-    hasSubNodes: boolean;
-};
-export type NodeRenderProps<T> = Omit<NodeData<T>, 'subNodes'>;
-export type TreeProps<T> = {
-    /**
-     * Modify size of the tree.
-     *
-     * @default 'default'
-     */
-    size?: 'default' | 'small';
-    /**
-     * Render function that should return the node element.
-     * Recommended to use `TreeNode` component.
-     *
-     ***Note**: When virtualization is enabled, the return value of `nodeRenderer()` is cloned and a `ref` is passed to it. Thus, you would need a `React.forwardRef` in the component returned by `nodeRenderer()`, except if you are returning `TreeNode` since that already forwards its ref.
-     * @example
-     * const nodeRenderer = React.useCallback(({ node, ...rest }: NodeRenderProps<DataType>) => (
-     *   <TreeNode
-     *     label={node.label}
-     *     onNodeExpanded={onNodeExpanded}
-     *     {...rest}
-     *   />
-     * ), [onNodeExpanded])
-     */
-    nodeRenderer: (props: NodeRenderProps<T>) => JSX.Element;
-    /**
-     * Array of custom data used for `TreeNodes` inside `Tree`.
-     */
-    data: T[];
-    /**
-     * Function that maps your `data` entry to `NodeData` that has all info about the node state.
-     * It will be used to render a tree node in `nodeRenderer`.
-     * Must be memoized.
-     * @example
-     * const getNode = React.useCallback((node: DemoData): NodeData<DemoData> => {
-     *   return {
-     *     subNodes: node.subItems,
-     *     nodeId: node.id,
-     *     node,
-     *     isExpanded: expandedNodes[node.id],
-     *     hasSubNodes: node.subItems.length > 0,
-     *   };
-     * }, [expandedNodes]);
-     */
-    getNode: (node: T) => NodeData<T>;
-    /**
-     * Virtualization is used to have a better performance with a lot of nodes.
-     *
-     * When enabled, Tree DOM structure will change - it will have a wrapper div
-     * to which `className` and `style` will be applied.
-     * @default false
-     * @beta
-     */
-    enableVirtualization?: boolean;
-} & CommonProps;
-/**
- * Tree component used to display a hierarchical structure of `TreeNodes`.
- * User should control state of expanded, selected and disabled nodes using `getNode` prop.
- * @example
-  type DemoData = {
-    id: string;
-    label: string;
-    subItems: DemoData[];
-  };
-
-  const data: Array<DemoData> = [
-    {
-      id: 'Node-1',
-      label: 'Facility 1',
-      subItems: [{ id: 'Node-1-1', label: 'Unit 1', subItems: [] }],
-    },
-    {
-      id: 'Node-2',
-      label: 'Facility 2',
-      subItems: [{ id: 'Node-2-1', label: 'Unit 2', subItems: [] }],
-    },
-  ];
-
-  const [expandedNodes, setExpandedNodes] = React.useState<Record<string, boolean>>({});
-  const onNodeExpanded = React.useCallback((nodeId: string, isExpanded: boolean) => {
-    setExpandedNodes((oldExpanded) => ({ ...oldExpanded, [nodeId]: isExpanded }));
-  }, []);
-
-  const getNode = React.useCallback((node: DemoData): NodeData<DemoData> => {
-    return {
-      subNodes: node.subItems,
-      nodeId: node.id,
-      node,
-      isExpanded: expandedNodes[node.id],
-      hasSubNodes: node.subItems.length > 0,
-    };
-  }, [expandedNodes]);
-
-  <Tree<DemoData>
-    data={data}
-    getNode={getNode}
-    nodeRenderer={React.useCallback(({ node, ...rest }) => (
-      <TreeNode
-        label={node.label}
-        onNodeExpanded={onNodeExpanded}
-        {...rest}
-      />
-    ), [onNodeExpanded])}
-  />
- */
-export declare const Tree: {
-    <T>(props: TreeProps<T>): React.JSX.Element;
-    displayName: string;
-};