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

package/DEV-esm/core/Tabs/Tabs.js

@@ -1,410 +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,
-    ),
-  );
-});
-TabsWrapper.displayName = 'Tabs.Wrapper';
-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,
-    ),
-  );
-});
-TabList.displayName = 'Tabs.TabList';
-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,
-  );
-});
-Tab.displayName = 'Tabs.Tab';
-let TabIcon = React.forwardRef((props, ref) =>
-  React.createElement(Icon, {
-    ...props,
-    className: cx('iui-tab-icon', props?.className),
-    ref: ref,
-  }),
-);
-TabIcon.displayName = 'Tabs.TabIcon';
-let TabLabel = polymorphic.span('iui-tab-label');
-TabLabel.displayName = 'Tabs.TabLabel';
-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,
-  );
-});
-TabDescription.displayName = 'Tabs.TabDescription';
-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,
-    ),
-  );
-});
-TabsActions.displayName = 'Tabs.Actions';
-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,
-  );
-});
-TabsPanel.displayName = 'Tabs.Panel';
-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,
-      ),
-  );
-});
-LegacyTabsComponent.displayName = 'Tabs';
-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);
-TabsContext.displayName = 'TabsContext';
-let TabListContext = React.createContext(void 0);
-TabListContext.displayName = 'TabListContext';
-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/DEV-esm/core/Tag/Tag.js

@@ -1,62 +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,
-        }),
-      ),
-  );
-});
-Tag.displayName = 'Tag';

package/DEV-esm/core/Tag/TagContainer.js

@@ -1,23 +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,
-  );
-});
-TagContainer.displayName = 'TagContainer';

package/DEV-esm/core/Textarea/Textarea.js

@@ -1,11 +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,
-  }),
-);
-Textarea.displayName = 'Textarea';

package/DEV-esm/core/ThemeProvider/ThemeContext.js

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