@itwin/itwinui-react 3.13.4 → 3.14.1

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

@@ -1,281 +1,410 @@
 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 {
+  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, {
+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));
+          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, {
+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));
+          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
+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;
-        }
+      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`,
+      });
     };
-    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);
+    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
-    }));
+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);
+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, {
+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));
+        ...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);
+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, {
+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)=>{
+        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));
+        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, {
+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));
+        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
+  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';
-            }
-        }
-    }, []);
+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 };