@itwin/itwinui-react 3.15.5 → 5.0.0-alpha.0

package/esm/core/Buttons/DropdownButton.js

@@ -1,48 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { Button } from './Button.js';
-import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
-import { SvgCaretDownSmall, SvgCaretUpSmall } from '../../utils/index.js';
-export const DropdownButton = React.forwardRef((props, forwardedRef) => {
-  let {
-    menuItems,
-    className,
-    size,
-    styleType,
-    children,
-    dropdownMenuProps,
-    ...rest
-  } = props;
-  let [isMenuOpen, setIsMenuOpen] = React.useState(false);
-  return React.createElement(
-    DropdownMenu,
-    {
-      menuItems: menuItems,
-      matchWidth: true,
-      visible: isMenuOpen,
-      ...dropdownMenuProps,
-      onVisibleChange: (open) => {
-        setIsMenuOpen(open);
-        dropdownMenuProps?.onVisibleChange?.(open);
-      },
-    },
-    React.createElement(
-      Button,
-      {
-        className: cx('iui-button-dropdown', className),
-        size: size,
-        styleType: styleType,
-        endIcon: isMenuOpen
-          ? React.createElement(SvgCaretUpSmall, {
-              'aria-hidden': true,
-            })
-          : React.createElement(SvgCaretDownSmall, {
-              'aria-hidden': true,
-            }),
-        ref: forwardedRef,
-        ...rest,
-      },
-      children,
-    ),
-  );
-});

package/esm/core/Buttons/IconButton.d.ts

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { Tooltip } from '../Tooltip/Tooltip.js';
-import type { ButtonProps } from './Button.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-export type IconButtonProps = {
-    /**
-     * Button gets active style.
-     * @default false
-     */
-    isActive?: boolean;
-    /**
-     * Name of the button, shown in a tooltip and exposed to assistive technologies.
-     */
-    label?: React.ReactNode;
-    /**
-     * Props passed to the Tooltip that contains the `label`.
-     * Can be used for customizing the tooltip's `placement`, etc.
-     */
-    labelProps?: Omit<React.ComponentPropsWithoutRef<typeof Tooltip>, 'content' | 'reference' | 'ariaStrategy' | 'children'>;
-    /**
-     * Passes props to IconButton icon.
-     */
-    iconProps?: React.ComponentProps<'span'>;
-    /**
-     * @deprecated Use `label` instead.
-     */
-    title?: string;
-} & Omit<ButtonProps, 'startIcon' | 'endIcon' | 'startIconProps' | 'endIconProps' | 'labelProps' | 'loading'>;
-/**
- * Icon button
- * @example
- * <IconButton label='Add'><SvgAdd /></IconButton>
- * @example
- * <IconButton label='Add' styleType='borderless'><SvgAdd /></IconButton>
- */
-export declare const IconButton: PolymorphicForwardRefComponent<"button", IconButtonProps>;

package/esm/core/Buttons/IconButton.js

@@ -1,60 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import { Box, ButtonBase, useWarningLogger } from '../../utils/index.js';
-import { Tooltip } from '../Tooltip/Tooltip.js';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
-import { ButtonGroupContext } from '../ButtonGroup/ButtonGroup.js';
-import { PopoverOpenContext } from '../Popover/Popover.js';
-export const IconButton = React.forwardRef((props, ref) => {
-  let {
-    isActive,
-    children,
-    styleType = 'default',
-    size,
-    className,
-    title,
-    label = title,
-    iconProps,
-    labelProps,
-    ...rest
-  } = props;
-  let buttonGroupOrientation = React.useContext(ButtonGroupContext);
-  let hasPopoverOpen = React.useContext(PopoverOpenContext);
-  let logWarning = useWarningLogger();
-  let button = React.createElement(
-    ButtonBase,
-    {
-      ref: ref,
-      className: cx('iui-button', 'iui-field', className),
-      'data-iui-variant': 'default' !== styleType ? styleType : void 0,
-      'data-iui-size': size,
-      'data-iui-active': isActive,
-      'data-iui-has-popover': hasPopoverOpen ? 'open' : void 0,
-      'aria-pressed': isActive,
-      ...rest,
-    },
-    React.createElement(
-      Box,
-      {
-        as: 'span',
-        'aria-hidden': true,
-        ...iconProps,
-        className: cx('iui-button-icon', iconProps?.className),
-      },
-      children,
-    ),
-    label ? React.createElement(VisuallyHidden, null, label) : null,
-  );
-  return label
-    ? React.createElement(
-        Tooltip,
-        {
-          placement: 'vertical' === buttonGroupOrientation ? 'right' : 'top',
-          ...labelProps,
-          content: label,
-          ariaStrategy: 'none',
-        },
-        button,
-      )
-    : button;
-});

package/esm/core/Buttons/IdeasButton.d.ts

@@ -1,19 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type IdeasButtonProps = {
-    /**
-     * On click handler.
-     */
-    onClick?: () => void;
-    /**
-     * Localize 'Feedback' label if needed.
-     * @default 'Feedback'
-     */
-    feedbackLabel?: string;
-};
-/**
- * Ideas button
- * @example
- * <IdeasButton />
- */
-export declare const IdeasButton: PolymorphicForwardRefComponent<"button", IdeasButtonProps>;
-export {};

package/esm/core/Buttons/IdeasButton.js

@@ -1,21 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import { SvgSmileyHappy } from '../../utils/index.js';
-import { Button } from './Button.js';
-export const IdeasButton = React.forwardRef((props, ref) => {
-  let { feedbackLabel = 'Feedback', className, onClick, ...rest } = props;
-  return React.createElement(
-    Button,
-    {
-      ref: ref,
-      className: cx('iui-button-idea', className),
-      'data-iui-variant': 'high-visibility',
-      onClick: onClick,
-      startIcon: React.createElement(SvgSmileyHappy, {
-        'aria-hidden': true,
-      }),
-      ...rest,
-    },
-    feedbackLabel,
-  );
-});

package/esm/core/Buttons/SplitButton.d.ts

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import type { ButtonProps } from './Button.js';
-import { IconButton } from './IconButton.js';
-import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
-import type { Placement } from '@floating-ui/react';
-import type { usePopover } from '../Popover/Popover.js';
-export type SplitButtonProps = ButtonProps & {
-    /**
-     * Items in the dropdown menu.
-     * Pass a function that takes the `close` argument (to close the menu),
-     * and returns a list of `MenuItem` components.
-     */
-    menuItems: (close: () => void) => JSX.Element[];
-    /**
-     * Placement of the dropdown menu.
-     * @default 'bottom-end'
-     */
-    menuPlacement?: Placement;
-    /**
-     * Content of primary button.
-     */
-    children: React.ReactNode;
-    /**
-     * Passes props to SplitButton wrapper.
-     */
-    wrapperProps?: React.ComponentProps<'div'>;
-    /**
-     * Passes props to SplitButton menu button.
-     */
-    menuButtonProps?: Omit<React.ComponentProps<typeof IconButton>, 'label' | 'size'>;
-    /**
-     * Props to customize menu behavior.
-     */
-    dropdownMenuProps?: Pick<Parameters<typeof usePopover>[0], 'middleware'>;
-} & Pick<PortalProps, 'portal'>;
-/**
- * Split button component with a DropdownMenu.
- *
- * The delegated props and forwarded ref are passed onto the primary button.
- * It also supports using the `as` prop to change which element is rendered.
- *
- * @example
- * const menuItems = (close: () => void) => [
- *   <MenuItem key={1} onClick={onClick(1, close)}>Item #1</MenuItem>,
- *   <MenuItem key={2} onClick={onClick(2, close)}>Item #2</MenuItem>,
- * ];
- * <SplitButton onClick={onClick} menuItems={menuItems}>Default</SplitButton>
- * <SplitButton onClick={onClick} menuItems={menuItems} styleType='high-visibility'>High visibility</SplitButton>
- */
-export declare const SplitButton: PolymorphicForwardRefComponent<"button", SplitButtonProps>;

package/esm/core/Buttons/SplitButton.js

@@ -1,97 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import { Button } from './Button.js';
-import { IconButton } from './IconButton.js';
-import {
-  Box,
-  SvgCaretDownSmall,
-  SvgCaretUpSmall,
-  useId,
-} from '../../utils/index.js';
-import { Menu } from '../Menu/Menu.js';
-export const SplitButton = React.forwardRef((props, forwardedRef) => {
-  let {
-    onClick,
-    menuItems,
-    className,
-    menuPlacement = 'bottom-end',
-    styleType = 'default',
-    size,
-    children,
-    wrapperProps,
-    menuButtonProps,
-    portal = true,
-    ...rest
-  } = props;
-  let [visible, setVisible] = React.useState(false);
-  let menuContent = React.useMemo(() => {
-    if ('function' == typeof menuItems)
-      return menuItems(() => setVisible(false));
-    return menuItems;
-  }, [menuItems]);
-  let popoverProps = {
-    visible,
-    onVisibleChange: setVisible,
-    placement: menuPlacement,
-    matchWidth: true,
-  };
-  let labelId = useId();
-  let trigger = React.createElement(
-    IconButton,
-    {
-      styleType: styleType,
-      size: size,
-      disabled: props.disabled,
-      'aria-labelledby': props.labelProps?.id || labelId,
-      ...menuButtonProps,
-    },
-    visible
-      ? React.createElement(SvgCaretUpSmall, null)
-      : React.createElement(SvgCaretDownSmall, null),
-  );
-  let [positionReference, setPositionReference] = React.useState(null);
-  return React.createElement(
-    Box,
-    {
-      as: 'div',
-      ...wrapperProps,
-      ref: setPositionReference,
-      className: cx(
-        'iui-button-split',
-        {
-          'iui-disabled': props.disabled,
-        },
-        wrapperProps?.className,
-      ),
-    },
-    React.createElement(
-      Button,
-      {
-        className: className,
-        styleType: styleType,
-        size: size,
-        onClick: onClick,
-        ref: forwardedRef,
-        ...rest,
-        labelProps: {
-          id: labelId,
-          ...props.labelProps,
-        },
-      },
-      children,
-    ),
-    React.createElement(
-      Menu,
-      {
-        popoverProps: popoverProps,
-        trigger: trigger,
-        portal: portal,
-        positionReference: positionReference,
-        onKeyDown: ({ key }) => {
-          if ('Tab' === key) setVisible(false);
-        },
-      },
-      menuContent,
-    ),
-  );
-});

package/esm/core/Carousel/Carousel.d.ts

@@ -1,80 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type CarouselProps = {
-    /**
-     * Index of the currently shown slide.
-     * Can be used to set the default index or control the active slide programmatically.
-     * @default 0
-     */
-    activeSlideIndex?: number;
-    /**
-     * Callback fired when the current slide changes.
-     */
-    onSlideChange?: (index: number) => void;
-};
-/**
- * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
- * shown below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides; this navigation
- * section must be present _before_ the slides in DOM order, even though it is visually shown below the slides.
- *
- * The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device.
- *
- * This component uses a composition approach so it should be used with the provided subcomponents.
- *
- * @example
- * <Carousel>
- *   <Carousel.Navigation />
- *   <Carousel.Slider>
- *     <Carousel.Slide>...</Carousel.Slide>
- *     <Carousel.Slide>...</Carousel.Slide>
- *     <Carousel.Slide>...</Carousel.Slide>
- *   </Carousel.Slider>
- * </Carousel>
- */
-export declare const Carousel: PolymorphicForwardRefComponent<"section", CarouselProps> & {
-    Slider: PolymorphicForwardRefComponent<"div", {}>;
-    Slide: PolymorphicForwardRefComponent<"div", {
-        index?: number;
-    }>;
-    /**
-     * Contains the dots and previous/next buttons for navigating the slides. Must be present _before_ the slides in DOM.
-     */
-    Navigation: PolymorphicForwardRefComponent<"div", {}> & {
-        PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-            ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
-            isActive?: boolean;
-            label?: React.ReactNode;
-            labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
-            iconProps?: React.ComponentProps<"span">;
-            title?: string;
-        } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
-            as?: "button" | undefined;
-        }>;
-        NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-            ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
-            isActive?: boolean;
-            label?: React.ReactNode;
-            labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
-            iconProps?: React.ComponentProps<"span">;
-            title?: string;
-        } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
-            as?: "button" | undefined;
-        }>;
-    };
-    /**
-     * Contains the dots for activating the slides. Must be present _before_ the slides in DOM.
-     */
-    DotsList: PolymorphicForwardRefComponent<"div", {
-        length?: number;
-        currentIndex?: number;
-        onSlideChange?: (index: number) => void;
-    }>;
-    Dot: PolymorphicForwardRefComponent<"button", {
-        isActive?: boolean;
-        isSmall?: boolean;
-        isSmaller?: boolean;
-    }>;
-};
-export {};

package/esm/core/Carousel/Carousel.js

@@ -1,71 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { useMergedRefs, Box, useLatestRef, useId } from '../../utils/index.js';
-import { CarouselContext } from './CarouselContext.js';
-import { CarouselSlider } from './CarouselSlider.js';
-import { CarouselSlide } from './CarouselSlide.js';
-import { CarouselDotsList } from './CarouselDotsList.js';
-import { CarouselDot } from './CarouselDot.js';
-import { CarouselNavigation } from './CarouselNavigation.js';
-let CarouselComponent = React.forwardRef((props, ref) => {
-  let idPrefix = useId();
-  let {
-    activeSlideIndex: userActiveIndex = 0,
-    onSlideChange,
-    className,
-    children,
-    id = idPrefix,
-    ...rest
-  } = props;
-  let isManuallyUpdating = React.useRef(false);
-  let carouselRef = React.useRef(null);
-  let refs = useMergedRefs(carouselRef, ref);
-  let [currentIndex, setCurrentIndex] = React.useState(userActiveIndex);
-  let scrollToSlide = React.useRef(() => {});
-  let justMounted = React.useRef(true);
-  React.useEffect(() => {
-    setCurrentIndex(userActiveIndex);
-    scrollToSlide.current(userActiveIndex, {
-      instant: justMounted.current,
-    });
-    justMounted.current = false;
-  }, [userActiveIndex]);
-  let [slideCount, setSlideCount] = React.useState(0);
-  let userOnSlideChange = useLatestRef(onSlideChange);
-  React.useEffect(() => {
-    userOnSlideChange.current?.(currentIndex);
-  }, [userOnSlideChange, currentIndex]);
-  return React.createElement(
-    Box,
-    {
-      as: 'section',
-      'aria-roledescription': 'carousel',
-      ref: refs,
-      className: cx('iui-carousel', className),
-      ...rest,
-      id: id,
-    },
-    React.createElement(
-      CarouselContext.Provider,
-      {
-        value: {
-          currentIndex,
-          setCurrentIndex,
-          slideCount,
-          setSlideCount,
-          idPrefix: id,
-          isManuallyUpdating,
-          scrollToSlide,
-        },
-      },
-      children,
-    ),
-  );
-});
-export const Carousel = Object.assign(CarouselComponent, {
-  Slider: CarouselSlider,
-  Slide: CarouselSlide,
-  Navigation: CarouselNavigation,
-  DotsList: CarouselDotsList,
-  Dot: CarouselDot,
-});

package/esm/core/Carousel/CarouselContext.d.ts

@@ -1,35 +0,0 @@
-import * as React from 'react';
-export declare const CarouselContext: React.Context<{
-    /**
-     * Stateful index of currently active slide.
-     */
-    currentIndex: number;
-    /**
-     * State updater for currentIndex.
-     */
-    setCurrentIndex: (index: number | ((old: number) => void)) => void;
-    /**
-     * Number of slides in the carousel. Gets set in `CarouselSlider` for reading in `CarouselDotsList`.
-     */
-    slideCount: number;
-    /**
-     * State updater for slideCount.
-     */
-    setSlideCount: (length: number | ((old: number) => void)) => void;
-    /**
-     * Prefix used for setting id for internal carousel components.
-     */
-    idPrefix: string;
-    /**
-     * Ref object used for preventing intersection observer callback from interfering with manual slide updates.
-     *
-     * Should be set to true when updating slides using any manual actions (e.g. clicking buttons), and should be set to false when the slide update completes.
-     */
-    isManuallyUpdating: React.MutableRefObject<boolean>;
-    /**
-     * Function that scrolls to the current slide. Should be called on all managed events (clicks and keydowns).
-     */
-    scrollToSlide: React.MutableRefObject<(slideIndex: number, options?: {
-        instant?: boolean;
-    }) => void>;
-} | undefined>;

package/esm/core/Carousel/CarouselContext.js

@@ -1,2 +0,0 @@
-import * as React from 'react';
-export const CarouselContext = React.createContext(void 0);

package/esm/core/Carousel/CarouselDot.d.ts

@@ -1,15 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type CarouselDotProps = {
-    /** Is this dot currently active? */
-    isActive?: boolean;
-    /** Should be set to true for dots that are one spot from the edge of truncation. The dot size becomes small.  */
-    isSmall?: boolean;
-    /** Should be set to true for dots that are at the edge of truncation. The dot size becomes even smaller.  */
-    isSmaller?: boolean;
-};
-/**
- * `CarouselDot` is the actual "dot" component used to activate a slide on clicking.
- * It should be used as a child of `CarouselDotsList`.
- */
-export declare const CarouselDot: PolymorphicForwardRefComponent<"button", CarouselDotProps>;
-export {};

package/esm/core/Carousel/CarouselDot.js

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { ButtonBase } from '../../utils/index.js';
-export const CarouselDot = React.forwardRef((props, ref) => {
-  let { isActive, isSmaller, isSmall, className, ...rest } = props;
-  return React.createElement(ButtonBase, {
-    role: 'tab',
-    tabIndex: isActive ? 0 : -1,
-    className: cx(
-      'iui-carousel-navigation-dot',
-      {
-        'iui-active': isActive,
-        'iui-first': isSmaller,
-        'iui-second': isSmall,
-      },
-      className,
-    ),
-    'aria-selected': isActive,
-    ref: ref,
-    ...rest,
-  });
-});

package/esm/core/Carousel/CarouselDotsList.d.ts

@@ -1,33 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type CarouselDotsListProps = {
-    /** Number of total dots/slides in the carousel. Will be inferred from Carousel context or children. Otherwise, it is required to be passed. */
-    length?: number;
-    /** Index of currently active dot. Will be inferred from Carousel context, or else default to 0. */
-    currentIndex?: number;
-    /** Callback fired when any of the dots are clicked. */
-    onSlideChange?: (index: number) => void;
-};
-/**
- * The `CarouselDotsList` component shows a list of `CarouselDot` components which can be used to
- * choose a specific slide. If used as a descendant of `Carousel`, then this component does not need
- * any props or `children`.
- *
- * The props can be specified if this component is being used outside `Carousel`. `children` can be specified
- * to override the individual dots that are shown.
- *
- * @example
- * <Carousel>
- *   // ...
- *   <Carousel.DotsList />
- * </Carousel>
- *
- * @example
- * <Carousel.DotsList
- *   length={10}
- *   maxCount={3}
- *   currentIndex={current}
- *   onSlideChange={(i) => setCurrent(i)}
- * />
- */
-export declare const CarouselDotsList: PolymorphicForwardRefComponent<"div", CarouselDotsListProps>;
-export {};