@itwin/itwinui-react 3.12.2 → 3.13.0

package/esm/core/Table/utils.js

@@ -1,61 +1,48 @@
 import * as React from 'react';
 export const getCellStyle = (column, isTableResizing) => {
-  const style = {};
-  style.flex = `1 1 145px`;
+  let style = {};
+  style.flex = '1 1 145px';
   if (column.width) {
-    const width =
-      typeof column.width === 'string' ? column.width : `${column.width}px`;
+    let width =
+      'string' == typeof column.width ? column.width : `${column.width}px`;
     style.width = width;
-    if (isTableResizing && column.canResize) {
+    if (isTableResizing && column.canResize)
       style.flex = `${Number(column.width)} ${Number(column.width)} ${width}`;
-    } else {
-      style.flex = `0 0 ${width}`;
-    }
-  }
-  if (column.maxWidth) {
-    style.maxWidth = `${column.maxWidth}px`;
-  }
-  if (column.minWidth) {
-    style.minWidth = `${column.minWidth}px`;
+    else style.flex = `0 0 ${width}`;
   }
+  if (column.maxWidth) style.maxWidth = `${column.maxWidth}px`;
+  if (column.minWidth) style.minWidth = `${column.minWidth}px`;
   return style;
 };
 export const getStickyStyle = (column, columnList) => {
-  if (!column.sticky) {
-    return {};
-  }
+  if (!column.sticky) return {};
   let left = 0;
-  for (const col of columnList) {
-    if (col.id === column.id) {
-      break;
-    }
+  for (let col of columnList) {
+    if (col.id === column.id) break;
     left += Number(col.width || col.resizeWidth || 0);
   }
   let right = 0;
-  for (const col of [...columnList].reverse()) {
-    if (col.id === column.id) {
-      break;
-    }
+  for (let col of [...columnList].reverse()) {
+    if (col.id === column.id) break;
     right += Number(col.width || col.resizeWidth || 0);
   }
   return {
-    '--iui-table-sticky-left':
-      column.sticky === 'left' ? `${left}px` : undefined,
+    '--iui-table-sticky-left': 'left' === column.sticky ? `${left}px` : void 0,
     '--iui-table-sticky-right':
-      column.sticky === 'right' ? `${right}px` : undefined,
+      'right' === column.sticky ? `${right}px` : void 0,
   };
 };
 export const getSubRowStyle = ({ density = 'default', depth = 1 }) => {
   let cellPadding = 16;
   let expanderMargin = 8;
-  if (density === 'condensed') {
+  if ('condensed' === density) {
     cellPadding = 12;
     expanderMargin = 4;
-  } else if (density === 'extra-condensed') {
+  } else if ('extra-condensed' === density) {
     cellPadding = 8;
     expanderMargin = 4;
   }
-  const multiplier = 26 + expanderMargin;
+  let multiplier = 26 + expanderMargin;
   return {
     paddingInlineStart: cellPadding + depth * multiplier,
   };

package/esm/core/Tabs/Tabs.js

@@ -15,8 +15,8 @@ import {
   useLatestRef,
 } from '../../utils/index.js';
 import { Icon } from '../Icon/Icon.js';
-const TabsWrapper = React.forwardRef((props, ref) => {
-  const {
+let TabsWrapper = React.forwardRef((props, ref) => {
+  let {
     className,
     children,
     orientation = 'horizontal',
@@ -28,14 +28,14 @@ const TabsWrapper = React.forwardRef((props, ref) => {
     onValueChange,
     ...rest
   } = props;
-  const [activeValue, setActiveValue] = useControlledState(
+  let [activeValue, setActiveValue] = useControlledState(
     defaultValue,
     activeValueProp,
     onValueChange,
   );
-  const [stripeProperties, setStripeProperties] = React.useState({});
-  const [hasSublabel, setHasSublabel] = React.useState(false);
-  const idPrefix = useId();
+  let [stripeProperties, setStripeProperties] = React.useState({});
+  let [hasSublabel, setHasSublabel] = React.useState(false);
+  let idPrefix = useId();
   return React.createElement(
     Box,
     {
@@ -67,14 +67,13 @@ const TabsWrapper = React.forwardRef((props, ref) => {
     ),
   );
 });
-TabsWrapper.displayName = 'Tabs.Wrapper';
-const TabList = React.forwardRef((props, ref) => {
-  const { className, children, ...rest } = props;
-  const { type, hasSublabel, color } = useSafeContext(TabsContext);
-  const isClient = useIsClient();
-  const tablistRef = React.useRef(null);
-  const [tablistSizeRef, tabsWidth] = useContainerWidth(type !== 'default');
-  const refs = useMergedRefs(
+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,
@@ -87,9 +86,9 @@ const TabList = React.forwardRef((props, ref) => {
         'iui-tabs',
         `iui-${type}`,
         {
-          'iui-green': color === 'green',
-          'iui-animated': type !== 'default' && isClient,
-          'iui-not-animated': type !== 'default' && !isClient,
+          'iui-green': 'green' === color,
+          'iui-animated': 'default' !== type && isClient,
+          'iui-not-animated': 'default' !== type && !isClient,
           'iui-large': hasSublabel,
         },
         className,
@@ -110,10 +109,9 @@ const TabList = React.forwardRef((props, ref) => {
     ),
   );
 });
-TabList.displayName = 'Tabs.TabList';
-const Tab = React.forwardRef((props, forwardedRef) => {
-  const { className, children, value, label, ...rest } = props;
-  const {
+let Tab = React.forwardRef((props, forwardedRef) => {
+  let { className, children, value, label, ...rest } = props;
+  let {
     orientation,
     activeValue,
     setActiveValue,
@@ -122,27 +120,26 @@ const Tab = React.forwardRef((props, forwardedRef) => {
     idPrefix,
     focusActivationMode,
   } = useSafeContext(TabsContext);
-  const { tabsWidth, tablistRef } = useSafeContext(TabListContext);
-  const tabRef = React.useRef();
-  const isActive = activeValue === value;
-  const isActiveRef = useLatestRef(isActive);
+  let { tabsWidth, tablistRef } = useSafeContext(TabListContext);
+  let tabRef = React.useRef();
+  let isActive = activeValue === value;
+  let isActiveRef = useLatestRef(isActive);
   useLayoutEffect(() => {
-    if (isActiveRef.current) {
+    if (isActiveRef.current)
       tabRef.current?.parentElement?.scrollTo({
-        [orientation === 'horizontal' ? 'left' : 'top']:
+        ['horizontal' === orientation ? 'left' : 'top']:
           tabRef.current?.[
-            orientation === 'horizontal' ? 'offsetLeft' : 'offsetTop'
+            'horizontal' === orientation ? 'offsetLeft' : 'offsetTop'
           ] - 4,
         behavior: 'instant',
       });
-    }
   }, [isActiveRef, orientation]);
   useLayoutEffect(() => {
-    const updateStripe = () => {
-      const currentTabRect = tabRef.current?.getBoundingClientRect();
-      const tabslistRect = tablistRef.current?.getBoundingClientRect();
-      const tabsStripePosition =
-        currentTabRect != null && tabslistRect != null
+    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,
@@ -153,70 +150,55 @@ const Tab = React.forwardRef((props, forwardedRef) => {
             };
       setStripeProperties({
         '--iui-tabs-stripe-size':
-          orientation === 'horizontal'
+          'horizontal' === orientation
             ? `${currentTabRect?.width}px`
             : `${currentTabRect?.height}px`,
         '--iui-tabs-stripe-position':
-          orientation === 'horizontal'
+          'horizontal' === orientation
             ? `${tabsStripePosition.horizontal}px`
             : `${tabsStripePosition.vertical}px`,
       });
     };
-    if (type !== 'default' && isActive) {
-      updateStripe();
-    }
+    if ('default' !== type && isActive) updateStripe();
   }, [type, orientation, isActive, tabsWidth, setStripeProperties, tablistRef]);
-  const onKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    const allTabs = Array.from(
-      event.currentTarget.parentElement?.children ?? [],
-    );
-    const nextTab = tabRef.current?.nextElementSibling ?? allTabs.at(0);
-    const previousTab =
-      tabRef.current?.previousElementSibling ?? allTabs.at(-1);
+  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 (orientation === 'vertical') {
+      case 'ArrowDown':
+        if ('vertical' === orientation) {
           nextTab?.focus();
           event.preventDefault();
         }
         break;
-      }
-      case 'ArrowRight': {
-        if (orientation === 'horizontal') {
+      case 'ArrowRight':
+        if ('horizontal' === orientation) {
           nextTab?.focus();
           event.preventDefault();
         }
         break;
-      }
-      case 'ArrowUp': {
-        if (orientation === 'vertical') {
+      case 'ArrowUp':
+        if ('vertical' === orientation) {
           previousTab?.focus();
           event.preventDefault();
         }
         break;
-      }
-      case 'ArrowLeft': {
-        if (orientation === 'horizontal') {
+      case 'ArrowLeft':
+        if ('horizontal' === orientation) {
           previousTab?.focus();
           event.preventDefault();
         }
         break;
-      }
       default:
         break;
     }
   };
-  const setInitialActiveRef = React.useCallback(
+  let setInitialActiveRef = React.useCallback(
     (element) => {
-      if (activeValue !== undefined) {
-        return;
-      }
-      if (element?.matches(':first-of-type')) {
-        setActiveValue(value);
-      }
+      if (void 0 !== activeValue) return;
+      if (element?.matches(':first-of-type')) setActiveValue(value);
     },
     [activeValue, setActiveValue, value],
   );
@@ -238,32 +220,26 @@ const Tab = React.forwardRef((props, forwardedRef) => {
           block: 'nearest',
           inline: 'nearest',
         });
-        if (focusActivationMode === 'auto' && !props.disabled) {
+        if ('auto' === focusActivationMode && !props.disabled)
           setActiveValue(value);
-        }
       }),
     },
     label ? React.createElement(Tabs.TabLabel, null, label) : children,
   );
 });
-Tab.displayName = 'Tabs.Tab';
-const TabIcon = React.forwardRef((props, ref) => {
-  return React.createElement(Icon, {
+let TabIcon = React.forwardRef((props, ref) =>
+  React.createElement(Icon, {
     ...props,
     className: cx('iui-tab-icon', props?.className),
     ref: ref,
-  });
-});
-TabIcon.displayName = 'Tabs.TabIcon';
-const TabLabel = polymorphic.span('iui-tab-label');
-TabLabel.displayName = 'Tabs.TabLabel';
-const TabDescription = React.forwardRef((props, ref) => {
-  const { className, children, ...rest } = props;
-  const { hasSublabel, setHasSublabel } = useSafeContext(TabsContext);
+  }),
+);
+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);
-    }
+    if (!hasSublabel) setHasSublabel(true);
   }, [hasSublabel, setHasSublabel]);
   return React.createElement(
     Box,
@@ -276,9 +252,8 @@ const TabDescription = React.forwardRef((props, ref) => {
     children,
   );
 });
-TabDescription.displayName = 'Tabs.TabDescription';
-const TabsActions = React.forwardRef((props, ref) => {
-  const { wrapperProps, className, children, ...rest } = props;
+let TabsActions = React.forwardRef((props, ref) => {
+  let { wrapperProps, className, children, ...rest } = props;
   return React.createElement(
     Box,
     {
@@ -296,17 +271,16 @@ const TabsActions = React.forwardRef((props, ref) => {
     ),
   );
 });
-TabsActions.displayName = 'Tabs.Actions';
-const TabsPanel = React.forwardRef((props, ref) => {
-  const { value, className, children, ...rest } = props;
-  const { activeValue, idPrefix } = useSafeContext(TabsContext);
+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 ? true : undefined,
+      hidden: activeValue !== value || void 0,
       ref: ref,
       ...rest,
       id: `${idPrefix}-panel-${value.replaceAll(' ', '-')}`,
@@ -314,17 +288,16 @@ const TabsPanel = React.forwardRef((props, ref) => {
     children,
   );
 });
-TabsPanel.displayName = 'Tabs.Panel';
-const LegacyTabsComponent = React.forwardRef((props, forwardedRef) => {
+let LegacyTabsComponent = React.forwardRef((props, forwardedRef) => {
   let actions;
-  if (props.type !== 'pill' && props.actions) {
+  if ('pill' !== props.type && props.actions) {
     actions = props.actions;
     props = {
       ...props,
     };
     delete props.actions;
   }
-  const {
+  let {
     labels,
     onTabSelected,
     focusActivationMode,
@@ -336,7 +309,7 @@ const LegacyTabsComponent = React.forwardRef((props, forwardedRef) => {
     children,
     ...rest
   } = props;
-  const [activeIndex, setActiveIndex] = useControlledState(
+  let [activeIndex, setActiveIndex] = useControlledState(
     0,
     activeIndexProp,
     onTabSelected,
@@ -358,7 +331,7 @@ const LegacyTabsComponent = React.forwardRef((props, forwardedRef) => {
         ref: forwardedRef,
       },
       labels.map((label, index) => {
-        const tabValue = `${index}`;
+        let tabValue = `${index}`;
         return React.isValidElement(label)
           ? React.cloneElement(label, {
               value: tabValue,
@@ -382,9 +355,8 @@ const LegacyTabsComponent = React.forwardRef((props, forwardedRef) => {
       ),
   );
 });
-LegacyTabsComponent.displayName = 'Tabs';
-const LegacyTab = React.forwardRef((props, forwardedRef) => {
-  const { label, sublabel, startIcon, children, value, ...rest } = props;
+let LegacyTab = React.forwardRef((props, forwardedRef) => {
+  let { label, sublabel, startIcon, children, value, ...rest } = props;
   return React.createElement(
     React.Fragment,
     null,
@@ -402,7 +374,6 @@ const LegacyTab = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-export { LegacyTab as Tab };
 export const Tabs = Object.assign(LegacyTabsComponent, {
   Wrapper: TabsWrapper,
   TabList: TabList,
@@ -413,17 +384,16 @@ export const Tabs = Object.assign(LegacyTabsComponent, {
   Actions: TabsActions,
   Panel: TabsPanel,
 });
-const TabsContext = React.createContext(undefined);
-const TabListContext = React.createContext(undefined);
-const useScrollbarGutter = () => {
-  return React.useCallback((element) => {
+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')) {
+        if (!CSS.supports('scrollbar-gutter: stable'))
           element.style.overflowY = 'scroll';
-        }
       }
     }
   }, []);
-};
+export { LegacyTab as Tab };

package/esm/core/Tag/Tag.js

@@ -4,7 +4,7 @@ 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) => {
-  const {
+  let {
     className,
     variant = 'default',
     children,
@@ -14,28 +14,28 @@ export const Tag = React.forwardRef((props, forwardedRef) => {
     removeButtonProps,
     ...rest
   } = props;
-  const shouldUseLinkAction = !!onClick && !!onRemove;
+  let shouldUseLinkAction = !!onClick && !!onRemove;
   return React.createElement(
     Box,
     {
-      as: shouldUseLinkAction ? LinkBox : !!onClick ? ButtonBase : 'span',
+      as: shouldUseLinkAction ? LinkBox : onClick ? ButtonBase : 'span',
       className: cx(
         {
-          'iui-tag-basic': variant === 'basic',
-          'iui-tag': variant === 'default',
+          'iui-tag-basic': 'basic' === variant,
+          'iui-tag': 'default' === variant,
         },
         className,
       ),
       ref: forwardedRef,
-      onClick: !shouldUseLinkAction ? onClick : undefined,
+      onClick: shouldUseLinkAction ? void 0 : onClick,
       ...rest,
     },
-    variant === 'default'
+    'default' === variant
       ? React.createElement(
           Box,
           {
             as: shouldUseLinkAction ? LinkAction : 'span',
-            onClick: shouldUseLinkAction ? onClick : undefined,
+            onClick: shouldUseLinkAction ? onClick : void 0,
             ...labelProps,
             className: cx('iui-tag-label', labelProps?.className),
           },

package/esm/core/Tag/TagContainer.js

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

package/esm/core/Textarea/Textarea.js

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

package/esm/core/ThemeProvider/ThemeContext.js

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