@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.2

package/esm/core/Slider/Slider.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { getBoundedValue, useEventListener, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/slider.css';
 import { Track } from './Track.js';
 import { Thumb } from './Thumb.js';
 const getPercentageOfRectangle = (rect, pointerX, pointerY, orientation) => {
@@ -43,10 +42,9 @@ const formatNumberValue = (value, step, numDecimals) => {
  * Focus specified thumb on Slider control
  */
 const focusThumb = (sliderContainer, activeIndex) => {
-    var _a;
     const doc = sliderContainer.ownerDocument;
     if (!sliderContainer.contains(doc.activeElement) ||
-        Number((_a = doc.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('data-index')) !== activeIndex) {
+        Number(doc.activeElement?.getAttribute('data-index')) !== activeIndex) {
         const thumbToFocus = sliderContainer.querySelector(`[data-index="${activeIndex}"]`);
         thumbToFocus && thumbToFocus.focus();
     }
@@ -60,19 +58,18 @@ const focusThumb = (sliderContainer, activeIndex) => {
  *   thumbMode='allow-crossing' />
  */
 export const Slider = React.forwardRef((props, ref) => {
-    var _a, _b;
     const { min = 0, max = 100, values, step = 1, setFocus = false, tooltipProps, disabled = false, tickLabels, minLabel, maxLabel, trackDisplayMode = 'auto', thumbMode = 'inhibit-crossing', onChange, onUpdate, thumbProps, className, railContainerProps, orientation = 'horizontal', ...rest } = props;
     const [currentValues, setCurrentValues] = React.useState(values);
     React.useEffect(() => {
         setCurrentValues(values);
     }, [values]);
-    const [minValueLabel, setMinValueLabel] = React.useState(() => minLabel !== null && minLabel !== void 0 ? minLabel : min.toString());
+    const [minValueLabel, setMinValueLabel] = React.useState(() => minLabel ?? min.toString());
     React.useEffect(() => {
-        setMinValueLabel(minLabel !== null && minLabel !== void 0 ? minLabel : min.toString());
+        setMinValueLabel(minLabel ?? min.toString());
     }, [minLabel, min]);
-    const [maxValueLabel, setMaxValueLabel] = React.useState(() => maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString());
+    const [maxValueLabel, setMaxValueLabel] = React.useState(() => maxLabel ?? max.toString());
     React.useEffect(() => {
-        setMaxValueLabel(maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString());
+        setMaxValueLabel(maxLabel ?? max.toString());
     }, [maxLabel, max]);
     const [trackDisplay, setTrackDisplay] = React.useState(() => getDefaultTrackDisplay(trackDisplayMode, currentValues));
     React.useEffect(() => {
@@ -112,11 +109,11 @@ export const Slider = React.forwardRef((props, ref) => {
                 newValues[activeThumbIndex] = pointerValue;
                 setCurrentValues(newValues);
                 'onChange' === callbackType
-                    ? onChange === null || onChange === void 0 ? void 0 : onChange(newValues)
-                    : onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(newValues);
+                    ? onChange?.(newValues)
+                    : onUpdate?.(newValues);
             }
             else if ('onChange' === callbackType) {
-                onChange === null || onChange === void 0 ? void 0 : onChange(currentValues);
+                onChange?.(currentValues);
             }
         }
     }, [
@@ -144,12 +141,12 @@ export const Slider = React.forwardRef((props, ref) => {
             return;
         }
         if (keyboardReleased) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(currentValues); // currentValues since key up should not change value but only stop continuous value selection
+            onChange?.(currentValues); // currentValues since key up should not change value but only stop continuous value selection
         }
         else {
             const newValues = [...currentValues]; // newValues since key down should change value
             newValues[index] = value;
-            onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(newValues);
+            onUpdate?.(newValues);
             setCurrentValues(newValues);
         }
     }, [currentValues, onUpdate, onChange]);
@@ -179,8 +176,8 @@ export const Slider = React.forwardRef((props, ref) => {
             const newValues = [...currentValues];
             newValues[closestValueIndex] = pointerValue;
             setCurrentValues(newValues);
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValues);
-            onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(newValues);
+            onChange?.(newValues);
+            onUpdate?.(newValues);
             focusThumb(containerRef.current, closestValueIndex);
             event.preventDefault();
             event.stopPropagation();
@@ -195,8 +192,8 @@ export const Slider = React.forwardRef((props, ref) => {
         onUpdate,
         orientation,
     ]);
-    useEventListener('pointermove', handlePointerMove, (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
-    useEventListener('pointerup', handlePointerUp, (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
+    useEventListener('pointermove', handlePointerMove, containerRef.current?.ownerDocument);
+    useEventListener('pointerup', handlePointerUp, containerRef.current?.ownerDocument);
     const tickMarkArea = React.useMemo(() => {
         if (!tickLabels) {
             return null;
@@ -224,10 +221,9 @@ export const Slider = React.forwardRef((props, ref) => {
             }), onPointerDown: handlePointerDownOnSlider, ...railContainerProps },
             React.createElement(Box, { className: 'iui-slider-rail' }),
             currentValues.map((thumbValue, index) => {
-                var _a;
                 const [minVal, maxVal] = getAllowableThumbRange(index);
-                const thisThumbProps = thumbProps === null || thumbProps === void 0 ? void 0 : thumbProps(index);
-                return (React.createElement(Thumb, { key: (_a = thisThumbProps === null || thisThumbProps === void 0 ? void 0 : thisThumbProps.id) !== null && _a !== void 0 ? _a : 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, orientation: orientation }));
+                const 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, orientation: orientation }));
             }),
             React.createElement(Track, { trackDisplayMode: trackDisplay, sliderMin: min, sliderMax: max, values: currentValues, orientation: orientation }),
             tickMarkArea),

package/esm/core/Slider/Thumb.js

@@ -57,7 +57,7 @@ export const Thumb = (props) => {
         return (100.0 * (adjustedValue - sliderMin)) / (sliderMax - sliderMin);
     }, [adjustedValue, sliderMax, sliderMin]);
     const { style, className, ...rest } = thumbProps || {};
-    return (React.createElement(Tooltip, { placement: 'top', trigger: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.visible) == null ? 'mouseenter click focus' : undefined, ...tooltipProps },
+    return (React.createElement(Tooltip, { placement: 'top', trigger: tooltipProps?.visible == null ? 'mouseenter click focus' : undefined, ...tooltipProps },
         React.createElement(Box, { ...rest, "data-index": index, ref: thumbRef, style: {
                 ...style,
                 ...(orientation === 'horizontal'

package/esm/core/Slider/Track.js

@@ -3,6 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
+import { Box } from '../utils/index.js';
 function shouldDisplaySegment(segmentIndex, mode) {
     if ('odd-segments' === mode && 0 === (segmentIndex + 1) % 2) {
         return true;
@@ -49,7 +50,7 @@ export const Track = (props) => {
                 ? 100.0 -
                     (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin)
                 : 100;
-            return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement("div", { className: 'iui-slider-track', style: {
+            return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement(Box, { className: 'iui-slider-track', style: {
                     ...(orientation === 'horizontal'
                         ? {
                             left: `${lowPercent}%`,

package/esm/core/StatusMessage/StatusMessage.js

@@ -11,7 +11,7 @@ import { Box, StatusIconMap } from '../utils/index.js';
  * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
  */
 export const StatusMessage = ({ startIcon: userStartIcon, children, status, }) => {
-    const icon = userStartIcon !== null && userStartIcon !== void 0 ? userStartIcon : (status && StatusIconMap[status]());
+    const icon = userStartIcon ?? (status && StatusIconMap[status]());
     return (React.createElement(React.Fragment, null,
         !!icon ? (React.createElement(Box, { as: 'span', className: 'iui-input-icon', "aria-hidden": true }, icon)) : null,
         React.createElement(Box, { className: 'iui-message' }, children)));

package/esm/core/Stepper/Stepper.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/stepper.css';
 export declare type StepperLocalization = {
     stepsCountLabel: (currentStep: number, totalSteps: number) => string;
 };

package/esm/core/Stepper/Stepper.js

@@ -4,14 +4,13 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/stepper.css';
 import { StepperStep } from './StepperStep.js';
 const defaultStepperLocalization = {
     stepsCountLabel: (currentStep, totalSteps) => `Step ${currentStep} of ${totalSteps}:`,
 };
 export const Stepper = React.forwardRef((props, ref) => {
     const { currentStep, steps, type = 'default', localization = defaultStepperLocalization, onStepClick, ...rest } = props;
-    const boundedCurrentStep = Math.min(Math.max(0, currentStep !== null && currentStep !== void 0 ? currentStep : 0), steps.length - 1);
+    const boundedCurrentStep = Math.min(Math.max(0, currentStep ?? 0), steps.length - 1);
     return (React.createElement(Box, { className: 'iui-stepper', ref: ref, ...rest },
         React.createElement("ol", null, steps.map((s, index) => (React.createElement(StepperStep, { key: index, index: index, title: type === 'long' ? '' : s.name, currentStepNumber: boundedCurrentStep, totalSteps: steps.length, type: type, onClick: onStepClick, description: s.description })))),
         type === 'long' && (React.createElement(Box, { className: 'iui-stepper-steps-label' },

package/esm/core/Stepper/StepperStep.js

@@ -13,7 +13,7 @@ export const StepperStep = React.forwardRef((props, forwardedRef) => {
     const isClickable = isPast && !!onClick;
     const onCompletedClick = () => {
         if (isClickable) {
-            onClick === null || onClick === void 0 ? void 0 : onClick(index);
+            onClick?.(index);
         }
     };
     const onKeyDown = (e) => {

package/esm/core/Stepper/WorkflowDiagram.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/workflow-diagram.css';
 import type { StepperProps } from './Stepper.js';
 declare type WorkflowDiagramProps = Pick<StepperProps, 'steps'>;
 export declare const WorkflowDiagram: PolymorphicForwardRefComponent<"ol", WorkflowDiagramProps>;

package/esm/core/Stepper/WorkflowDiagram.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/workflow-diagram.css';
 import { WorkflowDiagramStep } from './WorkflowDiagramStep.js';
 export const WorkflowDiagram = React.forwardRef(
 // TODO: Remove this ref cast. ref and rest props should be applied on the same element

package/esm/core/Surface/Surface.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/surface.css';
 declare type SurfaceBodyOwnProps = {
     /**
      * Gives padding to the surface body

package/esm/core/Surface/Surface.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useSafeContext, supportsHas, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/surface.css';
 /**
  * Helper function that returns one of the preset surface elevation values.
  */

package/esm/core/Table/Table.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { CellProps, TableOptions, Row, TableState } from 'react-table';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/table.css';
 import type { TableFilterValue } from './filters/index.js';
 export declare const tableResizeStartAction = "tableResizeStart";
 export declare type TablePaginatorRendererProps = {

package/esm/core/Table/Table.js

@@ -6,8 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { actions as TableActions, useFlexLayout, useFilters, useRowSelect, useSortBy, useTable, useExpanded, usePagination, useColumnOrder, useGlobalFilter, } from 'react-table';
 import { ProgressRadial } from '../ProgressIndicators/index.js';
-import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useIsomorphicLayoutEffect, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/table.css';
+import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useIsomorphicLayoutEffect, Box, } from '../utils/index.js';
 import { getCellStyle, getStickyStyle } from './utils.js';
 import { TableRowMemoized } from './TableRowMemoized.js';
 import { FilterToggle } from './filters/index.js';
@@ -26,7 +25,7 @@ let isDev = false;
 try {
     isDev = process.env.NODE_ENV !== 'production';
 }
-catch (_a) { }
+catch { }
 const flattenColumns = (columns) => {
     const flatColumns = [];
     columns.forEach((column) => {
@@ -111,11 +110,11 @@ export const Table = (props) => {
             return;
         }
         const ownerDoc = ownerDocument.current;
-        ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.addEventListener('keydown', disableUserSelect);
-        ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.addEventListener('keyup', enableUserSelect);
+        ownerDoc?.addEventListener('keydown', disableUserSelect);
+        ownerDoc?.addEventListener('keyup', enableUserSelect);
         return () => {
-            ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.removeEventListener('keydown', disableUserSelect);
-            ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.removeEventListener('keyup', enableUserSelect);
+            ownerDoc?.removeEventListener('keydown', disableUserSelect);
+            ownerDoc?.removeEventListener('keyup', enableUserSelect);
         };
     }, [
         isSelectable,
@@ -129,7 +128,7 @@ export const Table = (props) => {
     const tableStateReducer = React.useCallback((newState, action, previousState, instance) => {
         switch (action.type) {
             case TableActions.toggleSortBy:
-                onSort === null || onSort === void 0 ? void 0 : onSort(newState);
+                onSort?.(newState);
                 break;
             case TableActions.setFilter:
                 currentFilter.current = onFilterHandler(newState, action, previousState, currentFilter.current, instance);
@@ -215,13 +214,13 @@ export const Table = (props) => {
         return result;
     }, {});
     const areFiltersSet = allColumns.some((column) => column.filterValue != null && column.filterValue !== '') || !!globalFilterValue;
-    const showFilterButton = (column) => (data.length !== 0 || areFiltersSet) && column.canFilter;
+    const showFilterButton = (column) => (data.length !== 0 || areFiltersSet) && column.canFilter && !!column.Filter;
     const showSortButton = (column) => data.length !== 0 && column.canSort;
     const onRowClickHandler = React.useCallback((event, row) => {
-        const isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
+        const isDisabled = isRowDisabled?.(row.original);
         const ctrlPressed = event.ctrlKey || event.metaKey;
         if (!isDisabled) {
-            onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(event, row);
+            onRowClick?.(event, row);
         }
         if (isSelectable &&
             !isDisabled &&
@@ -262,7 +261,7 @@ export const Table = (props) => {
     React.useEffect(() => {
         if (previousFilter.current !== currentFilter.current) {
             previousFilter.current = currentFilter.current;
-            onFilter === null || onFilter === void 0 ? void 0 : onFilter(currentFilter.current, state, instance.filteredRows);
+            onFilter?.(currentFilter.current, state, instance.filteredRows);
         }
     }, [state, instance.filteredRows, onFilter]);
     const lastPassedColumns = React.useRef([]);
@@ -336,7 +335,7 @@ export const Table = (props) => {
     const getPreparedRow = React.useCallback((index) => {
         const row = page[index];
         prepareRow(row);
-        return (React.createElement(TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell, bodyRef: bodyRef.current, tableRowRef: enableVirtualization ? undefined : tableRowRef(row), density: density }));
+        return (React.createElement(TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!isRowDisabled?.(row.original), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell, bodyRef: bodyRef.current, tableRowRef: enableVirtualization ? undefined : tableRowRef(row), density: density }));
     }, [
         page,
         prepareRow,
@@ -380,8 +379,8 @@ export const Table = (props) => {
     }, []);
     const isHeaderDirectClick = React.useRef(false);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: (element) => {
-                ownerDocument.current = element === null || element === void 0 ? void 0 : element.ownerDocument;
+        React.createElement(Box, { ref: (element) => {
+                ownerDocument.current = element?.ownerDocument;
                 if (isResizable) {
                     resizeRef(element);
                 }
@@ -399,14 +398,14 @@ export const Table = (props) => {
                 const headerGroupProps = headerGroup.getHeaderGroupProps({
                     className: 'iui-table-row',
                 });
-                return (React.createElement("div", { className: 'iui-table-header-wrapper', ref: headerRef, onScroll: () => {
+                return (React.createElement(Box, { className: 'iui-table-header-wrapper', ref: headerRef, onScroll: () => {
                         if (headerRef.current && bodyRef.current) {
                             bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
                             updateStickyState();
                         }
                     }, key: headerGroupProps.key },
-                    React.createElement("div", { className: 'iui-table-header' },
-                        React.createElement("div", { ...headerGroupProps }, headerGroup.headers.map((column, index) => {
+                    React.createElement(Box, { className: 'iui-table-header' },
+                        React.createElement(Box, { ...headerGroupProps }, headerGroup.headers.map((column, index) => {
                             const { onClick, ...restSortProps } = column.getSortByToggleProps();
                             const columnProps = column.getHeaderProps({
                                 ...restSortProps,
@@ -421,7 +420,7 @@ export const Table = (props) => {
                                     flexWrap: 'unset',
                                 },
                             });
-                            return (React.createElement("div", { ...columnProps, ...column.getDragAndDropProps(), key: columnProps.key, title: undefined, ref: (el) => {
+                            return (React.createElement(Box, { ...columnProps, ...column.getDragAndDropProps(), key: columnProps.key, title: undefined, ref: (el) => {
                                     if (el) {
                                         columnRefs.current[column.id] = el;
                                         column.resizeWidth =
@@ -432,7 +431,7 @@ export const Table = (props) => {
                                 }, onClick: (e) => {
                                     // Prevents from triggering sort when resizing and mouse is released in the middle of header
                                     if (isHeaderDirectClick.current) {
-                                        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                                        onClick?.(e);
                                         isHeaderDirectClick.current = false;
                                     }
                                 }, tabIndex: showSortButton(column) ? 0 : undefined, onKeyDown: (e) => {
@@ -442,24 +441,24 @@ export const Table = (props) => {
                                 } },
                                 column.render('Header'),
                                 (showFilterButton(column) ||
-                                    showSortButton(column)) && (React.createElement("div", { className: 'iui-table-header-actions-container' },
+                                    showSortButton(column)) && (React.createElement(Box, { className: 'iui-table-header-actions-container' },
                                     showFilterButton(column) && (React.createElement(FilterToggle, { column: column })),
-                                    showSortButton(column) && (React.createElement("div", { className: 'iui-table-cell-end-icon' }, column.isSortedDesc ||
+                                    showSortButton(column) && (React.createElement(Box, { className: 'iui-table-cell-end-icon' }, column.isSortedDesc ||
                                         (!column.isSorted && column.sortDescFirst) ? (React.createElement(SvgSortDown, { className: 'iui-table-sort', "aria-hidden": true })) : (React.createElement(SvgSortUp, { className: 'iui-table-sort', "aria-hidden": true })))))),
                                 isResizable &&
                                     column.isResizerVisible &&
                                     (index !== headerGroup.headers.length - 1 ||
-                                        columnResizeMode === 'expand') && (React.createElement("div", { ...column.getResizerProps(), className: 'iui-table-resizer' },
-                                    React.createElement("div", { className: 'iui-table-resizer-bar' }))),
+                                        columnResizeMode === 'expand') && (React.createElement(Box, { ...column.getResizerProps(), className: 'iui-table-resizer' },
+                                    React.createElement(Box, { className: 'iui-table-resizer-bar' }))),
                                 enableColumnReordering &&
-                                    !column.disableReordering && (React.createElement("div", { className: 'iui-table-reorder-bar' })),
+                                    !column.disableReordering && (React.createElement(Box, { className: 'iui-table-reorder-bar' })),
                                 column.sticky === 'left' &&
-                                    state.sticky.isScrolledToRight && (React.createElement("div", { className: 'iui-table-cell-shadow-right' })),
+                                    state.sticky.isScrolledToRight && (React.createElement(Box, { className: 'iui-table-cell-shadow-right' })),
                                 column.sticky === 'right' &&
-                                    state.sticky.isScrolledToLeft && (React.createElement("div", { className: 'iui-table-cell-shadow-left' }))));
+                                    state.sticky.isScrolledToLeft && (React.createElement(Box, { className: 'iui-table-cell-shadow-left' }))));
                         })))));
             }),
-            React.createElement("div", { ...getTableBodyProps({
+            React.createElement(Box, { ...getTableBodyProps({
                     className: cx('iui-table-body', {
                         'iui-zebra-striping': styleType === 'zebra-rows',
                     }),
@@ -471,17 +470,17 @@ export const Table = (props) => {
                     }
                 }, tabIndex: -1, "aria-multiselectable": (isSelectable && selectionMode === 'multi') || undefined },
                 data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer, scrollToIndex: scrollToIndex })) : (page.map((_, index) => getPreparedRow(index))))),
-                isLoading && data.length === 0 && (React.createElement("div", { className: 'iui-table-empty' },
+                isLoading && data.length === 0 && (React.createElement(Box, { className: 'iui-table-empty' },
                     React.createElement(ProgressRadial, { indeterminate: true }))),
-                isLoading && data.length !== 0 && (React.createElement("div", { className: 'iui-table-row' },
-                    React.createElement("div", { className: 'iui-table-cell', style: { justifyContent: 'center' } },
+                isLoading && data.length !== 0 && (React.createElement(Box, { className: 'iui-table-row' },
+                    React.createElement(Box, { className: 'iui-table-cell', style: { justifyContent: 'center' } },
                         React.createElement(ProgressRadial, { indeterminate: true, size: 'small', style: { float: 'none', marginLeft: 0 } })))),
-                !isLoading && data.length === 0 && !areFiltersSet && (React.createElement("div", { className: 'iui-table-empty' },
+                !isLoading && data.length === 0 && !areFiltersSet && (React.createElement(Box, { className: 'iui-table-empty' },
                     React.createElement("div", null, emptyTableContent))),
                 !isLoading &&
                     (data.length === 0 || rows.length === 0) &&
-                    areFiltersSet && (React.createElement("div", { className: 'iui-table-empty' },
-                    React.createElement("div", null, emptyFilteredTableContent)))), paginatorRenderer === null || paginatorRenderer === void 0 ? void 0 :
-            paginatorRenderer(paginatorRendererProps))));
+                    areFiltersSet && (React.createElement(Box, { className: 'iui-table-empty' },
+                    React.createElement("div", null, emptyFilteredTableContent)))),
+            paginatorRenderer?.(paginatorRendererProps))));
 };
 export default Table;

package/esm/core/Table/TableCell.js

@@ -8,6 +8,7 @@ import { getCellStyle, getStickyStyle } from './utils.js';
 import { SubRowExpander } from './SubRowExpander.js';
 import { SELECTION_CELL_ID } from './columns/index.js';
 import { DefaultCell } from './cells/index.js';
+import { Box } from '../utils/index.js';
 export const TableCell = (props) => {
     const { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, density, } = props;
     const hasSubRowExpander = cellIndex ===
@@ -56,9 +57,9 @@ export const TableCell = (props) => {
         children: (React.createElement(React.Fragment, null,
             cellContent,
             cell.column.sticky === 'left' &&
-                tableInstance.state.sticky.isScrolledToRight && (React.createElement("div", { className: 'iui-table-cell-shadow-right' })),
+                tableInstance.state.sticky.isScrolledToRight && (React.createElement(Box, { className: 'iui-table-cell-shadow-right' })),
             cell.column.sticky === 'right' &&
-                tableInstance.state.sticky.isScrolledToLeft && (React.createElement("div", { className: 'iui-table-cell-shadow-left' })))),
+                tableInstance.state.sticky.isScrolledToLeft && (React.createElement(Box, { className: 'iui-table-cell-shadow-left' })))),
     };
     return (React.createElement(React.Fragment, null, cell.column.cellRenderer ? (cell.column.cellRenderer({
         ...cellRendererProps,

package/esm/core/Table/TablePaginator.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import '@itwin/itwinui-css/css/table.css';
 import type { CommonProps } from '../utils/index.js';
 import type { TablePaginatorRendererProps } from './Table.js';
 export declare type TablePaginatorProps = {

package/esm/core/Table/TablePaginator.js

@@ -4,11 +4,10 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/table.css';
 import { IconButton, Button, DropdownButton } from '../Buttons/index.js';
 import { ProgressRadial } from '../ProgressIndicators/index.js';
 import { MenuItem } from '../Menu/index.js';
-import { getBoundedValue, useGlobals, useOverflow, useContainerWidth, SvgChevronLeft, SvgChevronRight, } from '../utils/index.js';
+import { getBoundedValue, useGlobals, useOverflow, useContainerWidth, SvgChevronLeft, SvgChevronRight, Box, } from '../utils/index.js';
 const defaultLocalization = {
     pageSizeLabel: (size) => `${size} per page`,
     rangeLabel: (startIndex, endIndex, totalRows, isLoading) => isLoading
@@ -41,18 +40,17 @@ export const TablePaginator = (props) => {
     const needFocus = React.useRef(false);
     const isMounted = React.useRef(false);
     React.useEffect(() => {
-        var _a, _b;
         // Checking `isMounted.current` prevents from focusing on initial load.
         // Checking `needFocus.current` prevents from focusing page when clicked on previous/next page.
         if (isMounted.current && needFocus.current) {
-            const buttonToFocus = Array.from((_b = (_a = pageListRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.iui-table-paginator-page-button')) !== null && _b !== void 0 ? _b : []).find((el) => { var _a; return ((_a = el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === (focusedIndex + 1).toString(); });
-            buttonToFocus === null || buttonToFocus === void 0 ? void 0 : buttonToFocus.focus();
+            const buttonToFocus = Array.from(pageListRef.current?.querySelectorAll('.iui-table-paginator-page-button') ?? []).find((el) => el.textContent?.trim() === (focusedIndex + 1).toString());
+            buttonToFocus?.focus();
             needFocus.current = false;
         }
         isMounted.current = true;
     }, [focusedIndex]);
     const buttonSize = size != 'default' ? 'small' : undefined;
-    const pageButton = React.useCallback((index, tabIndex = index === focusedIndex ? 0 : -1) => (React.createElement("button", { key: index, type: 'button', className: cx('iui-table-paginator-page-button', {
+    const pageButton = React.useCallback((index, tabIndex = index === focusedIndex ? 0 : -1) => (React.createElement(Box, { as: 'button', key: index, type: 'button', className: cx('iui-table-paginator-page-button', {
             'iui-table-paginator-page-button-small': buttonSize === 'small',
         }), "data-iui-active": index === currentPage, onClick: () => onPageChange(index), "aria-current": index === currentPage, "aria-label": localization.goToPageLabel(index + 1), tabIndex: tabIndex }, index + 1)), [focusedIndex, currentPage, localization, buttonSize, onPageChange]);
     const totalPagesCount = Math.ceil(totalRowsCount / pageSize);
@@ -113,19 +111,19 @@ export const TablePaginator = (props) => {
     const hasNoRows = totalPagesCount === 0;
     const showPagesList = totalPagesCount > 1 || isLoading;
     const showPageSizeList = pageSizeList && !!onPageSizeChange && !!totalRowsCount;
-    const ellipsis = (React.createElement("span", { className: cx('iui-table-paginator-ellipsis', {
+    const ellipsis = (React.createElement(Box, { as: 'span', className: cx('iui-table-paginator-ellipsis', {
             'iui-table-paginator-ellipsis-small': size === 'small',
         }) }, "\u2026"));
     const noRowsContent = (React.createElement(React.Fragment, null, isLoading ? (React.createElement(ProgressRadial, { indeterminate: true, size: 'small' })) : (React.createElement(Button, { styleType: 'borderless', disabled: true, size: buttonSize }, "1"))));
     if (!showPagesList && !showPageSizeList) {
         return null;
     }
-    return (React.createElement("div", { className: cx('iui-table-paginator', className), ref: paginatorResizeRef, ...rest },
-        React.createElement("div", { className: 'iui-left' }, totalSelectedRowsCount > 0 && (React.createElement("span", null, localization.rowsSelectedLabel(totalSelectedRowsCount)))),
-        showPagesList && (React.createElement("div", { className: 'iui-center', ref: overflowRef },
+    return (React.createElement(Box, { className: cx('iui-table-paginator', className), ref: paginatorResizeRef, ...rest },
+        React.createElement(Box, { className: 'iui-left' }, totalSelectedRowsCount > 0 && (React.createElement("span", null, localization.rowsSelectedLabel(totalSelectedRowsCount)))),
+        showPagesList && (React.createElement(Box, { className: 'iui-center', ref: overflowRef },
             React.createElement(IconButton, { styleType: 'borderless', disabled: currentPage === 0, onClick: () => onPageChange(currentPage - 1), size: buttonSize, "aria-label": localization.previousPage },
                 React.createElement(SvgChevronLeft, null)),
-            React.createElement("span", { className: 'iui-table-paginator-pages-group', onKeyDown: onKeyDown, ref: pageListRef }, (() => {
+            React.createElement(Box, { as: 'span', className: 'iui-table-paginator-pages-group', onKeyDown: onKeyDown, ref: pageListRef }, (() => {
                 if (hasNoRows) {
                     return noRowsContent;
                 }
@@ -146,9 +144,9 @@ export const TablePaginator = (props) => {
             })()),
             React.createElement(IconButton, { styleType: 'borderless', disabled: currentPage === totalPagesCount - 1 || hasNoRows, onClick: () => onPageChange(currentPage + 1), size: buttonSize, "aria-label": localization.nextPage },
                 React.createElement(SvgChevronRight, null)))),
-        React.createElement("div", { className: 'iui-right' }, showPageSizeList && (React.createElement(React.Fragment, null,
+        React.createElement(Box, { className: 'iui-right' }, showPageSizeList && (React.createElement(React.Fragment, null,
             localization.rowsPerPageLabel !== null &&
-                paginatorWidth >= 1024 && (React.createElement("span", { className: 'iui-table-paginator-page-size-label' }, localization.rowsPerPageLabel)),
+                paginatorWidth >= 1024 && (React.createElement(Box, { as: 'span', className: 'iui-table-paginator-page-size-label' }, localization.rowsPerPageLabel)),
             React.createElement(DropdownButton, { styleType: 'borderless', size: buttonSize, menuItems: (close) => pageSizeList.map((size) => (React.createElement(MenuItem, { key: size, isSelected: size === pageSize, onClick: () => {
                         close();
                         onPageSizeChange(size);