@itwin/itwinui-react 1.20.0 → 1.21.0

package/cjs/core/Modal/Modal.js

@@ -34,11 +34,9 @@ var react_1 = __importDefault(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var classnames_1 = __importDefault(require("classnames"));
 var Close_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Close"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/modal.css");
 var IconButton_1 = require("../Buttons/IconButton");
-var common_1 = require("../utils/common");
-var FocusTrap_1 = __importDefault(require("../utils/FocusTrap"));
 /**
  * Modal component which can wrap any content.
  * @example
@@ -61,9 +59,9 @@ var FocusTrap_1 = __importDefault(require("../utils/FocusTrap"));
  * </Modal>
  */
 var Modal = function (props) {
-    var _a = props.isOpen, isOpen = _a === void 0 ? false : _a, _b = props.isDismissible, isDismissible = _b === void 0 ? true : _b, _c = props.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = props.closeOnExternalClick, closeOnExternalClick = _d === void 0 ? true : _d, onClose = props.onClose, title = props.title, onKeyDown = props.onKeyDown, id = props.id, className = props.className, style = props.style, children = props.children, _e = props.modalRootId, modalRootId = _e === void 0 ? 'iui-react-portal-container' : _e, _f = props.ownerDocument, ownerDocument = _f === void 0 ? (0, common_1.getDocument)() : _f, rest = __rest(props, ["isOpen", "isDismissible", "closeOnEsc", "closeOnExternalClick", "onClose", "title", "onKeyDown", "id", "className", "style", "children", "modalRootId", "ownerDocument"]);
-    (0, useTheme_1.useTheme)();
-    var container = (0, common_1.getContainer)(modalRootId, ownerDocument);
+    var _a = props.isOpen, isOpen = _a === void 0 ? false : _a, _b = props.isDismissible, isDismissible = _b === void 0 ? true : _b, _c = props.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = props.closeOnExternalClick, closeOnExternalClick = _d === void 0 ? true : _d, onClose = props.onClose, title = props.title, onKeyDown = props.onKeyDown, id = props.id, className = props.className, style = props.style, children = props.children, _e = props.modalRootId, modalRootId = _e === void 0 ? 'iui-react-portal-container' : _e, _f = props.ownerDocument, ownerDocument = _f === void 0 ? (0, utils_1.getDocument)() : _f, rest = __rest(props, ["isOpen", "isDismissible", "closeOnEsc", "closeOnExternalClick", "onClose", "title", "onKeyDown", "id", "className", "style", "children", "modalRootId", "ownerDocument"]);
+    (0, utils_1.useTheme)();
+    var container = (0, utils_1.getContainer)(modalRootId, ownerDocument);
     var overlayRef = react_1.default.useRef(null);
     var originalBodyOverflow = react_1.default.useRef('');
     var previousFocusedElement = react_1.default.useRef();
@@ -116,7 +114,7 @@ var Modal = function (props) {
             onClose(event);
         }
     };
-    return !!container ? (react_dom_1.default.createPortal(isOpen && (react_1.default.createElement(FocusTrap_1.default, null,
+    return !!container ? (react_dom_1.default.createPortal(isOpen && (react_1.default.createElement(utils_1.FocusTrap, null,
         react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-modal', 'iui-modal-visible', className), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }, rest),
             react_1.default.createElement("div", { className: 'iui-modal-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true', onMouseDown: function (event) { return event.stopPropagation(); } },
                 react_1.default.createElement("div", { className: 'iui-title-bar' },

package/cjs/core/Modal/ModalButtonBar.js

@@ -31,14 +31,14 @@ exports.ModalButtonBar = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/modal.css");
 /**
  * Container for Buttons in modal.
  */
 var ModalButtonBar = function (props) {
     var children = props.children, rest = __rest(props, ["children"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("div", __assign({ className: 'iui-button-bar' }, rest), children));
 };
 exports.ModalButtonBar = ModalButtonBar;

package/cjs/core/ProgressIndicators/ProgressLinear/ProgressLinear.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../../utils/props';
+import { CommonProps } from '../../utils';
 import '@itwin/itwinui-css/css/progress-indicator.css';
 export declare type ProgressLinearProps = {
     /**

package/cjs/core/ProgressIndicators/ProgressLinear/ProgressLinear.js

@@ -32,7 +32,7 @@ exports.ProgressLinear = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var useTheme_1 = require("../../utils/hooks/useTheme");
+var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/progress-indicator.css");
 /**
  * Shows progress on a linear bar
@@ -52,7 +52,7 @@ require("@itwin/itwinui-css/css/progress-indicator.css");
 var ProgressLinear = function (props) {
     var _a;
     var _b = props.value, value = _b === void 0 ? 0 : _b, _c = props.indeterminate, indeterminate = _c === void 0 ? false : _c, _d = props.labels, labels = _d === void 0 ? [] : _d, _e = props.isAnimated, isAnimated = _e === void 0 ? false : _e, status = props.status, className = props.className, style = props.style, rest = __rest(props, ["value", "indeterminate", "labels", "isAnimated", "status", "className", "style"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var boundedValue = Math.min(100, Math.max(0, value));
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-progress-indicator-linear', (_a = {},
             _a["iui-" + status] = !!status,

package/cjs/core/ProgressIndicators/ProgressRadial/ProgressRadial.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../../utils/props';
+import { CommonProps } from '../../utils';
 import '@itwin/itwinui-css/css/progress-indicator.css';
 export declare type ProgressRadialProps = {
     /**

package/cjs/core/ProgressIndicators/ProgressRadial/ProgressRadial.js

@@ -34,7 +34,7 @@ var CheckmarkSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/i
 var ImportantSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ImportantSmall"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../../utils/hooks/useTheme");
+var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/progress-indicator.css");
 /**
  * Circular Progress Indicator
@@ -54,7 +54,7 @@ require("@itwin/itwinui-css/css/progress-indicator.css");
 var ProgressRadial = function (props) {
     var _a;
     var _b = props.value, value = _b === void 0 ? 0 : _b, _c = props.indeterminate, indeterminate = _c === void 0 ? false : _c, status = props.status, children = props.children, _d = props.size, size = _d === void 0 ? '' : _d, className = props.className, style = props.style, rest = __rest(props, ["value", "indeterminate", "status", "children", "size", "className", "style"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var statusMap = {
         negative: react_1.default.createElement(ImportantSmall_1.default, { "aria-hidden": true }),
         positive: react_1.default.createElement(CheckmarkSmall_1.default, { "aria-hidden": true }),

package/cjs/core/Radio/Radio.js

@@ -32,8 +32,7 @@ exports.Radio = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useMergedRefs_1 = require("../utils/hooks/useMergedRefs");
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/inputs.css");
 /**
  * Basic radio input component
@@ -47,9 +46,9 @@ require("@itwin/itwinui-css/css/inputs.css");
 exports.Radio = react_1.default.forwardRef(function (props, ref) {
     var _a;
     var className = props.className, _b = props.disabled, disabled = _b === void 0 ? false : _b, label = props.label, status = props.status, style = props.style, checkmarkClassName = props.checkmarkClassName, checkmarkStyle = props.checkmarkStyle, _c = props.setFocus, setFocus = _c === void 0 ? false : _c, rest = __rest(props, ["className", "disabled", "label", "status", "style", "checkmarkClassName", "checkmarkStyle", "setFocus"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var inputElementRef = react_1.default.useRef(null);
-    var refs = (0, useMergedRefs_1.useMergedRefs)(inputElementRef, ref);
+    var refs = (0, utils_1.useMergedRefs)(inputElementRef, ref);
     react_1.default.useEffect(function () {
         if (inputElementRef.current && setFocus) {
             inputElementRef.current.focus();

package/cjs/core/RadioTiles/RadioTile.js

@@ -33,8 +33,7 @@ exports.RadioTile = void 0;
 var Checkmark_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Checkmark"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useMergedRefs_1 = require("../utils/hooks/useMergedRefs");
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/inputs.css");
 /**
  * RadioTile component to be used in RadioTileGroup component
@@ -43,9 +42,9 @@ require("@itwin/itwinui-css/css/inputs.css");
  */
 exports.RadioTile = react_1.default.forwardRef(function (props, ref) {
     var icon = props.icon, label = props.label, description = props.description, _a = props.setFocus, setFocus = _a === void 0 ? false : _a, className = props.className, style = props.style, rest = __rest(props, ["icon", "label", "description", "setFocus", "className", "style"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var inputElementRef = react_1.default.useRef(null);
-    var refs = (0, useMergedRefs_1.useMergedRefs)(inputElementRef, ref);
+    var refs = (0, utils_1.useMergedRefs)(inputElementRef, ref);
     react_1.default.useEffect(function () {
         if (inputElementRef.current && setFocus) {
             inputElementRef.current.focus();

package/cjs/core/RadioTiles/RadioTileGroup.js

@@ -33,7 +33,7 @@ exports.RadioTileGroup = void 0;
 var react_1 = __importDefault(require("react"));
 var InputGroup_1 = require("../InputGroup");
 require("@itwin/itwinui-css/css/inputs.css");
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 /**
  * RadioTileGroup component to group RadioTile components together
  * @example
@@ -44,7 +44,7 @@ var useTheme_1 = require("../utils/hooks/useTheme");
  */
 var RadioTileGroup = function (props) {
     var children = props.children, label = props.label, rest = __rest(props, ["children", "label"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement(InputGroup_1.InputGroup, __assign({ label: label }, rest),
         react_1.default.createElement("div", { className: 'iui-radio-tile-container' }, children)));
 };

package/cjs/core/Select/Select.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { PopoverProps } from '../utils/Popover';
-import { CommonProps } from '../utils/props';
+import { PopoverProps, CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/inputs.css';
 export declare type ItemRendererProps = {
     /**

package/cjs/core/Select/Select.js

@@ -33,8 +33,8 @@ exports.Select = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var DropdownMenu_1 = require("../DropdownMenu");
-var MenuItem_1 = __importDefault(require("../Menu/MenuItem"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var MenuItem_1 = require("../Menu/MenuItem");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/inputs.css");
 /**
  * Select component to select value from options.
@@ -89,7 +89,7 @@ var Select = function (props) {
     var _a;
     var _b;
     var options = props.options, value = props.value, onChange = props.onChange, placeholder = props.placeholder, _c = props.disabled, disabled = _c === void 0 ? false : _c, size = props.size, _d = props.setFocus, setFocus = _d === void 0 ? false : _d, itemRenderer = props.itemRenderer, selectedItemRenderer = props.selectedItemRenderer, className = props.className, style = props.style, menuClassName = props.menuClassName, menuStyle = props.menuStyle, onShow = props.onShow, onHide = props.onHide, popoverProps = props.popoverProps, rest = __rest(props, ["options", "value", "onChange", "placeholder", "disabled", "size", "setFocus", "itemRenderer", "selectedItemRenderer", "className", "style", "menuClassName", "menuStyle", "onShow", "onHide", "popoverProps"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var _e = react_1.default.useState((_b = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _b !== void 0 ? _b : false), isOpen = _e[0], setIsOpen = _e[1];
     react_1.default.useEffect(function () {
         setIsOpen(function (open) { var _a; return (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _a !== void 0 ? _a : open; });
@@ -130,7 +130,7 @@ var Select = function (props) {
     var menuItems = react_1.default.useCallback(function (close) {
         return options.map(function (option, index) {
             var isSelected = value === option.value;
-            var menuItem = itemRenderer ? (itemRenderer(option, { close: close, isSelected: isSelected })) : (react_1.default.createElement(MenuItem_1.default, null, option.label));
+            var menuItem = itemRenderer ? (itemRenderer(option, { close: close, isSelected: isSelected })) : (react_1.default.createElement(MenuItem_1.MenuItem, null, option.label));
             return react_1.default.cloneElement(menuItem, __assign(__assign({ key: option.label + "-" + index, isSelected: isSelected, onClick: function () {
                     !option.disabled && (onChange === null || onChange === void 0 ? void 0 : onChange(option.value));
                     close();

package/cjs/core/SideNavigation/SideNavigation.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../utils/props';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/side-navigation.css';
 export declare type SideNavigationProps = {
     /**

package/cjs/core/SideNavigation/SideNavigation.js

@@ -32,7 +32,7 @@ exports.SideNavigation = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
 var Buttons_1 = require("../Buttons");
 var Tooltip_1 = require("../Tooltip");
@@ -53,7 +53,7 @@ require("@itwin/itwinui-css/css/side-navigation.css");
  */
 var SideNavigation = function (props) {
     var items = props.items, secondaryItems = props.secondaryItems, _a = props.expanderPlacement, expanderPlacement = _a === void 0 ? 'top' : _a, className = props.className, _b = props.isExpanded, isExpanded = _b === void 0 ? false : _b, onExpanderClick = props.onExpanderClick, rest = __rest(props, ["items", "secondaryItems", "expanderPlacement", "className", "isExpanded", "onExpanderClick"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var _c = react_1.default.useState(isExpanded), _isExpanded = _c[0], _setIsExpanded = _c[1];
     react_1.default.useEffect(function () {
         _setIsExpanded(isExpanded);

package/cjs/core/SideNavigation/SidenavButton.js

@@ -32,7 +32,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidenavButton = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 var Buttons_1 = require("../Buttons");
 require("@itwin/itwinui-css/css/side-navigation.css");
 /**
@@ -41,7 +41,7 @@ require("@itwin/itwinui-css/css/side-navigation.css");
  */
 exports.SidenavButton = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, children = props.children, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, rest = __rest(props, ["className", "children", "isActive", "disabled"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement(Buttons_1.Button, __assign({ className: (0, classnames_1.default)('iui-sidenav-button', { 'iui-active': isActive }, className), size: 'large', disabled: disabled, ref: ref }, rest), children));
 });
 exports.default = exports.SidenavButton;

package/cjs/core/Slider/Slider.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/slider.css';
 import { TooltipProps } from '../Tooltip';
-import { CommonProps } from '../utils/props';
 /**
  * Determines which segments are shown with color.
  */

package/cjs/core/Slider/Slider.js

@@ -41,14 +41,12 @@ exports.Slider = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/slider.css");
-var common_1 = require("../utils/common");
-var useEventListener_1 = require("../utils/hooks/useEventListener");
 var Track_1 = require("./Track");
 var Thumb_1 = require("./Thumb");
 var getPercentageOfRectangle = function (rect, pointer) {
-    var position = (0, common_1.getBoundedValue)(pointer, rect.left, rect.right);
+    var position = (0, utils_1.getBoundedValue)(pointer, rect.left, rect.right);
     return (position - rect.left) / rect.width;
 };
 var getClosestValueIndex = function (values, pointerValue) {
@@ -113,7 +111,7 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
     react_1.default.useEffect(function () {
         setTrackDisplay(getDefaultTrackDisplay(trackDisplayMode, currentValues));
     }, [trackDisplayMode, currentValues]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var containerRef = react_1.default.useRef(null);
     react_1.default.useEffect(function () {
         if (containerRef.current && setFocus) {
@@ -142,7 +140,7 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
             var pointerValue = min + (max - min) * percent;
             pointerValue = roundValueToClosestStep(pointerValue, step, min);
             var _a = getAllowableThumbRange(activeThumbIndex), minVal = _a[0], maxVal = _a[1];
-            pointerValue = (0, common_1.getBoundedValue)(pointerValue, minVal, maxVal);
+            pointerValue = (0, utils_1.getBoundedValue)(pointerValue, minVal, maxVal);
             if (pointerValue !== currentValues[activeThumbIndex]) {
                 var newValues = __spreadArray([], currentValues, true);
                 newValues[activeThumbIndex] = pointerValue;
@@ -196,7 +194,7 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
             pointerValue = roundValueToClosestStep(pointerValue, step, min);
             var closestValueIndex = getClosestValueIndex(currentValues, pointerValue);
             var _a = getAllowableThumbRange(closestValueIndex), minVal = _a[0], maxVal = _a[1];
-            pointerValue = (0, common_1.getBoundedValue)(pointerValue, minVal, maxVal);
+            pointerValue = (0, utils_1.getBoundedValue)(pointerValue, minVal, maxVal);
             if (pointerValue === currentValues[closestValueIndex]) {
                 return;
             }
@@ -209,8 +207,8 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
             event.stopPropagation();
         }
     }, [min, max, step, currentValues, getAllowableThumbRange, onChange]);
-    (0, useEventListener_1.useEventListener)('pointermove', handlePointerMove, (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
-    (0, useEventListener_1.useEventListener)('pointerup', handlePointerUp, (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
+    (0, utils_1.useEventListener)('pointermove', handlePointerMove, (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
+    (0, utils_1.useEventListener)('pointerup', handlePointerUp, (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
     var tickMarkArea = react_1.default.useMemo(function () {
         if (!tickLabels) {
             return null;

package/cjs/core/Table/Table.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CellProps, TableOptions, Row, TableState } from 'react-table';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/table.css';
-import { CommonProps } from '../utils/props';
 import { TableFilterValue } from './filters';
 /**
  * Table props.

package/cjs/core/Table/Table.js

@@ -34,11 +34,11 @@ var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_table_1 = require("react-table");
 var ProgressIndicators_1 = require("../ProgressIndicators");
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/table.css");
 var SortDown_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/SortDown"));
 var SortUp_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/SortUp"));
-var utils_1 = require("./utils");
+var utils_2 = require("./utils");
 var TableRowMemoized_1 = require("./TableRowMemoized");
 var filters_1 = require("./filters");
 var customFilterFunctions_1 = require("./filters/customFilterFunctions");
@@ -91,7 +91,7 @@ var singleRowSelectedAction = 'singleRowSelected';
 var Table = function (props) {
     var _a;
     var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _d = props.isSortable, isSortable = _d === void 0 ? false : _d, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _e = props.intersectionMargin, intersectionMargin = _e === void 0 ? 300 : _e, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _f = props.density, density = _f === void 0 ? 'default' : _f, _g = props.selectSubRows, selectSubRows = _g === void 0 ? true : _g, getSubRows = props.getSubRows, _h = props.selectRowOnClick, selectRowOnClick = _h === void 0 ? true : _h, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var _j = react_1.default.useState(), ownerDocument = _j[0], setOwnerDocument = _j[1];
     var defaultColumn = react_1.default.useMemo(function () { return ({
         maxWidth: 0,
@@ -176,7 +176,7 @@ var Table = function (props) {
                 className: 'iui-row',
             });
             return (react_1.default.createElement("div", __assign({}, headerGroupProps, { key: headerGroupProps.key }), headerGroup.headers.map(function (column) {
-                var columnProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), { className: (0, classnames_1.default)('iui-cell', { 'iui-actionable': column.canSort }, { 'iui-sorted': column.isSorted }, column.columnClassName), style: __assign({}, (0, utils_1.getCellStyle)(column)) }));
+                var columnProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), { className: (0, classnames_1.default)('iui-cell', { 'iui-actionable': column.canSort }, { 'iui-sorted': column.isSorted }, column.columnClassName), style: __assign({}, (0, utils_2.getCellStyle)(column)) }));
                 return (react_1.default.createElement("div", __assign({}, columnProps, { key: columnProps.key, title: undefined }),
                     column.render('Header'),
                     !isLoading && (data.length != 0 || areFiltersSet) && (react_1.default.createElement(filters_1.FilterToggle, { column: column, ownerDocument: ownerDocument })),

package/cjs/core/Table/TableRowMemoized.js

@@ -21,9 +21,8 @@ exports.TableRowMemoized = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var useIntersection_1 = require("../utils/hooks/useIntersection");
+var utils_1 = require("../utils");
 var react_transition_group_1 = require("react-transition-group");
-var useMergedRefs_1 = require("../utils/hooks/useMergedRefs");
 var TableCell_1 = require("./TableCell");
 /**
  * Memoization is needed to avoid unnecessary re-renders of all rows when additional data is added when lazy-loading.
@@ -38,7 +37,7 @@ var TableRow = function (props) {
         (_a = onRowInViewport.current) === null || _a === void 0 ? void 0 : _a.call(onRowInViewport, row.original);
         isLast && ((_b = onBottomReached.current) === null || _b === void 0 ? void 0 : _b.call(onBottomReached));
     }, [isLast, onBottomReached, onRowInViewport, row.original]);
-    var rowRef = (0, useIntersection_1.useIntersection)(onIntersect, {
+    var rowRef = (0, utils_1.useIntersection)(onIntersect, {
         rootMargin: intersectionMargin + "px",
     });
     var expandedHeight = react_1.default.useRef(0);
@@ -50,7 +49,7 @@ var TableRow = function (props) {
             'iui-disabled': isDisabled,
         }, userRowProps === null || userRowProps === void 0 ? void 0 : userRowProps.className),
     });
-    var refs = (0, useMergedRefs_1.useMergedRefs)(rowRef, mergedProps.ref);
+    var refs = (0, utils_1.useMergedRefs)(rowRef, mergedProps.ref);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", __assign({}, mergedProps, { ref: refs, onClick: function (event) {
                 var _a;

package/cjs/core/Table/filters/BaseFilter.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@itwin/itwinui-css/css/table.css';
-import { CommonProps } from '../../utils/props';
+import { CommonProps } from '../../utils';
 export declare type BaseFilterProps = {
     /**
      * Filter body.

package/cjs/core/Table/filters/BaseFilter.js

@@ -11,7 +11,7 @@ exports.BaseFilter = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/table.css");
-var useTheme_1 = require("../../utils/hooks/useTheme");
+var utils_1 = require("../../utils");
 /**
  * Filter wrapper that should be used when creating custom filters.
  * @example
@@ -28,7 +28,7 @@ var useTheme_1 = require("../../utils/hooks/useTheme");
  */
 var BaseFilter = function (props) {
     var children = props.children, className = props.className, style = props.style, id = props.id;
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-column-filter', className), style: style, onClick: function (e) {
             e.stopPropagation();
         }, id: id }, children));

package/cjs/core/Table/filters/DateRangeFilter/DatePickerInput.js

@@ -31,7 +31,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var Calendar_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Calendar"));
-var Popover_1 = require("../../../utils/Popover");
+var utils_1 = require("../../../utils");
 var LabeledInput_1 = require("../../../LabeledInput");
 var DatePicker_1 = require("../../../DatePicker");
 var Buttons_1 = require("../../../Buttons");
@@ -63,7 +63,7 @@ var DatePickerInput = function (props) {
             onChange(parsedDate);
         }
     }, [onChange, parseInput]);
-    return (react_1.default.createElement(Popover_1.Popover, { content: react_1.default.createElement(DatePicker_1.DatePicker, { date: date, onChange: onDateSelected, setFocus: true }), placement: 'bottom', visible: isVisible, onClickOutside: function (_, e) {
+    return (react_1.default.createElement(utils_1.Popover, { content: react_1.default.createElement(DatePicker_1.DatePicker, { date: date, onChange: onDateSelected, setFocus: true }), placement: 'bottom', visible: isVisible, onClickOutside: function (_, e) {
             var _a;
             if (!((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
                 close();

package/cjs/core/Table/filters/DateRangeFilter/DateRangeFilter.js

@@ -20,7 +20,7 @@ exports.DateRangeFilter = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../../../utils/hooks/useTheme");
+var utils_1 = require("../../../utils");
 var FilterButtonBar_1 = require("../FilterButtonBar");
 var BaseFilter_1 = require("../BaseFilter");
 require("@itwin/itwinui-css/css/table.css");
@@ -47,7 +47,7 @@ var defaultParseInput = function (text) {
 var DateRangeFilter = function (props) {
     var _a, _b, _c, _d;
     var column = props.column, translatedLabels = props.translatedLabels, setFilter = props.setFilter, clearFilter = props.clearFilter, _e = props.formatDate, formatDate = _e === void 0 ? defaultFormatDate : _e, _f = props.parseInput, parseInput = _f === void 0 ? defaultParseInput : _f, _g = props.placeholder, placeholder = _g === void 0 ? 'MMM dd, yyyy' : _g;
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var translatedStrings = __assign(__assign({}, defaultStrings), translatedLabels);
     var _h = react_1.default.useState(((_a = column.filterValue) === null || _a === void 0 ? void 0 : _a[0]) ? new Date((_b = column.filterValue) === null || _b === void 0 ? void 0 : _b[0]) : undefined), from = _h[0], setFrom = _h[1];
     var _j = react_1.default.useState(((_c = column.filterValue) === null || _c === void 0 ? void 0 : _c[1]) ? new Date((_d = column.filterValue) === null || _d === void 0 ? void 0 : _d[1]) : undefined), to = _j[0], setTo = _j[1];

package/cjs/core/Table/filters/FilterButtonBar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@itwin/itwinui-css/css/table.css';
-import { CommonProps } from '../../utils/props';
+import { CommonProps } from '../../utils';
 export declare type FilterButtonBarTranslation = {
     filter: string;
     clear: string;

package/cjs/core/Table/filters/FilterButtonBar.js

@@ -22,7 +22,7 @@ exports.FilterButtonBar = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/table.css");
-var useTheme_1 = require("../../utils/hooks/useTheme");
+var utils_1 = require("../../utils");
 var Buttons_1 = require("../../Buttons");
 var defaultStrings = {
     filter: 'Filter',
@@ -36,7 +36,7 @@ var defaultStrings = {
 var FilterButtonBar = function (props) {
     var children = props.children, setFilter = props.setFilter, clearFilter = props.clearFilter, translatedLabels = props.translatedLabels, className = props.className, style = props.style, id = props.id;
     var translatedStrings = __assign(__assign({}, defaultStrings), translatedLabels);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-button-bar', className), style: style, id: id },
         children,
         react_1.default.createElement(Buttons_1.Button, { styleType: 'high-visibility', onClick: setFilter }, translatedStrings.filter),

package/cjs/core/Table/filters/FilterToggle.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { HeaderGroup } from 'react-table';
 import '@itwin/itwinui-css/css/table.css';
-import { StylingProps } from '../../utils/props';
+import { StylingProps } from '../../utils';
 export declare type FilterToggleProps<T extends Record<string, unknown>> = {
     column: HeaderGroup<T>;
     ownerDocument?: Document;

package/cjs/core/Table/filters/FilterToggle.js

@@ -35,16 +35,14 @@ var Filter_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Fil
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/table.css");
-var useTheme_1 = require("../../utils/hooks/useTheme");
-var Popover_1 = require("../../utils/Popover");
-var common_1 = require("../../utils/common");
+var utils_1 = require("../../utils");
 var Buttons_1 = require("../../Buttons");
 /**
  * Handles showing filter icon and opening filter component.
  */
 var FilterToggle = function (props) {
-    var column = props.column, _a = props.ownerDocument, ownerDocument = _a === void 0 ? (0, common_1.getDocument)() : _a, className = props.className, rest = __rest(props, ["column", "ownerDocument", "className"]);
-    (0, useTheme_1.useTheme)();
+    var column = props.column, _a = props.ownerDocument, ownerDocument = _a === void 0 ? (0, utils_1.getDocument)() : _a, className = props.className, rest = __rest(props, ["column", "ownerDocument", "className"]);
+    (0, utils_1.useTheme)();
     var _b = react_1.default.useState(false), isVisible = _b[0], setIsVisible = _b[1];
     var close = react_1.default.useCallback(function () { return setIsVisible(false); }, []);
     var setFilter = react_1.default.useCallback(function (filterValue) {
@@ -55,7 +53,7 @@ var FilterToggle = function (props) {
         column.setFilter(undefined);
         close();
     }, [close, column]);
-    return (react_1.default.createElement(react_1.default.Fragment, null, column.canFilter && column.Filter && (react_1.default.createElement(Popover_1.Popover, { content: column.render('Filter', { close: close, setFilter: setFilter, clearFilter: clearFilter }), placement: 'bottom-start', visible: isVisible, onClickOutside: close, appendTo: ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body },
+    return (react_1.default.createElement(react_1.default.Fragment, null, column.canFilter && column.Filter && (react_1.default.createElement(utils_1.Popover, { content: column.render('Filter', { close: close, setFilter: setFilter, clearFilter: clearFilter }), placement: 'bottom-start', visible: isVisible, onClickOutside: close, appendTo: ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body },
         react_1.default.createElement(Buttons_1.IconButton, __assign({ styleType: 'borderless', isActive: isVisible || column.filterValue, className: (0, classnames_1.default)('iui-filter-button', className), onClick: function (e) {
                 e.stopPropagation();
                 setIsVisible(function (v) { return !v; });

package/cjs/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js

@@ -20,7 +20,7 @@ exports.NumberRangeFilter = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../../../utils/hooks/useTheme");
+var utils_1 = require("../../../utils");
 var FilterButtonBar_1 = require("../FilterButtonBar");
 var BaseFilter_1 = require("../BaseFilter");
 require("@itwin/itwinui-css/css/table.css");
@@ -32,7 +32,7 @@ var defaultStrings = {
 var NumberRangeFilter = function (props) {
     var _a, _b, _c, _d;
     var column = props.column, translatedLabels = props.translatedLabels, setFilter = props.setFilter, clearFilter = props.clearFilter;
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var translatedStrings = __assign(__assign({}, defaultStrings), translatedLabels);
     var _e = react_1.default.useState((_b = (_a = column.filterValue) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : ''), from = _e[0], setFrom = _e[1];
     var _f = react_1.default.useState((_d = (_c = column.filterValue) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : ''), to = _f[0], setTo = _f[1];

package/cjs/core/Table/filters/TextFilter/TextFilter.js

@@ -10,14 +10,14 @@ exports.TextFilter = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 require("@itwin/itwinui-css/css/table.css");
-var useTheme_1 = require("../../../utils/hooks/useTheme");
+var utils_1 = require("../../../utils");
 var Input_1 = require("../../../Input");
 var FilterButtonBar_1 = require("../FilterButtonBar");
 var BaseFilter_1 = require("../BaseFilter");
 var TextFilter = function (props) {
     var _a;
     var column = props.column, translatedLabels = props.translatedLabels, setFilter = props.setFilter, clearFilter = props.clearFilter;
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var _b = react_1.default.useState((_a = column.filterValue) !== null && _a !== void 0 ? _a : ''), text = _b[0], setText = _b[1];
     var onKeyDown = function (event) {
         if (event.key === 'Enter') {

package/cjs/core/Tabs/Tab.js

@@ -32,7 +32,7 @@ exports.HorizontalTab = exports.Tab = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/tabs.css");
 /**
  * Individual tab component to be used in the `labels` prop of `Tabs`.
@@ -44,7 +44,7 @@ require("@itwin/itwinui-css/css/tabs.css");
  */
 var Tab = function (props) {
     var label = props.label, sublabel = props.sublabel, startIcon = props.startIcon, children = props.children, className = props.className, rest = __rest(props, ["label", "sublabel", "startIcon", "children", "className"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("button", __assign({ className: (0, classnames_1.default)('iui-tab', className), role: 'tab', tabIndex: -1 }, rest),
         startIcon &&
             react_1.default.cloneElement(startIcon, {