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

package/cjs/core/Menu/Menu.js

@@ -1,226 +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, {
-  Menu: function () {
-    return Menu;
-  },
-  MenuContext: function () {
-    return MenuContext;
-  },
-});
-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 _classnames = _interop_require_default._(require('classnames'));
-const _index = require('../../utils/index.js');
-const _Popover = require('../Popover/Popover.js');
-const _react1 = require('@floating-ui/react');
-const Menu = _react.forwardRef((props, ref) => {
-  let {
-    className,
-    trigger,
-    positionReference,
-    portal = true,
-    popoverProps: popoverPropsProp,
-    children,
-    ...rest
-  } = props;
-  let tree = (0, _react1.useFloatingTree)();
-  let nodeId = (0, _react1.useFloatingNodeId)();
-  let parentId = (0, _react1.useFloatingParentNodeId)();
-  let {
-    interactions: interactionsProp,
-    visible: visibleProp,
-    onVisibleChange: onVisibleChangeProp,
-    ...restPopoverProps
-  } = popoverPropsProp ?? {};
-  let {
-    listNavigation: listNavigationPropsProp,
-    hover: hoverProp,
-    ...restInteractionsProps
-  } = interactionsProp ?? {};
-  let [visible, setVisible] = (0, _index.useControlledState)(
-    false,
-    visibleProp,
-    onVisibleChangeProp,
-  );
-  let [hasFocusedNodeInSubmenu, setHasFocusedNodeInSubmenu] =
-    _react.useState(false);
-  let [menuElement, setMenuElement] = _react.useState(null);
-  let { focusableElementsRef, focusableElements } = (0,
-  _index.useFocusableElements)(menuElement, {
-    filter: (allElements) =>
-      allElements.filter(
-        (i) => !allElements?.some((p) => p.contains(i.parentElement)),
-      ),
-  });
-  let [activeIndex, setActiveIndex] = _react.useState(null);
-  let popover = (0, _Popover.usePopover)({
-    nodeId,
-    visible,
-    onVisibleChange: (open) => (open ? setVisible(true) : close()),
-    interactions: {
-      hover:
-        null == tree
-          ? hoverProp
-          : {
-              enabled: !!hoverProp && !hasFocusedNodeInSubmenu,
-              ...hoverProp,
-            },
-      ...restInteractionsProps,
-    },
-    ...restPopoverProps,
-    middleware: {
-      size: {
-        maxHeight: 'var(--iui-menu-max-height)',
-      },
-      ...restPopoverProps.middleware,
-    },
-  });
-  let { getReferenceProps, getFloatingProps, getItemProps } = (0,
-  _react1.useInteractions)([
-    (0, _react1.useListNavigation)(popover.context, {
-      activeIndex,
-      focusItemOnHover: false,
-      listRef: focusableElementsRef,
-      onNavigate: setActiveIndex,
-      ...listNavigationPropsProp,
-    }),
-  ]);
-  _react.useEffect(() => {
-    if (void 0 !== positionReference)
-      popover.refs.setPositionReference(positionReference);
-  }, [popover.refs, positionReference]);
-  let refs = (0, _index.useMergedRefs)(
-    setMenuElement,
-    ref,
-    popover.refs.setFloating,
-  );
-  let triggerRef = _react.useRef(null);
-  let close = _react.useCallback(() => {
-    setVisible(false);
-    if (null == parentId)
-      triggerRef.current?.focus({
-        preventScroll: true,
-      });
-  }, [parentId, setVisible]);
-  (0, _index.useSyncExternalStore)(
-    _react.useCallback(() => {
-      let closeUnrelatedMenus = (event) => {
-        if (
-          (parentId === event.parentId && nodeId !== event.nodeId) ||
-          parentId === event.nodeId
-        ) {
-          setVisible(false);
-          setHasFocusedNodeInSubmenu(false);
-        }
-      };
-      tree?.events.on('onNodeFocused', closeUnrelatedMenus);
-      return () => {
-        tree?.events.off('onNodeFocused', closeUnrelatedMenus);
-      };
-    }, [nodeId, parentId, tree?.events, setVisible]),
-    () => void 0,
-    () => void 0,
-  );
-  let popoverGetItemProps = ({ focusableItemIndex, userProps }) =>
-    getItemProps({
-      ...userProps,
-      tabIndex:
-        null != activeIndex &&
-        activeIndex >= 0 &&
-        null != focusableItemIndex &&
-        focusableItemIndex >= 0 &&
-        activeIndex === focusableItemIndex
-          ? 0
-          : -1,
-      onFocus: (0, _index.mergeEventHandlers)(userProps?.onFocus, () => {
-        queueMicrotask(() => {
-          setHasFocusedNodeInSubmenu(true);
-        });
-        tree?.events.emit('onNodeFocused', {
-          nodeId: nodeId,
-          parentId: parentId,
-        });
-      }),
-      onMouseEnter: (0, _index.mergeEventHandlers)(
-        userProps?.onMouseEnter,
-        (event) => {
-          if (null != focusableItemIndex && focusableItemIndex >= 0)
-            setActiveIndex(focusableItemIndex);
-          if (event.target === event.currentTarget) event.currentTarget.focus();
-        },
-      ),
-    });
-  let reference = (0, _index.cloneElementWithRef)(trigger, (triggerChild) =>
-    getReferenceProps(
-      popover.getReferenceProps({
-        ...triggerChild.props,
-        'aria-expanded': popover.open,
-        ref: (0, _index.mergeRefs)(triggerRef, popover.refs.setReference),
-      }),
-    ),
-  );
-  let floating =
-    popover.open &&
-    _react.createElement(
-      _index.Portal,
-      {
-        portal: portal,
-      },
-      _react.createElement(
-        _index.Box,
-        {
-          as: 'div',
-          className: (0, _classnames.default)('iui-menu', className),
-          ref: refs,
-          ...getFloatingProps(
-            popover.getFloatingProps({
-              role: 'menu',
-              ...rest,
-            }),
-          ),
-        },
-        children,
-      ),
-    );
-  return _react.createElement(
-    _react.Fragment,
-    null,
-    _react.createElement(
-      MenuContext.Provider,
-      {
-        value: {
-          popoverGetItemProps,
-          focusableElements,
-        },
-      },
-      _react.createElement(
-        _Popover.PopoverOpenContext.Provider,
-        {
-          value: popover.open,
-        },
-        reference,
-      ),
-      null != tree
-        ? _react.createElement(
-            _react1.FloatingNode,
-            {
-              id: nodeId,
-            },
-            floating,
-          )
-        : floating,
-    ),
-  );
-});
-const MenuContext = _react.createContext(void 0);

package/cjs/core/Menu/MenuDivider.d.ts

@@ -1,16 +0,0 @@
-/**
- * Divider between menu items. Should be used inside `Menu`.
- * @example
- * <Menu>
- *   {(close) => [
- *     <MenuItem key={0} onClick={() => {}}>
- *       Item #1
- *     </MenuItem>,
- *     <MenuDivider key={1} />,
- *     <MenuItem key={2} onClick={() => {}}>
- *       Item #2
- *     </MenuItem>,
- *   ]}
- * </Menu>
- */
-export declare const MenuDivider: import("../../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;

package/cjs/core/Menu/MenuDivider.js

@@ -1,14 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'MenuDivider', {
-  enumerable: true,
-  get: function () {
-    return MenuDivider;
-  },
-});
-const _index = require('../../utils/index.js');
-const MenuDivider = _index.polymorphic.div('iui-menu-divider', {
-  role: 'separator',
-});

package/cjs/core/Menu/MenuExtraContent.d.ts

@@ -1,21 +0,0 @@
-/**
- * Component that allows to have any additional content inside `Menu`.
- * @example
- * <Menu>
- *   {(close) => [
- *     <MenuExtraContent key={0}>
- *       <>
- *         <Text variant='leading'>Terry Rivers</Text>
- *           terry.rivers@email.com
- *         </Text>
- *         <Select options={someOptions} />
- *       </>
- *     </MenuExtraContent>,
- *     <MenuDivider key={1} />,
- *     <MenuItem key={2} onClick={() => {}}>
- *       Sign out
- *     </MenuItem>,
- *   ]}
- * </Menu>
- */
-export declare const MenuExtraContent: import("../../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;

package/cjs/core/Menu/MenuExtraContent.js

@@ -1,14 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'MenuExtraContent', {
-  enumerable: true,
-  get: function () {
-    return MenuExtraContent;
-  },
-});
-const _index = require('../../utils/index.js');
-const MenuExtraContent = _index.polymorphic.li('iui-menu-content', {
-  role: 'presentation',
-});

package/cjs/core/Menu/MenuItem.d.ts

@@ -1,71 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import type { ListItemOwnProps } from '../List/ListItem.js';
-export type MenuItemProps = {
-    /**
-     * Item is selected.
-     */
-    isSelected?: boolean;
-    /**
-     * Item is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Value of the item.
-     */
-    value?: unknown;
-    /**
-     * Callback function that handles click and keyboard submit actions.
-     */
-    onClick?: (value?: unknown) => void;
-    /**
-     * Modify height of the item.
-     * Use 'large' when any of the sibling items have `sublabel`.
-     *
-     * Defaults to 'large' if `sublabel` provided, otherwise 'default'.
-     */
-    size?: 'default' | 'large';
-    /**
-     * Sub label shown below the main content of the item.
-     */
-    sublabel?: React.ReactNode;
-    /**
-     * SVG icon component shown on the left.
-     */
-    startIcon?: JSX.Element;
-    /**
-     * @deprecated Use startIcon.
-     * SVG icon component shown on the left.
-     */
-    icon?: JSX.Element;
-    /**
-     * SVG icon component shown on the right.
-     */
-    endIcon?: JSX.Element;
-    /**
-     * @deprecated Use endIcon.
-     * SVG icon component shown on the right.
-     */
-    badge?: JSX.Element;
-    /**
-     * ARIA role. For menu item use 'menuitem', for select item use 'option'.
-     * @default 'menuitem'
-     */
-    role?: string;
-    /**
-     * Items to be shown in the submenu when hovered over the item.
-     */
-    subMenuItems?: JSX.Element[];
-    /**
-     * Content of the menu item.
-     */
-    children?: React.ReactNode;
-} & Pick<ListItemOwnProps, 'focused'>;
-/**
- * Basic menu item component. Should be used inside `Menu` component for each item.
- */
-export declare const MenuItem: PolymorphicForwardRefComponent<"div", MenuItemProps>;
-export type TreeEvent = {
-    nodeId: string;
-    parentId: string | null;
-};

package/cjs/core/Menu/MenuItem.js

@@ -1,140 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'MenuItem', {
-  enumerable: true,
-  get: function () {
-    return MenuItem;
-  },
-});
-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 _index = require('../../utils/index.js');
-const _Menu = require('./Menu.js');
-const _ListItem = require('../List/ListItem.js');
-const _classnames = _interop_require_default._(require('classnames'));
-const MenuItem = _react.forwardRef((props, forwardedRef) => {
-  let {
-    className,
-    children,
-    isSelected,
-    disabled,
-    value,
-    onClick: onClickProp,
-    sublabel,
-    size = sublabel ? 'large' : 'default',
-    icon,
-    startIcon = icon,
-    badge,
-    endIcon = badge,
-    role = 'menuitem',
-    subMenuItems = [],
-    ...rest
-  } = props;
-  let logWarning = (0, _index.useWarningLogger)();
-  let parentMenu = _react.useContext(_Menu.MenuContext);
-  let menuItemRef = _react.useRef(null);
-  let submenuId = (0, _index.useId)();
-  let popoverProps = _react.useMemo(
-    () => ({
-      placement: 'right-start',
-      interactions: {
-        click: true,
-        hover: true,
-        listNavigation: {
-          nested: subMenuItems.length > 0,
-          openOnArrowKeyDown: true,
-        },
-      },
-    }),
-    [subMenuItems.length],
-  );
-  let onClick = () => {
-    if (disabled) return;
-    onClickProp?.(value);
-  };
-  let handlers = {
-    onClick,
-  };
-  let focusableItemIndex = parentMenu?.focusableElements.findIndex(
-    (el) => el === menuItemRef.current,
-  );
-  let trigger = _react.createElement(
-    _ListItem.ListItem,
-    {
-      as: 'button',
-      type: 'button',
-      className: (0, _classnames.default)('iui-button-base', className),
-      actionable: true,
-      size: size,
-      active: isSelected,
-      disabled: disabled,
-      ref: (0, _index.useMergedRefs)(menuItemRef, forwardedRef),
-      role: role,
-      tabIndex: isSelected ? 0 : -1,
-      'aria-selected': isSelected,
-      'aria-haspopup': subMenuItems.length > 0 ? 'true' : void 0,
-      'aria-controls': subMenuItems.length > 0 ? submenuId : void 0,
-      'aria-disabled': disabled,
-      ...(parentMenu?.popoverGetItemProps != null
-        ? parentMenu.popoverGetItemProps({
-            focusableItemIndex,
-            userProps: handlers,
-          })
-        : handlers),
-      ...rest,
-    },
-    startIcon &&
-      _react.createElement(
-        _ListItem.ListItem.Icon,
-        {
-          as: 'span',
-          'aria-hidden': true,
-        },
-        startIcon,
-      ),
-    _react.createElement(
-      _ListItem.ListItem.Content,
-      null,
-      _react.createElement('div', null, children),
-      sublabel &&
-        _react.createElement(_ListItem.ListItem.Description, null, sublabel),
-    ),
-    !endIcon &&
-      subMenuItems.length > 0 &&
-      _react.createElement(
-        _ListItem.ListItem.Icon,
-        {
-          as: 'span',
-          'aria-hidden': true,
-        },
-        _react.createElement(_index.SvgCaretRightSmall, null),
-      ),
-    endIcon &&
-      _react.createElement(
-        _ListItem.ListItem.Icon,
-        {
-          as: 'span',
-          'aria-hidden': true,
-        },
-        endIcon,
-      ),
-  );
-  return _react.createElement(
-    _react.Fragment,
-    null,
-    subMenuItems.length > 0 && !disabled
-      ? _react.createElement(
-          _Menu.Menu,
-          {
-            id: submenuId,
-            trigger: trigger,
-            popoverProps: popoverProps,
-          },
-          subMenuItems,
-        )
-      : trigger,
-  );
-});

package/cjs/core/Menu/MenuItemSkeleton.d.ts

@@ -1,30 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type MenuItemSkeletonProps = {
-    /**
-     * Flag whether to show skeleton for sub-label.
-     */
-    hasSublabel?: boolean;
-    /**
-     * Flag whether to show skeleton for icon.
-     */
-    hasIcon?: boolean;
-    /**
-     * Skeleton content width.
-     */
-    contentWidth?: string;
-    /**
-     * Translated strings used for accessibility.
-     */
-    translatedStrings?: {
-        /**
-         * Label for loading state. Defaults to "Loading…".
-         * It is only visible for the screen readers.
-         */
-        loading: string;
-    };
-};
-/**
- * Menu item that uses skeletons to indicate loading state.
- */
-export declare const MenuItemSkeleton: PolymorphicForwardRefComponent<"div", MenuItemSkeletonProps>;
-export {};

package/cjs/core/Menu/MenuItemSkeleton.js

@@ -1,68 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'MenuItemSkeleton', {
-  enumerable: true,
-  get: function () {
-    return MenuItemSkeleton;
-  },
-});
-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 _classnames = _interop_require_default._(require('classnames'));
-const _index = require('../../utils/index.js');
-const _VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
-const MenuItemSkeleton = _react.forwardRef((props, forwardedRef) => {
-  let {
-    hasSublabel,
-    hasIcon,
-    contentWidth,
-    translatedStrings = {
-      loading: 'Loading…',
-    },
-    className,
-    style,
-    ...rest
-  } = props;
-  return _react.createElement(
-    _index.Box,
-    {
-      className: (0, _classnames.default)('iui-menu-item-skeleton', className),
-      'data-iui-size': hasSublabel && 'large',
-      style: {
-        '--iui-menu-item-content-skeleton-max-width': contentWidth,
-        ...style,
-      },
-      ref: forwardedRef,
-      ...rest,
-    },
-    hasIcon &&
-      _react.createElement(_index.Box, {
-        className: 'iui-icon iui-skeleton',
-        'aria-hidden': true,
-      }),
-    _react.createElement(
-      _index.Box,
-      {
-        as: 'span',
-        className: 'iui-content',
-      },
-      _react.createElement(_index.Box, {
-        className: 'iui-menu-label iui-skeleton',
-        'aria-hidden': true,
-      }),
-      hasSublabel &&
-        _react.createElement(_index.Box, {
-          className: 'iui-menu-description iui-skeleton',
-          'aria-hidden': true,
-        }),
-      _react.createElement(
-        _VisuallyHidden.VisuallyHidden,
-        null,
-        translatedStrings.loading,
-      ),
-    ),
-  );
-});

package/cjs/core/Modal/Modal.d.ts

@@ -1,80 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
-import type { DialogMainProps } from '../Dialog/DialogMain.js';
-type ModalProps = {
-    /**
-     * Modal title.
-     */
-    title: React.ReactNode;
-    /**
-     * Handler that is called when Modal is closed.
-     */
-    onClose?: (event?: React.SyntheticEvent) => void;
-    /**
-     * Flag whether modal is dismissible. If false, you can't close it.
-     * @default true
-     */
-    isDismissible?: boolean;
-    /**
-     * Flag whether modal should be closed on background overlay press.
-     * @default true
-     */
-    closeOnExternalClick?: boolean;
-    /**
-     * Flag whether modal should be closed on Escape key press.
-     * @default true
-     */
-    closeOnEsc?: boolean;
-    /**
-     * Handle key press. Returns the keyboard event.
-     */
-    onKeyDown?: React.KeyboardEventHandler;
-    /**
-     * If true, the dialog will be portaled into a <div> inside the nearest `ThemeProvider`.
-     *
-     * Can be set to an object with a `to` property to portal into a specific element.
-     * If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).
-     *
-     * @default true
-     */
-    portal?: PortalProps['portal'];
-    /**
-     * Content of the modal.
-     */
-    children: React.ReactNode;
-    /**
-     * Props for customizing the title bar element.
-     */
-    titleBarProps?: React.ComponentPropsWithRef<'div'>;
-    /**
-     * Props for customizing the dialog-wrapper element.
-     */
-    wrapperProps?: React.ComponentPropsWithoutRef<'div'>;
-    /**
-     * Props for customizing the backdrop element.
-     */
-    backdropProps?: React.ComponentPropsWithRef<'div'>;
-} & Pick<DialogMainProps, 'isOpen' | 'styleType'>;
-/**
- * Modal component which can wrap any content.
- * @example
- * <Modal
- *   isOpen={true}
- *   title='My modal'
- *   onClose={onClose}
- * >
- *   <ModalContent>
- *     Here is my modal content
- *   </ModalContent>
- *   <ModalButtonBar>
- *     <Button styleType='high-visibility'>
- *       Primary button
- *     </Button>
- *     <Button>
- *       Secondary button
- *     </Button>
- *   </ModalButtonBar>
- * </Modal>
- */
-export declare const Modal: PolymorphicForwardRefComponent<"div", ModalProps>;
-export {};