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

package/esm/core/Tabs/Tabs.js

@@ -1,399 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import {
-  useSafeContext,
-  Box,
-  polymorphic,
-  useIsClient,
-  useLayoutEffect,
-  useMergedRefs,
-  useContainerWidth,
-  ButtonBase,
-  mergeEventHandlers,
-  useControlledState,
-  useId,
-  useLatestRef,
-} from '../../utils/index.js';
-import { Icon } from '../Icon/Icon.js';
-let TabsWrapper = React.forwardRef((props, ref) => {
-  let {
-    className,
-    children,
-    orientation = 'horizontal',
-    type = 'default',
-    focusActivationMode = 'auto',
-    color = 'blue',
-    defaultValue,
-    value: activeValueProp,
-    onValueChange,
-    ...rest
-  } = props;
-  let [activeValue, setActiveValue] = useControlledState(
-    defaultValue,
-    activeValueProp,
-    onValueChange,
-  );
-  let [stripeProperties, setStripeProperties] = React.useState({});
-  let [hasSublabel, setHasSublabel] = React.useState(false);
-  let idPrefix = useId();
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-tabs-wrapper', `iui-${orientation}`, className),
-      ...rest,
-      style: {
-        ...stripeProperties,
-        ...props?.style,
-      },
-      ref: ref,
-    },
-    React.createElement(
-      TabsContext.Provider,
-      {
-        value: {
-          orientation,
-          type,
-          activeValue,
-          setActiveValue,
-          setStripeProperties,
-          idPrefix,
-          focusActivationMode,
-          hasSublabel,
-          setHasSublabel,
-          color,
-        },
-      },
-      children,
-    ),
-  );
-});
-let TabList = React.forwardRef((props, ref) => {
-  let { className, children, ...rest } = props;
-  let { type, hasSublabel, color } = useSafeContext(TabsContext);
-  let isClient = useIsClient();
-  let tablistRef = React.useRef(null);
-  let [tablistSizeRef, tabsWidth] = useContainerWidth('default' !== type);
-  let refs = useMergedRefs(
-    ref,
-    tablistRef,
-    tablistSizeRef,
-    useScrollbarGutter(),
-  );
-  return React.createElement(
-    Box,
-    {
-      className: cx(
-        'iui-tabs',
-        `iui-${type}`,
-        {
-          'iui-green': 'green' === color,
-          'iui-animated': 'default' !== type && isClient,
-          'iui-not-animated': 'default' !== type && !isClient,
-          'iui-large': hasSublabel,
-        },
-        className,
-      ),
-      role: 'tablist',
-      ref: refs,
-      ...rest,
-    },
-    React.createElement(
-      TabListContext.Provider,
-      {
-        value: {
-          tabsWidth,
-          tablistRef,
-        },
-      },
-      children,
-    ),
-  );
-});
-let Tab = React.forwardRef((props, forwardedRef) => {
-  let { className, children, value, label, ...rest } = props;
-  let {
-    orientation,
-    activeValue,
-    setActiveValue,
-    type,
-    setStripeProperties,
-    idPrefix,
-    focusActivationMode,
-  } = useSafeContext(TabsContext);
-  let { tabsWidth, tablistRef } = useSafeContext(TabListContext);
-  let tabRef = React.useRef();
-  let isActive = activeValue === value;
-  let isActiveRef = useLatestRef(isActive);
-  useLayoutEffect(() => {
-    if (isActiveRef.current)
-      tabRef.current?.parentElement?.scrollTo({
-        ['horizontal' === orientation ? 'left' : 'top']:
-          tabRef.current?.[
-            'horizontal' === orientation ? 'offsetLeft' : 'offsetTop'
-          ] - 4,
-        behavior: 'instant',
-      });
-  }, [isActiveRef, orientation]);
-  useLayoutEffect(() => {
-    let updateStripe = () => {
-      let currentTabRect = tabRef.current?.getBoundingClientRect();
-      let tabslistRect = tablistRef.current?.getBoundingClientRect();
-      let tabsStripePosition =
-        null != currentTabRect && null != tabslistRect
-          ? {
-              horizontal: currentTabRect.x - tabslistRect.x,
-              vertical: currentTabRect.y - tabslistRect.y,
-            }
-          : {
-              horizontal: 0,
-              vertical: 0,
-            };
-      setStripeProperties({
-        '--iui-tabs-stripe-size':
-          'horizontal' === orientation
-            ? `${currentTabRect?.width}px`
-            : `${currentTabRect?.height}px`,
-        '--iui-tabs-stripe-position':
-          'horizontal' === orientation
-            ? `${tabsStripePosition.horizontal}px`
-            : `${tabsStripePosition.vertical}px`,
-      });
-    };
-    if ('default' !== type && isActive) updateStripe();
-  }, [type, orientation, isActive, tabsWidth, setStripeProperties, tablistRef]);
-  let onKeyDown = (event) => {
-    if (event.altKey) return;
-    let allTabs = Array.from(event.currentTarget.parentElement?.children ?? []);
-    let nextTab = tabRef.current?.nextElementSibling ?? allTabs.at(0);
-    let previousTab = tabRef.current?.previousElementSibling ?? allTabs.at(-1);
-    switch (event.key) {
-      case 'ArrowDown':
-        if ('vertical' === orientation) {
-          nextTab?.focus();
-          event.preventDefault();
-        }
-        break;
-      case 'ArrowRight':
-        if ('horizontal' === orientation) {
-          nextTab?.focus();
-          event.preventDefault();
-        }
-        break;
-      case 'ArrowUp':
-        if ('vertical' === orientation) {
-          previousTab?.focus();
-          event.preventDefault();
-        }
-        break;
-      case 'ArrowLeft':
-        if ('horizontal' === orientation) {
-          previousTab?.focus();
-          event.preventDefault();
-        }
-        break;
-      default:
-        break;
-    }
-  };
-  let setInitialActiveRef = React.useCallback(
-    (element) => {
-      if (void 0 !== activeValue) return;
-      if (element?.matches(':first-of-type')) setActiveValue(value);
-    },
-    [activeValue, setActiveValue, value],
-  );
-  return React.createElement(
-    ButtonBase,
-    {
-      className: cx('iui-tab', className),
-      role: 'tab',
-      tabIndex: isActive ? 0 : -1,
-      'aria-selected': isActive,
-      'aria-controls': `${idPrefix}-panel-${value.replaceAll(' ', '-')}`,
-      ref: useMergedRefs(tabRef, forwardedRef, setInitialActiveRef),
-      ...rest,
-      id: `${idPrefix}-tab-${value.replaceAll(' ', '-')}`,
-      onClick: mergeEventHandlers(props.onClick, () => setActiveValue(value)),
-      onKeyDown: mergeEventHandlers(props.onKeyDown, onKeyDown),
-      onFocus: mergeEventHandlers(props.onFocus, () => {
-        tabRef.current?.scrollIntoView({
-          block: 'nearest',
-          inline: 'nearest',
-        });
-        if ('auto' === focusActivationMode && !props.disabled)
-          setActiveValue(value);
-      }),
-    },
-    label ? React.createElement(Tabs.TabLabel, null, label) : children,
-  );
-});
-let TabIcon = React.forwardRef((props, ref) =>
-  React.createElement(Icon, {
-    ...props,
-    className: cx('iui-tab-icon', props?.className),
-    ref: ref,
-  }),
-);
-let TabLabel = polymorphic.span('iui-tab-label');
-let TabDescription = React.forwardRef((props, ref) => {
-  let { className, children, ...rest } = props;
-  let { hasSublabel, setHasSublabel } = useSafeContext(TabsContext);
-  useLayoutEffect(() => {
-    if (!hasSublabel) setHasSublabel(true);
-  }, [hasSublabel, setHasSublabel]);
-  return React.createElement(
-    Box,
-    {
-      as: 'span',
-      className: cx('iui-tab-description', className),
-      ref: ref,
-      ...rest,
-    },
-    children,
-  );
-});
-let TabsActions = React.forwardRef((props, ref) => {
-  let { wrapperProps, className, children, ...rest } = props;
-  return React.createElement(
-    Box,
-    {
-      ...wrapperProps,
-      className: cx('iui-tabs-actions-wrapper', wrapperProps?.className),
-    },
-    React.createElement(
-      Box,
-      {
-        className: cx('iui-tabs-actions', className),
-        ref: ref,
-        ...rest,
-      },
-      children,
-    ),
-  );
-});
-let TabsPanel = React.forwardRef((props, ref) => {
-  let { value, className, children, ...rest } = props;
-  let { activeValue, idPrefix } = useSafeContext(TabsContext);
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-tabs-content', className),
-      'aria-labelledby': `${idPrefix}-tab-${value.replaceAll(' ', '-')}`,
-      role: 'tabpanel',
-      hidden: activeValue !== value || void 0,
-      ref: ref,
-      ...rest,
-      id: `${idPrefix}-panel-${value.replaceAll(' ', '-')}`,
-    },
-    children,
-  );
-});
-let LegacyTabsComponent = React.forwardRef((props, forwardedRef) => {
-  let actions;
-  if ('pill' !== props.type && props.actions) {
-    actions = props.actions;
-    props = {
-      ...props,
-    };
-    delete props.actions;
-  }
-  let {
-    labels,
-    onTabSelected,
-    focusActivationMode,
-    color,
-    activeIndex: activeIndexProp,
-    tabsClassName,
-    contentClassName,
-    wrapperClassName,
-    children,
-    ...rest
-  } = props;
-  let [activeIndex, setActiveIndex] = useControlledState(
-    0,
-    activeIndexProp,
-    onTabSelected,
-  );
-  return React.createElement(
-    TabsWrapper,
-    {
-      className: wrapperClassName,
-      focusActivationMode: focusActivationMode,
-      color: color,
-      value: `${activeIndex}`,
-      onValueChange: (value) => setActiveIndex(Number(value)),
-      ...rest,
-    },
-    React.createElement(
-      TabList,
-      {
-        className: tabsClassName,
-        ref: forwardedRef,
-      },
-      labels.map((label, index) => {
-        let tabValue = `${index}`;
-        return React.isValidElement(label)
-          ? React.cloneElement(label, {
-              value: tabValue,
-            })
-          : React.createElement(LegacyTab, {
-              key: index,
-              value: tabValue,
-              label: label,
-            });
-      }),
-    ),
-    actions && React.createElement(TabsActions, null, actions),
-    children &&
-      React.createElement(
-        TabsPanel,
-        {
-          value: `${activeIndex}`,
-          className: contentClassName,
-        },
-        children,
-      ),
-  );
-});
-let LegacyTab = React.forwardRef((props, forwardedRef) => {
-  let { label, sublabel, startIcon, children, value, ...rest } = props;
-  return React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(
-      Tab,
-      {
-        ...rest,
-        value: value,
-        ref: forwardedRef,
-      },
-      startIcon && React.createElement(TabIcon, null, startIcon),
-      React.createElement(TabLabel, null, label),
-      sublabel && React.createElement(TabDescription, null, sublabel),
-      children,
-    ),
-  );
-});
-export const Tabs = Object.assign(LegacyTabsComponent, {
-  Wrapper: TabsWrapper,
-  TabList: TabList,
-  Tab: Tab,
-  TabIcon: TabIcon,
-  TabLabel: TabLabel,
-  TabDescription: TabDescription,
-  Actions: TabsActions,
-  Panel: TabsPanel,
-});
-let TabsContext = React.createContext(void 0);
-let TabListContext = React.createContext(void 0);
-let useScrollbarGutter = () =>
-  React.useCallback((element) => {
-    if (element) {
-      if (element.scrollHeight > element.clientHeight) {
-        element.style.scrollbarGutter = 'stable';
-        if (!CSS.supports('scrollbar-gutter: stable'))
-          element.style.overflowY = 'scroll';
-      }
-    }
-  }, []);
-export { LegacyTab as Tab };

package/esm/core/Tag/Tag.d.ts

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type TagProps = {
-    /**
-     * Text inside the tag.
-     */
-    children: React.ReactNode;
-    /**
-     * Callback invoked when the tag is clicked.
-     *
-     * When this prop is passed, the tag will be rendered as a button.
-     */
-    onClick?: React.MouseEventHandler;
-    /**
-     * Callback function that handles click on the remove ("❌") button.
-     * If not passed, the remove button will not be shown.
-     *
-     * If both `onClick` and `onRemove` are passed, then the tag label (rather than the tag itself)
-     * will be rendered as a button, to avoid invalid markup (nested buttons).
-     */
-    onRemove?: React.MouseEventHandler;
-    /**
-     * Props for customizing the remove ("❌") button.
-     */
-    removeButtonProps?: React.ComponentPropsWithRef<'button'>;
-} & ({
-    /**
-     * Variant of tag.
-     * Basic tags don't have an outline.
-     * @default 'default'
-     */
-    variant?: 'default';
-    /**
-     * Props for customizing the label.
-     *
-     * Only relevant for the 'default' Tag.
-     */
-    labelProps?: React.ComponentPropsWithRef<'span'>;
-} | {
-    variant?: 'basic';
-    labelProps?: never;
-});
-/**
- * Tag for showing categories, filters etc.
- * @example
- * <Tag onRemove={() => alert('Closed a tag!')}>I'm a tag</Tag>
- * <Tag variant='basic'>Basic tag</Tag>
- */
-export declare const Tag: PolymorphicForwardRefComponent<"span", TagProps>;
-export {};

package/esm/core/Tag/Tag.js

@@ -1,61 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import { SvgCloseSmall, Box, ButtonBase } from '../../utils/index.js';
-import { IconButton } from '../Buttons/IconButton.js';
-import { LinkAction, LinkBox } from '../LinkAction/LinkAction.js';
-export const Tag = React.forwardRef((props, forwardedRef) => {
-  let {
-    className,
-    variant = 'default',
-    children,
-    onRemove,
-    onClick,
-    labelProps,
-    removeButtonProps,
-    ...rest
-  } = props;
-  let shouldUseLinkAction = !!onClick && !!onRemove;
-  return React.createElement(
-    Box,
-    {
-      as: shouldUseLinkAction ? LinkBox : onClick ? ButtonBase : 'span',
-      className: cx(
-        {
-          'iui-tag-basic': 'basic' === variant,
-          'iui-tag': 'default' === variant,
-        },
-        className,
-      ),
-      ref: forwardedRef,
-      onClick: shouldUseLinkAction ? void 0 : onClick,
-      ...rest,
-    },
-    'default' === variant
-      ? React.createElement(
-          Box,
-          {
-            as: shouldUseLinkAction ? LinkAction : 'span',
-            onClick: shouldUseLinkAction ? onClick : void 0,
-            ...labelProps,
-            className: cx('iui-tag-label', labelProps?.className),
-          },
-          children,
-        )
-      : children,
-    onRemove &&
-      React.createElement(
-        IconButton,
-        {
-          styleType: 'borderless',
-          size: 'small',
-          onClick: onRemove,
-          'aria-label': 'Delete tag',
-          ...removeButtonProps,
-          className: cx('iui-tag-button', removeButtonProps?.className),
-        },
-        React.createElement(SvgCloseSmall, {
-          'aria-hidden': true,
-        }),
-      ),
-  );
-});

package/esm/core/Tag/TagContainer.d.ts

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type TagContainerProps = {
-    /**
-     * Tags inside the container.
-     */
-    children: React.ReactNode;
-    /**
-     * Overflow solution to the tag container.
-     * Set max-width to have scroll or truncated tags.
-     */
-    overflow?: 'truncate' | 'scroll';
-    /**
-     * Use background to have tags standout in your layout.
-     * Container gets colored background and some spacing applied.
-     * @default 'none'
-     */
-    background?: 'none' | 'filled';
-};
-/**
- * TagContainer for grouping tags.
- * @example
- * <TagContainer><Tag>Tag 1</Tag><Tag>Tag 2</Tag></TagContainer>
- * <TagContainer><Tag variant='basic'>Basic tag</Tag><Tag variant='basic'>Basic tag 2</Tag></TagContainer>
- */
-export declare const TagContainer: PolymorphicForwardRefComponent<"div", TagContainerProps>;
-export {};

package/esm/core/Tag/TagContainer.js

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { Box } from '../../utils/index.js';
-export const TagContainer = React.forwardRef((props, forwardedRef) => {
-  let { className, children, overflow, background = 'none', ...rest } = props;
-  return React.createElement(
-    Box,
-    {
-      className: cx(
-        'iui-tag-container',
-        {
-          [`iui-${overflow}`]: !!overflow,
-          'iui-visible': 'none' !== background,
-        },
-        className,
-      ),
-      ref: forwardedRef,
-      ...rest,
-    },
-    children,
-  );
-});

package/esm/core/Textarea/Textarea.d.ts

@@ -1,14 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-export type TextareaProps = {
-    /**
-     * Status of textarea.
-     */
-    status?: 'positive' | 'warning' | 'negative';
-};
-/**
- * Basic textarea component
- * @example
- * <Textarea placeholder='This is a textarea' />
- * <Textarea disabled={true} placeholder='This is a disabled textarea' />
- */
-export declare const Textarea: PolymorphicForwardRefComponent<"textarea", TextareaProps>;

package/esm/core/Textarea/Textarea.js

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { Input } from '../Input/Input.js';
-export const Textarea = React.forwardRef((props, forwardedRef) =>
-  React.createElement(Input, {
-    as: 'textarea',
-    rows: 3,
-    ref: forwardedRef,
-    ...props,
-  }),
-);

package/esm/core/ThemeProvider/ThemeContext.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import type { ThemeOptions, ThemeType } from './ThemeProvider.js';
-export declare const ThemeContext: React.Context<{
-    theme?: ThemeType;
-    themeOptions?: ThemeOptions;
-    portalContainer?: HTMLElement | null;
-} | undefined>;

package/esm/core/ThemeProvider/ThemeContext.js

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

package/esm/core/ThemeProvider/ThemeProvider.d.ts

@@ -1,103 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-export type ThemeOptions = {
-    /**
-     * Whether to apply high-contrast versions of light and dark themes.
-     * Will default to user preference if browser supports it.
-     */
-    highContrast?: boolean;
-};
-export type ThemeType = 'light' | 'dark' | 'os';
-type RootProps = {
-    /**
-     * Theme to be applied. Can be 'light' or 'dark' or 'os'.
-     *
-     * Note that 'os' will respect the system preference on client but will fallback to 'light'
-     * in SSR environments because it is not possible detect system preference on the server.
-     * This can cause a flash of incorrect theme on first render.
-     *
-     * The 'inherit' option is intended to be used by packages, to enable incremental adoption
-     * of iTwinUI while respecting the theme set by the consuming app. It will fall back to 'light'
-     * if no parent theme is found. Additionally, it will attempt to inherit `themeOptions.highContrast`
-     * and `portalContainer` (if possible).
-     *
-     * @default 'inherit'
-     */
-    theme?: ThemeType | 'inherit';
-    themeOptions?: Pick<ThemeOptions, 'highContrast'> & {
-        /**
-         * Whether or not the element should apply the recommended `background-color` on itself.
-         *
-         * When not specified, the default behavior is to apply a background-color only
-         * if it is the topmost `ThemeProvider` in the tree. Nested `ThemeProvider`s will
-         * be detected using React Context and will not apply a background-color.
-         *
-         * Additionally, if theme is set to `'inherit'`, then this will default to false.
-         *
-         * When set to true or false, it will override the default behavior.
-         */
-        applyBackground?: boolean;
-    };
-};
-type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & {
-    themeOptions?: RootProps['themeOptions'];
-    children: Required<React.ReactNode>;
-    /**
-     * The element used as the portal for floating elements (Tooltip, Toast, DropdownMenu, Dialog, etc).
-     *
-     * Defaults to a `<div>` rendered at the end of the ThemeProvider.
-     *
-     * When passing an element, it is recommended to use state.
-     *
-     * @example
-     * const [myPortal, setMyPortal] = React.useState(null);
-     *
-     * <div ref={setMyPortal} />
-     * <ThemeProvider
-     *   portalContainer={myPortal}
-     * >
-     *   ...
-     * </ThemeProvider>
-     */
-    portalContainer?: HTMLElement;
-    /**
-     * This prop will be used to determine if `styles.css` should be automatically imported at runtime (if not already found).
-     *
-     * By default, this is enabled when using `theme='inherit'`.
-     * This default behavior is useful for packages that want to support incremental adoption of latest iTwinUI,
-     * without requiring consuming applications (that might still be using an older version) to manually import the CSS.
-     *
-     * If true or false is passed, it will override the default behavior.
-     */
-    includeCss?: boolean;
-};
-/**
- * This component provides global state and applies theme to the entire tree
- * that it is wrapping around.
- *
- * The `theme` prop defaults to "inherit", which looks upwards for closest ThemeProvider
- * and falls back to "light" theme if one is not found.
- *
- * If you want to theme the entire app, you should use this component at the root. You can also
- * use this component to apply a different theme to only a part of the tree.
- *
- * By default, the topmost `ThemeProvider` in the tree will apply the recommended
- * `background-color`. You can override this behavior using `themeOptions.applyBackground`.
- *
- * @example
- * <ThemeProvider theme='os'>
- *  <App />
- * </ThemeProvider>
- *
- * @example
- * <ThemeProvider as='body'>
- *   <App />
- * </ThemeProvider>
- *
- * @example
- * <ThemeProvider theme='dark' themeOptions={{ applyBackground: false }}>
- *  <App />
- * </ThemeProvider>
- */
-export declare const ThemeProvider: PolymorphicForwardRefComponent<"div", ThemeProviderOwnProps>;
-export {};