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

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

@@ -22,7 +22,7 @@ export const Label = React.forwardRef((props, forwardedRef) => {
         },
         className,
       ),
-      'data-iui-disabled': !!disabled || void 0,
+      'data-iui-disabled': disabled ? true : void 0,
       ref: forwardedRef,
       ...rest,
     },

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

@@ -1,5 +1,22 @@
-import { polymorphic } from '../../utils/index.js';
-export const List = polymorphic.div('iui-list', {
-  role: 'list',
+import * as React from 'react';
+import { Box } from '../../utils/index.js';
+import { FloatingDelayGroup } from '@floating-ui/react';
+import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
+import cx from 'classnames';
+export const List = React.forwardRef((props, ref) => {
+  let { className, ...rest } = props;
+  return React.createElement(
+    FloatingDelayGroup,
+    {
+      delay: defaultTooltipDelay,
+    },
+    React.createElement(Box, {
+      as: 'div',
+      ref: ref,
+      role: 'list',
+      ...rest,
+      className: cx('iui-list', className),
+    }),
+  );
 });
 List.displayName = 'List';

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

@@ -18,7 +18,7 @@ let OverlayHiddenContent = React.forwardRef((props, ref) => {
   return React.createElement(
     Box,
     {
-      inert: '',
+      inert: 'true',
       ref: ref,
       ...rest,
     },

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

@@ -134,7 +134,7 @@ let Panel = React.forwardRef((props, forwardedRef) => {
           className: cx('iui-panel', className),
           'aria-labelledby': `${id}-header-title`,
           role: 'group',
-          inert: isInert ? '' : void 0,
+          inert: isInert ? 'true' : void 0,
           'data-iui-transitioning': isTransitioning ? 'true' : void 0,
           ...rest,
         },

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

@@ -322,7 +322,7 @@ let PopoverPortal = ({ children, portal = true }) => {
     FloatingPortal,
     {
       key: portalTo?.id,
-      root: portalTo,
+      root: portalTo ?? void 0,
     },
     React.createElement(DisplayContents, null),
     children,

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

@@ -2,6 +2,8 @@ import * as React from 'react';
 import cx from 'classnames';
 import { SvgChevronRight, Box, useControlledState } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
+import { FloatingDelayGroup } from '@floating-ui/react';
+import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
 export const SidenavExpandedContext = React.createContext(void 0);
 export const SideNavigation = React.forwardRef((props, forwardedRef) => {
   let {
@@ -47,47 +49,53 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
         ref: forwardedRef,
       },
       React.createElement(
-        Box,
+        FloatingDelayGroup,
         {
-          as: 'div',
-          className: cx(
-            'iui-side-navigation',
-            {
-              'iui-expanded': isExpanded,
-              'iui-collapsed': !isExpanded,
-            },
-            className,
-          ),
-          ...rest,
+          delay: defaultTooltipDelay,
         },
-        'top' === expanderPlacement && ExpandButton,
         React.createElement(
           Box,
           {
             as: 'div',
-            ...contentProps,
-            className: cx('iui-sidenav-content', contentProps?.className),
+            className: cx(
+              'iui-side-navigation',
+              {
+                'iui-expanded': isExpanded,
+                'iui-collapsed': !isExpanded,
+              },
+              className,
+            ),
+            ...rest,
           },
+          'top' === expanderPlacement && ExpandButton,
           React.createElement(
             Box,
             {
               as: 'div',
-              ...topProps,
-              className: cx('iui-top', topProps?.className),
-            },
-            items,
-          ),
-          React.createElement(
-            Box,
-            {
-              as: 'div',
-              ...bottomProps,
-              className: cx('iui-bottom', bottomProps?.className),
+              ...contentProps,
+              className: cx('iui-sidenav-content', contentProps?.className),
             },
-            secondaryItems,
+            React.createElement(
+              Box,
+              {
+                as: 'div',
+                ...topProps,
+                className: cx('iui-top', topProps?.className),
+              },
+              items,
+            ),
+            React.createElement(
+              Box,
+              {
+                as: 'div',
+                ...bottomProps,
+                className: cx('iui-bottom', bottomProps?.className),
+              },
+              secondaryItems,
+            ),
           ),
+          'bottom' === expanderPlacement && ExpandButton,
         ),
-        'bottom' === expanderPlacement && ExpandButton,
       ),
       submenu && isSubmenuOpen ? submenu : null,
     ),

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/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(() => {
@@ -295,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

@@ -132,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/Tooltip/Tooltip.js

@@ -25,6 +25,10 @@ import {
   useId,
   useMergedRefs,
 } from '../../utils/index.js';
+export const defaultTooltipDelay = {
+  open: 100,
+  close: 200,
+};
 let useTooltip = (options = {}) => {
   let uniqueId = useId();
   let {
@@ -118,13 +122,7 @@ let useTooltip = (options = {}) => {
   });
   let interactions = useInteractions([
     useHover(floating.context, {
-      delay:
-        0 !== delay
-          ? delay
-          : {
-              open: 50,
-              close: 250,
-            },
+      delay: 0 !== delay ? delay : defaultTooltipDelay,
       handleClose: safePolygon({
         buffer: -1 / 0,
       }),

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

@@ -29,7 +29,7 @@ export const VisuallyHidden = React.forwardRef((props, ref) => {
     {
       as: asProp,
       className: cx('iui-visually-hidden', className),
-      'data-iui-unhide-on-focus': !!unhideOnFocus || void 0,
+      'data-iui-unhide-on-focus': unhideOnFocus ? true : void 0,
       ref: ref,
       ...rest,
     },

package/DEV-esm/react-table/react-table.types-test.js

@@ -584,7 +584,7 @@ import {
     [pageSizeList],
   );
   let [globalFilter, setGlobalFilter] = React.useState('');
-  let tableInstance = React.useRef();
+  let tableInstance = React.useRef(void 0);
   let [hoveredRowIndex, setHoveredRowIndex] = React.useState(0);
   let [rowRefMap, setRowRefMap] = React.useState({});
   return React.createElement(

package/DEV-esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.17.0-dev.2';
+const t = '3.17.0';
 const u = new Proxy(
   {},
   {

package/DEV-esm/utils/components/ButtonBase.js

@@ -7,6 +7,7 @@ export const ButtonBase = React.forwardRef((props, forwardedRef) => {
     as: asProp = 'button',
     disabled: disabledProp,
     htmlDisabled,
+    type: typeProp = 'button' === asProp ? 'button' : void 0,
     ...rest
   } = props;
   let isClient = useIsClient();
@@ -16,13 +17,14 @@ export const ButtonBase = React.forwardRef((props, forwardedRef) => {
     if (disabledProp) return;
     handler?.(e);
   };
+  let type = 'button' === asProp && disabledProp ? 'button' : typeProp;
   return React.createElement(Box, {
     as: asProp,
-    type: 'button' === asProp ? 'button' : void 0,
+    type: type,
     ref: forwardedRef,
     'aria-disabled': ariaDisabled ? 'true' : void 0,
     'data-iui-disabled': disabledProp ? 'true' : void 0,
-    disabled: !!(htmlDisabled ?? (!isClient && disabledProp)) || void 0,
+    disabled: htmlDisabled ?? (!isClient && disabledProp) ? true : void 0,
     ...rest,
     className: cx('iui-button-base', props.className),
     onClick: handleIfEnabled(props.onClick),

package/DEV-esm/utils/components/FocusTrap.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { getTabbableElements } from '../functions/focusable.js';
-import { mergeRefs } from '../hooks/useMergedRefs.js';
+import { cloneElementWithRef } from '../functions/react.js';
 export const FocusTrap = (props) => {
   let { children } = props;
-  let childRef = React.useRef();
+  let childRef = React.useRef(void 0);
   let getFirstLastFocusables = () => {
     let elements = getTabbableElements(childRef.current);
     let firstElement = elements[0];
@@ -28,9 +28,9 @@ export const FocusTrap = (props) => {
       onFocus: onFirstFocus,
       'aria-hidden': true,
     }),
-    React.cloneElement(children, {
-      ref: mergeRefs(children.ref, childRef),
-    }),
+    cloneElementWithRef(children, () => ({
+      ref: childRef,
+    })),
     React.createElement('div', {
       tabIndex: 0,
       onFocus: onLastFocus,

package/DEV-esm/utils/components/Portal.js

@@ -3,7 +3,7 @@ import * as ReactDOM from 'react-dom';
 import { useIsClient } from '../hooks/useIsClient.js';
 import { atom } from 'jotai';
 import { useScopedAtom } from '../providers/ScopeProvider.js';
-export const portalContainerAtom = atom(void 0);
+export const portalContainerAtom = atom(null);
 export const Portal = (props) => {
   let { portal = true, children } = props;
   let isClient = useIsClient();

package/DEV-esm/utils/components/ShadowRoot.js

@@ -47,7 +47,7 @@ let ClientShadowRoot = ({ children, css }) => {
 };
 function useShadowRoot(templateRef, { css = '' }) {
   let [shadowRoot, setShadowRoot] = React.useState(null);
-  let styleSheet = React.useRef();
+  let styleSheet = React.useRef(void 0);
   let latestCss = useLatestRef(css);
   let latestShadowRoot = useLatestRef(shadowRoot);
   let createStyleSheet = React.useCallback(

package/DEV-esm/utils/functions/react.js

@@ -3,12 +3,10 @@ import { mergeRefs } from '../hooks/useMergedRefs.js';
 export const cloneElementWithRef = (children, getProps) => {
   if (!children) return null;
   if (!React.isValidElement(children)) return children;
+  let childrenRef = children.props?.ref || children?.ref;
   let props = getProps(children);
   let ref = mergeRefs(
-    ...[
-      'ref' in children ? children.ref : null,
-      'ref' in props ? props.ref : null,
-    ].filter(Boolean),
+    ...[childrenRef, 'ref' in props ? props.ref : null].filter(Boolean),
   );
   return React.cloneElement(children, {
     ...props,

package/DEV-esm/utils/hooks/useDragAndDrop.js

@@ -17,8 +17,8 @@ let getContainerRect = (containerRef) => {
 export const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
   let grabOffsetX = React.useRef(0);
   let grabOffsetY = React.useRef(0);
-  let translateX = React.useRef();
-  let translateY = React.useRef();
+  let translateX = React.useRef(void 0);
+  let translateY = React.useRef(void 0);
   let containerRectRef = React.useRef(getContainerRect(containerRef));
   let adjustTransform = React.useCallback(() => {
     if (!elementRef.current || !enabled) return;

package/DEV-esm/utils/hooks/useEventListener.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export const useEventListener = (eventName, handler, element) => {
-  let savedHandler = React.useRef();
+  let savedHandler = React.useRef(void 0);
   React.useEffect(() => {
     savedHandler.current = handler;
   }, [handler]);