@itwin/itwinui-react 3.17.0-dev.1 → 3.17.0

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

@@ -3,6 +3,8 @@ import * as React from 'react';
 import { getBoundedValue, useEventListener, Box } from '../../utils/index.js';
 import { Track } from './Track.js';
 import { Thumb } from './Thumb.js';
+import { FloatingDelayGroup } from '@floating-ui/react';
+import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
 let getPercentageOfRectangle = (rect, pointerX, pointerY, orientation) => {
   if ('horizontal' === orientation) {
     let position = getBoundedValue(pointerX, rect.left, rect.right);
@@ -284,47 +286,53 @@ export const Slider = React.forwardRef((props, ref) => {
         minValueLabel,
       ),
     React.createElement(
-      Box,
+      FloatingDelayGroup,
       {
-        ref: containerRef,
-        ...trackContainerProps,
-        className: cx(
-          'iui-slider',
-          {
-            'iui-grabbing': void 0 !== activeThumbIndex,
-          },
-          trackContainerProps?.className,
-        ),
-        onPointerDown: handlePointerDownOnSlider,
+        delay: defaultTooltipDelay,
       },
-      currentValues.map((thumbValue, index) => {
-        let [minVal, maxVal] = getAllowableThumbRange(index);
-        let thisThumbProps = thumbProps?.(index);
-        return React.createElement(Thumb, {
-          key: thisThumbProps?.id ?? index,
-          index: index,
-          disabled: disabled,
-          isActive: activeThumbIndex === index,
-          onThumbActivated: onThumbActivated,
-          onThumbValueChanged: onThumbValueChanged,
-          minVal: minVal,
-          maxVal: maxVal,
-          value: thumbValue,
-          tooltipProps: generateTooltipProps(index, thumbValue),
-          thumbProps: thisThumbProps,
-          step: step,
+      React.createElement(
+        Box,
+        {
+          ref: containerRef,
+          ...trackContainerProps,
+          className: cx(
+            'iui-slider',
+            {
+              'iui-grabbing': void 0 !== activeThumbIndex,
+            },
+            trackContainerProps?.className,
+          ),
+          onPointerDown: handlePointerDownOnSlider,
+        },
+        currentValues.map((thumbValue, index) => {
+          let [minVal, maxVal] = getAllowableThumbRange(index);
+          let thisThumbProps = thumbProps?.(index);
+          return React.createElement(Thumb, {
+            key: thisThumbProps?.id ?? index,
+            index: index,
+            disabled: disabled,
+            isActive: activeThumbIndex === index,
+            onThumbActivated: onThumbActivated,
+            onThumbValueChanged: onThumbValueChanged,
+            minVal: minVal,
+            maxVal: maxVal,
+            value: thumbValue,
+            tooltipProps: generateTooltipProps(index, thumbValue),
+            thumbProps: thisThumbProps,
+            step: step,
+            sliderMin: min,
+            sliderMax: max,
+          });
+        }),
+        React.createElement(Track, {
+          trackDisplayMode: trackDisplay,
           sliderMin: min,
           sliderMax: max,
-        });
-      }),
-      React.createElement(Track, {
-        trackDisplayMode: trackDisplay,
-        sliderMin: min,
-        sliderMax: max,
-        values: currentValues,
-        orientation: orientation,
-        ...trackProps,
-      }),
+          values: currentValues,
+          orientation: orientation,
+          ...trackProps,
+        }),
+      ),
     ),
     tickMarkArea,
     maxValueLabel &&

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

@@ -2,6 +2,8 @@ import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
 import { StepperStep } from './StepperStep.js';
+import { FloatingDelayGroup } from '@floating-ui/react';
+import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
 let defaultStepperLocalization = {
   stepsCountLabel: (currentStep, totalSteps) =>
     `Step ${currentStep} of ${totalSteps}:`,
@@ -33,29 +35,35 @@ export const Stepper = React.forwardRef((props, ref) => {
       ...rest,
     },
     React.createElement(
-      'ol',
-      null,
-      steps.map((s, index) => {
-        let thisStepProps = stepProps?.(index);
-        let thisTrackContentProps = trackContentProps?.(index);
-        let thisCircleProps = circleProps?.(index);
-        let thisNameProps = nameProps?.(index);
-        return React.createElement(StepperStep, {
-          stepProps: thisStepProps,
-          trackContentProps: thisTrackContentProps,
-          circleProps: thisCircleProps,
-          nameProps: thisNameProps,
-          key: index,
-          index: index,
-          title: 'long' === type ? '' : s.name,
-          currentStepNumber: boundedCurrentStep,
-          totalSteps: steps.length,
-          type: type,
-          onClick: onStepClick,
-          description: s.description,
-          stepContent: s.stepContent,
-        });
-      }),
+      FloatingDelayGroup,
+      {
+        delay: defaultTooltipDelay,
+      },
+      React.createElement(
+        'ol',
+        null,
+        steps.map((s, index) => {
+          let thisStepProps = stepProps?.(index);
+          let thisTrackContentProps = trackContentProps?.(index);
+          let thisCircleProps = circleProps?.(index);
+          let thisNameProps = nameProps?.(index);
+          return React.createElement(StepperStep, {
+            stepProps: thisStepProps,
+            trackContentProps: thisTrackContentProps,
+            circleProps: thisCircleProps,
+            nameProps: thisNameProps,
+            key: index,
+            index: index,
+            title: 'long' === type ? '' : s.name,
+            currentStepNumber: boundedCurrentStep,
+            totalSteps: steps.length,
+            type: type,
+            onClick: onStepClick,
+            description: s.description,
+            stepContent: s.stepContent,
+          });
+        }),
+      ),
     ),
     'long' === type &&
       React.createElement(

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

@@ -110,7 +110,7 @@ export const Table = (props) => {
     ...rest
   } = props;
   useGlobals();
-  let ownerDocument = React.useRef();
+  let ownerDocument = React.useRef(void 0);
   let defaultColumn = React.useMemo(
     () => ({
       maxWidth: 0,
@@ -623,7 +623,10 @@ export const Table = (props) => {
             },
             React.createElement(
               Box,
-              headerGroupProps,
+              {
+                ...headerGroupProps,
+                key: headerGroupProps.key,
+              },
               headerGroup.headers.map((column, index) => {
                 let dragAndDropProps = column.getDragAndDropProps();
                 return React.createElement(ColumnHeader, {

package/DEV-esm/core/Table/TableRowMemoized.js

@@ -82,6 +82,7 @@ export const TableRow = (props) => {
       Box,
       {
         ...mergedProps,
+        key: mergedProps.key,
         ref: refs,
         onClick: (event) => {
           mergedProps?.onClick?.(event);

package/DEV-esm/core/Table/actionHandlers/selectHandler.js

@@ -7,19 +7,18 @@ let onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
   let newSelectedRowIds = {};
   let handleRow = (row) => {
     if (isRowDisabled?.(row.original)) return false;
+    let hasSubComponents = !!row.initialSubRows[0]?.original[iuiId];
+    let hasSubRows = row.subRows.length > 0 && !hasSubComponents;
     let isAllSubSelected = true;
-    if (row.initialSubRows[0]?.original[iuiId] === void 0)
+    if (hasSubRows)
       row.initialSubRows.forEach((subRow) => {
         let result = handleRow(subRow);
         if (!result) isAllSubSelected = false;
       });
-    if (
-      newState.selectedRowIds[row.id] &&
-      (!instance.selectSubRows ||
-        !row.initialSubRows.length ||
-        isAllSubSelected)
-    )
-      newSelectedRowIds[row.id] = true;
+    let isRowSelected = newState.selectedRowIds[row.id];
+    let case1 = isRowSelected && (!instance.selectSubRows || !hasSubRows);
+    let case2 = hasSubRows && isAllSubSelected;
+    if (case1 || case2) newSelectedRowIds[row.id] = true;
     return !!newSelectedRowIds[row.id];
   };
   instance.initialRows.forEach((row) => handleRow(row));

package/DEV-esm/core/Table/cells/DefaultCell.js

@@ -28,10 +28,12 @@ export const DefaultCell = (props) => {
     clamp = 'string' == typeof cellProps.value && !isCustomCell,
     ...rest
   } = props;
+  let { key: cellElementKey, ...cellElementPropsRest } = cellElementProps;
   return React.createElement(
     Box,
     {
-      ...cellElementProps,
+      ...cellElementPropsRest,
+      key: cellElementKey,
       ...rest,
       className: cx(cellElementClassName, className),
       'aria-disabled': isDisabled?.(cellProps.row.original) || void 0,
@@ -43,22 +45,31 @@ export const DefaultCell = (props) => {
     },
     React.createElement(
       ShadowRoot,
-      null,
+      {
+        key: `${cellElementKey}-shadow-root`,
+      },
       React.createElement('slot', {
         name: 'start',
+        key: `${cellElementKey}-shadow-root-start`,
       }),
       clamp
         ? React.createElement(
             LineClamp,
-            null,
+            {
+              key: `${cellElementKey}-shadow-root-slot`,
+            },
             React.createElement('slot', null),
           )
-        : React.createElement('slot', null),
+        : React.createElement('slot', {
+            key: `${cellElementKey}-shadow-root-slot`,
+          }),
       React.createElement('slot', {
         name: 'end',
+        key: `${cellElementKey}-shadow-root-end`,
       }),
       React.createElement('slot', {
         name: 'shadows',
+        key: `${cellElementKey}-shadow-root-shadows`,
       }),
     ),
     startIcon &&
@@ -67,6 +78,7 @@ export const DefaultCell = (props) => {
         {
           className: 'iui-table-cell-start-icon',
           slot: 'start',
+          key: `${cellElementKey}-start`,
         },
         startIcon,
       ),
@@ -77,6 +89,7 @@ export const DefaultCell = (props) => {
         {
           className: 'iui-table-cell-end-icon',
           slot: 'end',
+          key: `${cellElementKey}-end`,
         },
         endIcon,
       ),

package/DEV-esm/core/Table/filters/defaultFilterFunctions.js

@@ -14,10 +14,9 @@ let exactText = (rows, ids, filterValue) =>
   rows.filter((row) =>
     ids.some((id) => {
       let rowValue = row.values[id];
-      return (
-        void 0 === rowValue ||
-        String(rowValue).toLowerCase() === String(filterValue).toLowerCase()
-      );
+      return void 0 !== rowValue
+        ? String(rowValue).toLowerCase() === String(filterValue).toLowerCase()
+        : true;
     }),
   );
 exactText.autoRemove = (val) => !val;
@@ -25,7 +24,9 @@ let exactTextCase = (rows, ids, filterValue) =>
   rows.filter((row) =>
     ids.some((id) => {
       let rowValue = row.values[id];
-      return void 0 === rowValue || String(rowValue) === String(filterValue);
+      return void 0 !== rowValue
+        ? String(rowValue) === String(filterValue)
+        : true;
     }),
   );
 exactTextCase.autoRemove = (val) => !val;

package/DEV-esm/core/Table/hooks/useResizeColumns.js

@@ -77,9 +77,11 @@ let defaultGetResizerProps =
       let events = isTouchEvent(e)
         ? handlersAndEvents.touch
         : handlersAndEvents.mouse;
-      let passiveIfSupported = !!passiveEventSupported() && {
-        passive: false,
-      };
+      let passiveIfSupported = passiveEventSupported()
+        ? {
+            passive: false,
+          }
+        : false;
       ownerDocument.current?.addEventListener(
         events.moveEvent,
         events.moveHandler,
@@ -279,7 +281,7 @@ let useInstanceBeforeDimensions = (instance) => {
         ? getPreviousResizableHeader(header, instance)
         : getNextResizableHeader(header, instance);
     header.canResize =
-      null == header.disableResizing || !header.disableResizing;
+      null != header.disableResizing ? !header.disableResizing : true;
     if ('fit' === columnResizeMode)
       header.isResizerVisible =
         (header.canResize && !!nextResizableHeader) ||

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

@@ -123,7 +123,7 @@ let Tab = React.forwardRef((props, forwardedRef) => {
     focusActivationMode,
   } = useSafeContext(TabsContext);
   let { tabsWidth, tablistRef } = useSafeContext(TabListContext);
-  let tabRef = React.useRef();
+  let tabRef = React.useRef(void 0);
   let isActive = activeValue === value;
   let isActiveRef = useLatestRef(isActive);
   useLayoutEffect(() => {
@@ -162,7 +162,15 @@ let Tab = React.forwardRef((props, forwardedRef) => {
       });
     };
     if ('default' !== type && isActive) updateStripe();
-  }, [type, orientation, isActive, tabsWidth, setStripeProperties, tablistRef]);
+  }, [
+    type,
+    orientation,
+    isActive,
+    tabsWidth,
+    setStripeProperties,
+    tablistRef,
+    value,
+  ]);
   let onKeyDown = (event) => {
     if (event.altKey) return;
     let allTabs = Array.from(event.currentTarget.parentElement?.children ?? []);
@@ -287,7 +295,7 @@ let TabsPanel = React.forwardRef((props, ref) => {
       className: cx('iui-tabs-content', className),
       'aria-labelledby': `${idPrefix}-tab-${value.replaceAll(' ', '-')}`,
       role: 'tabpanel',
-      hidden: activeValue !== value || void 0,
+      hidden: activeValue !== value ? true : void 0,
       ref: ref,
       ...rest,
       id: `${idPrefix}-panel-${value.replaceAll(' ', '-')}`,

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

@@ -43,8 +43,7 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
     (_themeOptions1.highContrast =
       'inherit' === themeProp ? parent.highContrast : void 0);
   (_future = future).themeBridge ??
-    (_future.themeBridge =
-      'inherit' === themeProp ? parent.context?.future?.themeBridge : void 0);
+    (_future.themeBridge = parent.context?.future?.themeBridge);
   let [portalContainerFromParent] = useScopedAtom(portalContainerAtom);
   let contextValue = React.useMemo(
     () => ({
@@ -133,7 +132,7 @@ let Root = React.forwardRef((props, forwardedRef) => {
       ),
       'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
       'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
-      'data-iui-bridge': !!future?.themeBridge || void 0,
+      'data-iui-bridge': future?.themeBridge ? true : void 0,
       ref: forwardedRef,
       ...rest,
     },

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Transition } from 'react-transition-group';
 import cx from 'classnames';
 import {
   getWindow,
@@ -9,6 +8,7 @@ import {
   useSafeContext,
   ButtonBase,
   useMediaQuery,
+  useLatestRef,
 } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { ToasterStateContext } from './Toaster.js';
@@ -33,7 +33,6 @@ export const Toast = (props) => {
   let [height, setHeight] = React.useState(0);
   let thisElement = React.useRef(null);
   let [margin, setMargin] = React.useState(0);
-  let motionOk = useMediaQuery('(prefers-reduced-motion: no-preference)');
   let marginStyle = () => {
     if ('top' === placementPosition)
       return {
@@ -73,81 +72,41 @@ export const Toast = (props) => {
       setHeight(height);
     }
   };
-  let calculateOutAnimation = (node) => {
-    let translateX = 0;
-    let translateY = 0;
-    if (animateOutTo && node) {
-      let { x: startX, y: startY } = node.getBoundingClientRect();
-      let { x: endX, y: endY } = animateOutTo.getBoundingClientRect();
-      translateX = endX - startX;
-      translateY = endY - startY;
-    }
-    return {
-      translateX,
-      translateY,
-    };
-  };
-  return React.createElement(
-    Transition,
-    {
-      timeout: {
-        enter: 240,
-        exit: animateOutTo ? 400 : 120,
-      },
-      in: isVisible,
-      appear: true,
-      unmountOnExit: true,
-      onEnter: (node) => {
-        if (motionOk) {
-          node.style.transform = 'translateY(15%)';
-          node.style.transitionTimingFunction = 'ease';
-        }
-      },
-      onEntered: (node) => {
-        if (motionOk) node.style.transform = 'translateY(0)';
-      },
-      onExiting: (node) => {
-        if (motionOk) {
-          let { translateX, translateY } = calculateOutAnimation(node);
-          node.style.transform = animateOutTo
-            ? `scale(0.9) translate(${translateX}px,${translateY}px)`
-            : 'scale(0.9)';
-          node.style.opacity = '0';
-          node.style.transitionDuration = animateOutTo ? '400ms' : '120ms';
-          node.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 1, 1)';
-        }
-      },
-      onExited: onRemove,
-    },
-    React.createElement(
-      Box,
-      {
-        ref: thisElement,
-        className: 'iui-toast-all',
-        style: {
-          height,
-          ...marginStyle(),
-        },
-      },
-      React.createElement(
-        'div',
+  let shouldBeMounted = useAnimateToastBasedOnVisibility(isVisible, {
+    thisElement,
+    animateOutTo,
+    onRemove,
+  });
+  return shouldBeMounted
+    ? React.createElement(
+        Box,
         {
-          ref: onRef,
+          ref: thisElement,
+          className: 'iui-toast-all',
+          style: {
+            height,
+            ...marginStyle(),
+          },
         },
-        React.createElement(ToastPresentation, {
-          as: 'div',
-          category: category,
-          content: content,
-          link: link,
-          type: type,
-          hasCloseButton: hasCloseButton,
-          onClose: close,
-          ...domProps?.toastProps,
-          contentProps: domProps?.contentProps,
-        }),
-      ),
-    ),
-  );
+        React.createElement(
+          'div',
+          {
+            ref: onRef,
+          },
+          React.createElement(ToastPresentation, {
+            as: 'div',
+            category: category,
+            content: content,
+            link: link,
+            type: type,
+            hasCloseButton: hasCloseButton,
+            onClose: close,
+            ...domProps?.toastProps,
+            contentProps: domProps?.contentProps,
+          }),
+        ),
+      )
+    : null;
 };
 export const ToastPresentation = React.forwardRef((props, forwardedRef) => {
   let {
@@ -212,3 +171,100 @@ export const ToastPresentation = React.forwardRef((props, forwardedRef) => {
       ),
   );
 });
+let useAnimateToastBasedOnVisibility = (isVisible, args) => {
+  let { thisElement, animateOutTo, onRemove } = args;
+  let [shouldBeMounted, setShouldBeMounted] = React.useState(isVisible);
+  let motionOk = useMediaQuery('(prefers-reduced-motion: no-preference)');
+  let onRemoveRef = useLatestRef(onRemove);
+  let [prevIsVisible, setPrevIsVisible] = React.useState(void 0);
+  React.useEffect(() => {
+    if (prevIsVisible !== isVisible) {
+      setPrevIsVisible(isVisible);
+      if (isVisible) safeAnimateIn();
+      else safeAnimateOut();
+    }
+    function calculateOutAnimation(node) {
+      let translateX = 0;
+      let translateY = 0;
+      if (animateOutTo && node) {
+        let { x: startX, y: startY } = node.getBoundingClientRect();
+        let { x: endX, y: endY } = animateOutTo.getBoundingClientRect();
+        translateX = endX - startX;
+        translateY = endY - startY;
+      }
+      return {
+        translateX,
+        translateY,
+      };
+    }
+    function safeAnimateIn() {
+      setShouldBeMounted(true);
+      queueMicrotask(() => {
+        animateIn();
+      });
+    }
+    function safeAnimateOut() {
+      if (motionOk) {
+        let animation = animateOut();
+        animation?.addEventListener('finish', () => {
+          setShouldBeMounted(false);
+          onRemoveRef.current?.();
+        });
+      } else {
+        setShouldBeMounted(false);
+        onRemoveRef.current?.();
+      }
+    }
+    function animateIn() {
+      if (!motionOk) return;
+      thisElement.current?.animate?.(
+        [
+          {
+            transform: 'translateY(15%)',
+          },
+          {
+            transform: 'translateY(0)',
+          },
+        ],
+        {
+          duration: 240,
+          fill: 'forwards',
+        },
+      );
+    }
+    function animateOut() {
+      if (null == thisElement.current || !motionOk) return;
+      let { translateX, translateY } = calculateOutAnimation(
+        thisElement.current,
+      );
+      let animationDuration = animateOutTo ? 400 : 120;
+      let animation = thisElement.current?.animate?.(
+        [
+          {
+            transform: animateOutTo
+              ? `scale(0.9) translate(${translateX}px,${translateY}px)`
+              : 'scale(0.9)',
+            opacity: 0,
+            transitionDuration: `${animationDuration}ms`,
+            transitionTimingFunction: 'cubic-bezier(0.4, 0, 1, 1)',
+          },
+        ],
+        {
+          duration: animationDuration,
+          iterations: 1,
+          fill: 'forwards',
+        },
+      );
+      return animation;
+    }
+  }, [
+    isVisible,
+    prevIsVisible,
+    animateOutTo,
+    motionOk,
+    thisElement,
+    setShouldBeMounted,
+    onRemoveRef,
+  ]);
+  return shouldBeMounted;
+};

package/DEV-esm/core/Toast/Toaster.js

@@ -66,16 +66,24 @@ export const ToastProvider = ({ children, inherit = false }) => {
       placement: 'top',
     },
   });
-  if (React.useContext(ToasterStateContext) && inherit) return children;
+  let toasterDispatchContext = React.useContext(ToasterDispatchContext);
+  let toasterStateContext = React.useContext(ToasterStateContext);
+  let shouldReuse = toasterStateContext && inherit;
+  let toasterDispatchContextValue = shouldReuse
+    ? toasterDispatchContext
+    : dispatch;
+  let toasterStateContextValue = shouldReuse
+    ? toasterStateContext
+    : toasterState;
   return React.createElement(
     ToasterDispatchContext.Provider,
     {
-      value: dispatch,
+      value: toasterDispatchContextValue,
     },
     React.createElement(
       ToasterStateContext.Provider,
       {
-        value: toasterState,
+        value: toasterStateContextValue,
       },
       children,
     ),