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

package/cjs/core/StatusMessage/StatusMessage.js

@@ -22,9 +22,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatusMessage = void 0;
 /*---------------------------------------------------------------------------------------------
@@ -33,7 +30,6 @@ exports.StatusMessage = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-const classnames_1 = __importDefault(require("classnames"));
 /**
  * Component to display icon and text below the `Combobox` component.
  * @example
@@ -41,21 +37,10 @@ const classnames_1 = __importDefault(require("classnames"));
  * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
  */
 const StatusMessage = ({ startIcon: userStartIcon, children, status, }) => {
-    (0, index_js_1.useTheme)();
-    const StartIcon = () => {
-        var _a;
-        const icon = userStartIcon !== null && userStartIcon !== void 0 ? userStartIcon : (status && index_js_1.StatusIconMap[status]());
-        if (!icon) {
-            return null;
-        }
-        return React.cloneElement(icon, {
-            className: (0, classnames_1.default)('iui-input-icon', (_a = icon.props) === null || _a === void 0 ? void 0 : _a.className),
-            'aria-hidden': true,
-        });
-    };
+    const icon = userStartIcon !== null && userStartIcon !== void 0 ? userStartIcon : (status && index_js_1.StatusIconMap[status]());
     return (React.createElement(React.Fragment, null,
-        React.createElement(StartIcon, null),
-        React.createElement("div", { className: 'iui-message' }, children)));
+        !!icon ? (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-input-icon', "aria-hidden": true }, icon)) : null,
+        React.createElement(index_js_1.Box, { className: 'iui-message' }, children)));
 };
 exports.StatusMessage = StatusMessage;
 exports.default = exports.StatusMessage;

package/cjs/core/StatusMessage/index.d.ts

@@ -1,4 +1,3 @@
 export { StatusMessage } from './StatusMessage.js';
-export type { StatusMessageProps } from './StatusMessage.js';
 declare const _default: "./StatusMessage";
 export default _default;

package/cjs/core/Stepper/Stepper.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/stepper.css';
 export declare type StepperLocalization = {
     stepsCountLabel: (currentStep: number, totalSteps: number) => string;
@@ -36,5 +36,5 @@ export declare type StepperProps = {
      */
     onStepClick?: (clickedIndex: number) => void;
 };
-export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Stepper: PolymorphicForwardRefComponent<"div", StepperProps>;
 export default Stepper;

package/cjs/core/Stepper/Stepper.js

@@ -38,11 +38,10 @@ const defaultStepperLocalization = {
 exports.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);
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: 'iui-stepper', ref: ref, ...rest },
+    return (React.createElement(index_js_1.Box, { className: 'iui-stepper', ref: ref, ...rest },
         React.createElement("ol", null, steps.map((s, index) => (React.createElement(StepperStep_js_1.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("div", { className: 'iui-stepper-steps-label' },
-            React.createElement("span", { className: 'iui-stepper-steps-label-count' }, localization.stepsCountLabel(boundedCurrentStep + 1, steps.length)),
+        type === 'long' && (React.createElement(index_js_1.Box, { className: 'iui-stepper-steps-label' },
+            React.createElement(index_js_1.Box, { as: 'span', className: 'iui-stepper-steps-label-count' }, localization.stepsCountLabel(boundedCurrentStep + 1, steps.length)),
             steps[boundedCurrentStep].name))));
 });
 exports.default = exports.Stepper;

package/cjs/core/Stepper/StepperStep.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { StylingProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export declare type StepperStepProps = {
     /**
      * The title/label of the step.
@@ -29,5 +28,5 @@ export declare type StepperStepProps = {
      * A tooltip giving detailed description to this step.
      */
     description?: string;
-} & StylingProps;
-export declare const StepperStep: (props: StepperStepProps) => JSX.Element;
+};
+export declare const StepperStep: PolymorphicForwardRefComponent<"li", StepperStepProps>;

package/cjs/core/Stepper/StepperStep.js

@@ -34,7 +34,8 @@ exports.StepperStep = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../Tooltip/index.js");
-const StepperStep = (props) => {
+const index_js_2 = require("../utils/index.js");
+exports.StepperStep = React.forwardRef((props, forwardedRef) => {
     const { title, index, currentStepNumber, totalSteps, type, onClick, description, className, style, ...rest } = props;
     const isPast = currentStepNumber > index;
     const isActive = currentStepNumber === index;
@@ -55,16 +56,15 @@ const StepperStep = (props) => {
             onCompletedClick();
         }
     };
-    const stepShape = (React.createElement("li", { className: (0, classnames_1.default)('iui-stepper-step', {
+    const stepShape = (React.createElement(index_js_2.Box, { as: 'li', className: (0, classnames_1.default)('iui-stepper-step', {
             'iui-current': isActive,
             'iui-clickable': isClickable,
         }, className), style: {
             width: type === 'default' ? `${100 / totalSteps}%` : undefined,
             ...style,
-        }, onClick: onCompletedClick, onKeyDown: onKeyDown, "aria-current": isActive ? 'step' : undefined, tabIndex: isClickable ? 0 : undefined, ...rest },
-        React.createElement("div", { className: 'iui-stepper-track-content' },
-            React.createElement("span", { className: 'iui-stepper-circle' }, index + 1)),
-        type === 'default' && (React.createElement("span", { className: 'iui-stepper-step-name' }, title))));
+        }, onClick: onCompletedClick, onKeyDown: onKeyDown, "aria-current": isActive ? 'step' : undefined, tabIndex: isClickable ? 0 : undefined, ref: forwardedRef, ...rest },
+        React.createElement(index_js_2.Box, { className: 'iui-stepper-track-content' },
+            React.createElement(index_js_2.Box, { as: 'span', className: 'iui-stepper-circle' }, index + 1)),
+        type === 'default' && (React.createElement(index_js_2.Box, { as: 'span', className: 'iui-stepper-step-name' }, title))));
     return description ? (React.createElement(index_js_1.Tooltip, { content: description }, stepShape)) : (stepShape);
-};
-exports.StepperStep = StepperStep;
+});

package/cjs/core/Stepper/Wizard.js

@@ -46,7 +46,9 @@ const WorkflowDiagram_js_1 = require("./WorkflowDiagram.js");
  *  type='long'
  *  />
  */
-exports.Wizard = React.forwardRef((props, ref) => {
+exports.Wizard = React.forwardRef(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(props, ref) => {
     const { currentStep, steps, type = 'default', localization, onStepClick, ...rest } = props;
     return type !== 'workflow' ? (React.createElement(Stepper_js_1.Stepper, { type: type, currentStep: currentStep, steps: steps, localization: localization, onStepClick: onStepClick, ref: ref, ...rest })) : (React.createElement(WorkflowDiagram_js_1.WorkflowDiagram, { steps: steps, ref: ref, ...rest }));
 });

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/workflow-diagram.css';
 import type { StepperProps } from './Stepper.js';
-export declare type WorkflowDiagramProps = Pick<StepperProps, 'steps'>;
-export declare const WorkflowDiagram: React.ForwardRefExoticComponent<WorkflowDiagramProps & React.RefAttributes<HTMLDivElement>>;
+declare type WorkflowDiagramProps = Pick<StepperProps, 'steps'>;
+export declare const WorkflowDiagram: PolymorphicForwardRefComponent<"ol", WorkflowDiagramProps>;
 export default WorkflowDiagram;

package/cjs/core/Stepper/WorkflowDiagram.js

@@ -32,10 +32,11 @@ const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/workflow-diagram.css");
 const WorkflowDiagramStep_js_1 = require("./WorkflowDiagramStep.js");
-exports.WorkflowDiagram = React.forwardRef((props, ref) => {
+exports.WorkflowDiagram = React.forwardRef(
+// TODO: Remove this ref cast. ref and rest props should be applied on the same element
+(props, ref) => {
     const { steps, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { ref: ref },
-        React.createElement("ol", { className: 'iui-workflow-diagram', ...rest }, steps.map((s, index) => (React.createElement(WorkflowDiagramStep_js_1.WorkflowDiagramStep, { key: index, title: s.name, description: s.description }))))));
+    return (React.createElement(index_js_1.Box, { ref: ref },
+        React.createElement(index_js_1.Box, { as: 'ol', className: 'iui-workflow-diagram', ...rest }, steps.map((s, index) => (React.createElement(WorkflowDiagramStep_js_1.WorkflowDiagramStep, { key: index, title: s.name, description: s.description }))))));
 });
 exports.default = exports.WorkflowDiagram;

package/cjs/core/Stepper/WorkflowDiagramStep.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { StylingProps } from '../utils/index.js';
+import { type CommonProps } from '../utils/index.js';
 import type { StepperStepProps } from './StepperStep.js';
-export declare type WorkflowDiagramStepProps = Pick<StepperStepProps, 'title' | 'description'> & StylingProps;
+export declare type WorkflowDiagramStepProps = Pick<StepperStepProps, 'title' | 'description'> & Omit<CommonProps, 'title'>;
 export declare const WorkflowDiagramStep: (props: WorkflowDiagramStepProps) => JSX.Element;

package/cjs/core/Stepper/WorkflowDiagramStep.js

@@ -34,10 +34,11 @@ exports.WorkflowDiagramStep = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../Tooltip/index.js");
+const index_js_2 = require("../utils/index.js");
 const WorkflowDiagramStep = (props) => {
     const { title, description, className, style, ...rest } = props;
-    const stepShape = (React.createElement("li", { className: (0, classnames_1.default)('iui-workflow-diagram-step', className), style: style, ...rest },
-        React.createElement("span", { className: 'iui-workflow-diagram-content' }, title)));
+    const stepShape = (React.createElement(index_js_2.Box, { as: 'li', className: (0, classnames_1.default)('iui-workflow-diagram-step', className), style: style, ...rest },
+        React.createElement(index_js_2.Box, { as: 'span', className: 'iui-workflow-diagram-content' }, title)));
     return description ? (React.createElement(index_js_1.Tooltip, { content: description }, stepShape)) : (stepShape);
 };
 exports.WorkflowDiagramStep = WorkflowDiagramStep;

package/cjs/core/Stepper/index.d.ts

@@ -1,8 +1,7 @@
 export { Wizard } from './Wizard.js';
 export { Stepper } from './Stepper.js';
 export { WorkflowDiagram } from './WorkflowDiagram.js';
-export type { WizardProps, WizardType, WizardLocalization } from './Wizard.js';
-export type { StepperProps, StepProperties, StepperLocalization, } from './Stepper.js';
-export type { WorkflowDiagramProps } from './WorkflowDiagram.js';
+export type { WizardType, WizardLocalization } from './Wizard.js';
+export type { StepProperties, StepperLocalization } from './Stepper.js';
 declare const _default: "./Wizard";
 export default _default;

package/cjs/core/Surface/Surface.d.ts

@@ -1,16 +1,13 @@
 import * as React from 'react';
-import type { CommonProps, PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/surface.css';
-declare type SurfaceHeaderOwnProps = {};
-export declare type SurfaceHeaderProps<T extends React.ElementType = 'div'> = PolymorphicComponentProps<T, SurfaceHeaderOwnProps>;
 declare type SurfaceBodyOwnProps = {
     /**
      * Gives padding to the surface body
      */
     isPadded?: boolean;
 };
-export declare type SurfaceBodyProps<T extends React.ElementType = 'div'> = PolymorphicComponentProps<T, SurfaceBodyOwnProps>;
-export declare type SurfaceProps = {
+declare type SurfaceProps = {
     /**
      * Sets the elevation of the surface
      */
@@ -19,7 +16,7 @@ export declare type SurfaceProps = {
      * Content in the surface.
      */
     children: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * The Surface container allows content to appear elevated through the use of a drop shadow
  * @example
@@ -30,20 +27,11 @@ export declare type SurfaceProps = {
  *   <Surface.Body isPadded={true}>Surface Body Content</Surface.Body>
  * </Surface>
  */
-export declare const Surface: React.ForwardRefExoticComponent<{
-    /**
-     * Sets the elevation of the surface
-     */
-    elevation?: 0 | 1 | 2 | 3 | 4 | 5 | undefined;
-    /**
-     * Content in the surface.
-     */
-    children: React.ReactNode;
-} & Omit<CommonProps, "title"> & React.RefAttributes<HTMLDivElement>> & {
+export declare const Surface: PolymorphicForwardRefComponent<"div", SurfaceProps> & {
     /**
      * 	Surface header subcomponent
      */
-    Header: PolymorphicForwardRefComponent<"div", SurfaceHeaderOwnProps>;
+    Header: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * 	Surface body subcomponent. Additional padding can be added to the body through the 'isPadded' prop
      */

package/cjs/core/Surface/Surface.js

@@ -56,25 +56,27 @@ const getSurfaceElevationValue = (elevation) => {
             return '';
     }
 };
+// ----------------------------------------------------------------------------
+// Surface.Header component
 const SurfaceHeader = React.forwardRef((props, ref) => {
-    const { as: Element = 'div', children, className, ...rest } = props;
+    const { children, className, ...rest } = props;
     const { setHasLayout } = (0, index_js_1.useSafeContext)(SurfaceContext);
     React.useEffect(() => {
         if (!(0, index_js_1.supportsHas)()) {
             setHasLayout(true);
         }
     }, [setHasLayout]);
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-surface-header', className), ref: ref, ...rest }, children));
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-surface-header', className), ref: ref, ...rest }, children));
 });
 const SurfaceBody = React.forwardRef((props, ref) => {
-    const { as: Element = 'div', children, className, isPadded, ...rest } = props;
+    const { children, className, isPadded, ...rest } = props;
     const { setHasLayout } = (0, index_js_1.useSafeContext)(SurfaceContext);
     React.useEffect(() => {
         if (!(0, index_js_1.supportsHas)()) {
             setHasLayout(true);
         }
     }, [setHasLayout]);
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-surface-body', className), ref: ref, "data-iui-padded": isPadded ? 'true' : undefined, ...rest }, children));
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-surface-body', className), ref: ref, "data-iui-padded": isPadded ? 'true' : undefined, ...rest }, children));
 });
 /**
  * The Surface container allows content to appear elevated through the use of a drop shadow
@@ -88,13 +90,12 @@ const SurfaceBody = React.forwardRef((props, ref) => {
  */
 exports.Surface = Object.assign(React.forwardRef((props, ref) => {
     const { elevation, className, style, children, ...rest } = props;
-    (0, index_js_1.useTheme)();
     const [hasLayout, setHasLayout] = React.useState(false);
     const _style = {
         '--iui-surface-elevation': getSurfaceElevationValue(elevation),
         ...style,
     };
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-surface', className), style: _style, ref: ref, "data-iui-layout": hasLayout ? 'true' : undefined, ...rest },
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-surface', className), style: _style, ref: ref, "data-iui-layout": hasLayout ? 'true' : undefined, ...rest },
         React.createElement(SurfaceContext.Provider, { value: { setHasLayout } }, children)));
 }), {
     /**

package/cjs/core/Surface/index.d.ts

@@ -1,4 +1,3 @@
 export { Surface } from './Surface.js';
-export type { SurfaceProps, SurfaceHeaderProps, SurfaceBodyProps, } from './Surface.js';
 declare const _default: "./Surface";
 export default _default;

package/cjs/core/Table/Table.js

@@ -105,7 +105,7 @@ const flattenColumns = (columns) => {
  */
 const Table = (props) => {
     const { data, columns, isLoading = false, emptyTableContent, className, style, id, isSelectable = false, onSelect, onRowClick, selectionMode = 'multi', isSortable = false, onSort, stateReducer, onBottomReached, onRowInViewport, intersectionMargin = 300, subComponent, onExpand, onFilter, globalFilterValue, emptyFilteredTableContent, filterTypes: filterFunctions, expanderCell, isRowDisabled, rowProps, density = 'default', selectSubRows = true, getSubRows, selectRowOnClick = true, paginatorRenderer, pageSize = 25, isResizable = false, columnResizeMode = 'fit', styleType = 'default', enableVirtualization = false, enableColumnReordering = false, ...rest } = props;
-    (0, index_js_2.useTheme)();
+    (0, index_js_2.useGlobals)();
     const ownerDocument = React.useRef();
     const defaultColumn = React.useMemo(() => ({
         maxWidth: 0,

package/cjs/core/Table/TablePaginator.js

@@ -60,7 +60,7 @@ const defaultLocalization = {
  */
 const TablePaginator = (props) => {
     const { currentPage, totalRowsCount, pageSize, onPageChange, totalSelectedRowsCount = 0, focusActivationMode = 'manual', isLoading = false, size = 'default', pageSizeList, onPageSizeChange, localization: userLocalization, className, ...rest } = props;
-    (0, index_js_4.useTheme)();
+    (0, index_js_4.useGlobals)();
     const localization = React.useMemo(() => ({ ...defaultLocalization, ...userLocalization }), [userLocalization]);
     const pageListRef = React.useRef(null);
     const [focusedIndex, setFocusedIndex] = React.useState(currentPage);

package/cjs/core/Table/columns/actionColumn.js

@@ -104,7 +104,7 @@ const ActionColumn = ({ columnManager = false, } = {}) => {
                         (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
                     });
                 };
-                return (React.createElement(index_js_5.MenuItem, { key: column.id, icon: React.createElement(index_js_1.Checkbox, { checked: checked, disabled: column.disableToggleVisibility, onClick: (e) => e.stopPropagation(), onChange: onClick, "aria-labelledby": `iui-column-${column.id}` }), onClick: onClick, disabled: column.disableToggleVisibility },
+                return (React.createElement(index_js_5.MenuItem, { key: column.id, startIcon: React.createElement(index_js_1.Checkbox, { checked: checked, disabled: column.disableToggleVisibility, onClick: (e) => e.stopPropagation(), onChange: onClick, "aria-labelledby": `iui-column-${column.id}` }), onClick: onClick, disabled: column.disableToggleVisibility },
                     React.createElement("div", { id: `iui-column-${column.id}` }, column.render('Header'))));
             });
             const dropdownMenuProps = typeof columnManager !== 'boolean'

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

@@ -8,7 +8,7 @@ export declare const EXPANDER_CELL_ID = "iui-table-expander";
  * const subComponent = useCallback(
  *   (row: Row) => (
  *     <div style={{ padding: 16 }}>
- *       <Leading>Extra information</Leading>
+ *       <Text variant='leading'>Extra information</Text>
  *       <pre>
  *         <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
  *       </pre>

package/cjs/core/Table/columns/expanderColumn.js

@@ -40,7 +40,7 @@ exports.EXPANDER_CELL_ID = 'iui-table-expander';
  * const subComponent = useCallback(
  *   (row: Row) => (
  *     <div style={{ padding: 16 }}>
- *       <Leading>Extra information</Leading>
+ *       <Text variant='leading'>Extra information</Text>
  *       <pre>
  *         <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
  *       </pre>

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

@@ -51,7 +51,7 @@ const index_js_1 = require("../../utils/index.js");
  */
 const BaseFilter = (props) => {
     const { children, className, style, id } = props;
-    (0, index_js_1.useTheme)();
+    (0, index_js_1.useGlobals)();
     return (React.createElement("div", { className: (0, classnames_1.default)('iui-table-column-filter', className), style: style, 
         // Prevents from triggering sort
         onClick: (e) => {

package/cjs/core/Table/filters/DateRangeFilter/DatePickerInput.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import type { LabeledInputProps } from '../../../LabeledInput/index.js';
+import * as React from 'react';
+import { LabeledInput } from '../../../LabeledInput/index.js';
 export declare type DatePickerInputProps = {
     date?: Date;
     onChange: (date?: Date) => void;
@@ -13,6 +13,6 @@ export declare type DatePickerInputProps = {
      * The 'to' date for the 'from' DatePickerInput or the 'from' date for the 'to' DatePickerInput
      */
     selectedDate?: Date;
-} & Omit<LabeledInputProps, 'value' | 'onChange' | 'svgIcon' | 'displayStyle'>;
+} & Omit<React.ComponentProps<typeof LabeledInput>, 'value' | 'onChange' | 'svgIcon' | 'displayStyle'>;
 declare const DatePickerInput: (props: DatePickerInputProps) => JSX.Element;
 export default DatePickerInput;

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

@@ -59,7 +59,7 @@ const defaultParseInput = (text) => {
 const DateRangeFilter = (props) => {
     var _a, _b, _c, _d;
     const { column, translatedLabels, setFilter, clearFilter, formatDate = defaultFormatDate, parseInput = defaultParseInput, placeholder = 'MMM dd, yyyy', } = props;
-    (0, index_js_1.useTheme)();
+    (0, index_js_1.useGlobals)();
     const translatedStrings = { ...defaultStrings, ...translatedLabels };
     const [from, setFrom] = React.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);
     const onFromChange = React.useCallback((date) => {

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

@@ -48,7 +48,7 @@ const defaultStrings = {
 const FilterButtonBar = (props) => {
     const { children, setFilter, clearFilter, translatedLabels, className, style, id, } = props;
     const translatedStrings = { ...defaultStrings, ...translatedLabels };
-    (0, index_js_1.useTheme)();
+    (0, index_js_1.useGlobals)();
     return (React.createElement("div", { className: (0, classnames_1.default)('iui-button-bar', className), style: style, id: id },
         children,
         React.createElement(index_js_2.Button, { styleType: 'high-visibility', onClick: setFilter }, translatedStrings.filter),

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import type { HeaderGroup } from 'react-table';
 import '@itwin/itwinui-css/css/table.css';
-import type { StylingProps } from '../../utils/index.js';
+import type { CommonProps } from '../../utils/index.js';
 export declare type FilterToggleProps<T extends Record<string, unknown>> = {
     column: HeaderGroup<T>;
-} & StylingProps;
+} & CommonProps;
 /**
  * Handles showing filter icon and opening filter component.
  */

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

@@ -41,7 +41,7 @@ const index_js_2 = require("../../Buttons/index.js");
  */
 const FilterToggle = (props) => {
     const { column, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
+    (0, index_js_1.useGlobals)();
     const [isVisible, setIsVisible] = React.useState(false);
     const close = React.useCallback(() => setIsVisible(false), []);
     const setFilter = React.useCallback((filterValue) => {

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

@@ -41,7 +41,7 @@ const defaultStrings = {
 const NumberRangeFilter = (props) => {
     var _a, _b, _c, _d;
     const { column, translatedLabels, setFilter, clearFilter } = props;
-    (0, index_js_1.useTheme)();
+    (0, index_js_1.useGlobals)();
     const translatedStrings = { ...defaultStrings, ...translatedLabels };
     const [from, setFrom] = React.useState((_b = (_a = column.filterValue) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '');
     const [to, setTo] = React.useState((_d = (_c = column.filterValue) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : '');

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

@@ -37,7 +37,7 @@ const BaseFilter_js_1 = require("../BaseFilter.js");
 const TextFilter = (props) => {
     var _a;
     const { column, translatedLabels, setFilter, clearFilter } = props;
-    (0, index_js_1.useTheme)();
+    (0, index_js_1.useGlobals)();
     const [text, setText] = React.useState((_a = column.filterValue) !== null && _a !== void 0 ? _a : '');
     const onKeyDown = (event) => {
         if (event.altKey) {

package/cjs/core/Tabs/Tab.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/tabs.css';
-export declare type TabProps = {
+declare type TabProps = {
     /**
      * The main label shown in the tab.
      */
@@ -21,7 +22,13 @@ export declare type TabProps = {
      * Custom content appended to the tab.
      */
     children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLButtonElement>;
+    /**
+     * Whether the tab has active styling.
+     *
+     * This will be automatically set by the parent `Tabs` component.
+     */
+    active?: boolean;
+};
 /**
  * Individual tab component to be used in the `labels` prop of `Tabs`.
  * @example
@@ -30,5 +37,5 @@ export declare type TabProps = {
  *   <Tab label='Label 2' startIcon={<SvgPlaceholder />} />,
  * ];
  */
-export declare const Tab: (props: TabProps) => JSX.Element;
+export declare const Tab: PolymorphicForwardRefComponent<"button", TabProps>;
 export default TabProps;

package/cjs/core/Tabs/Tab.js

@@ -43,18 +43,12 @@ require("@itwin/itwinui-css/css/tabs.css");
  *   <Tab label='Label 2' startIcon={<SvgPlaceholder />} />,
  * ];
  */
-const Tab = (props) => {
-    const { label, sublabel, startIcon, children, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("button", { className: (0, classnames_1.default)('iui-tab', className), role: 'tab', tabIndex: -1, ...rest },
-        startIcon &&
-            React.cloneElement(startIcon, {
-                className: 'iui-tab-icon',
-                'aria-hidden': true,
-            }),
-        label && (React.createElement("span", { className: 'iui-tab-label' },
+exports.Tab = React.forwardRef((props, forwardedRef) => {
+    const { label, sublabel, startIcon, children, active = false, className, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { as: 'button', className: (0, classnames_1.default)('iui-tab', { 'iui-active': active }, className), role: 'tab', tabIndex: -1, ref: forwardedRef, ...rest },
+        !!startIcon ? (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-tab-icon', "aria-hidden": true }, startIcon)) : null,
+        label && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-tab-label' },
             React.createElement("div", null, label),
-            sublabel && React.createElement("div", { className: 'iui-tab-description' }, sublabel))),
+            sublabel && React.createElement(index_js_1.Box, { className: 'iui-tab-description' }, sublabel))),
         children));
-};
-exports.Tab = Tab;
+});

package/cjs/core/Tabs/Tabs.d.ts

@@ -103,11 +103,11 @@ export declare type TabsProps = {
 /**
  * @deprecated Since v2, use `TabProps` with `Tabs`
  */
-export declare type HorizontalTabsProps = Omit<TabsProps, 'orientation'>;
+declare type HorizontalTabsProps = Omit<TabsProps, 'orientation'>;
 /**
  * @deprecated Since v2, use `TabProps` with `Tabs`
  */
-export declare type VerticalTabsProps = Omit<TabsProps, 'orientation' | 'type'> & {
+declare type VerticalTabsProps = Omit<TabsProps, 'orientation' | 'type'> & {
     type?: 'default' | 'borderless';
 };
 /**

package/cjs/core/Tabs/Tabs.js

@@ -81,7 +81,6 @@ const Tabs = (props) => {
         delete props.overflowOptions;
     }
     const { labels, activeIndex, onTabSelected, focusActivationMode = 'auto', type = 'default', color = 'blue', orientation = 'horizontal', tabsClassName, contentClassName, wrapperClassName, children, ...rest } = props;
-    (0, index_js_1.useTheme)();
     const isClient = (0, index_js_1.useIsClient)();
     const tablistRef = React.useRef(null);
     const [tablistSizeRef, tabsWidth] = (0, index_js_1.useContainerWidth)(type !== 'default');
@@ -365,9 +364,7 @@ const Tabs = (props) => {
         return (React.createElement("li", { key: index }, !React.isValidElement(label) ? (React.createElement(Tab_js_1.Tab, { label: label, className: (0, classnames_1.default)({
                 'iui-active': index === currentActiveIndex,
             }), tabIndex: index === currentActiveIndex ? 0 : -1, onClick: onClick, "aria-selected": index === currentActiveIndex })) : (React.cloneElement(label, {
-            className: (0, classnames_1.default)(label.props.className, {
-                'iui-active': index === currentActiveIndex,
-            }),
+            active: index === currentActiveIndex,
             'aria-selected': index === currentActiveIndex,
             tabIndex: index === currentActiveIndex ? 0 : -1,
             onClick: (args) => {
@@ -377,16 +374,16 @@ const Tabs = (props) => {
             },
         }))));
     }, [currentActiveIndex, onTabClick]);
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-tabs-wrapper', `iui-${orientation}`, wrapperClassName), style: stripeProperties },
-        React.createElement("ul", { className: (0, classnames_1.default)('iui-tabs', `iui-${type}`, {
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tabs-wrapper', `iui-${orientation}`, wrapperClassName), style: stripeProperties },
+        React.createElement(index_js_1.Box, { as: 'ul', className: (0, classnames_1.default)('iui-tabs', `iui-${type}`, {
                 'iui-green': color === 'green',
                 'iui-animated': type !== 'default' && isClient,
                 'iui-not-animated': type !== 'default' && !isClient,
                 'iui-large': hasSublabel,
             }, tabsClassName), "data-iui-overflow": overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow, "data-iui-scroll-placement": scrollingPlacement, role: 'tablist', ref: refs, onKeyDown: onKeyDown, ...rest }, labels.map((label, index) => createTab(label, index))),
-        actions && (React.createElement("div", { className: 'iui-tabs-actions-wrapper' },
-            React.createElement("div", { className: 'iui-tabs-actions' }, actions))),
-        children && (React.createElement("div", { className: (0, classnames_1.default)('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));
+        actions && (React.createElement(index_js_1.Box, { className: 'iui-tabs-actions-wrapper' },
+            React.createElement(index_js_1.Box, { className: 'iui-tabs-actions' }, actions))),
+        children && (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));
 };
 exports.Tabs = Tabs;
 /**

package/cjs/core/Tabs/index.d.ts

@@ -1,4 +1,2 @@
 export { Tabs, VerticalTabs, HorizontalTabs } from './Tabs.js';
-export type { TabsProps, VerticalTabsProps, HorizontalTabsProps, } from './Tabs.js';
 export { Tab } from './Tab.js';
-export type { TabProps } from './Tab.js';

package/cjs/core/Tag/Tag.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/tag.css';
-export declare type TagProps = {
+declare type TagProps = {
     /**
      * Callback function that handles click on close icon.
      * Close icon is shown only when this function is passed.
@@ -18,12 +18,12 @@ export declare type TagProps = {
      * @default 'default'
      */
     variant?: 'default' | 'basic';
-} & CommonProps;
+};
 /**
  * Tag for showing categories, filters etc.
  * @example
  * <Tag onRemove={() => alert('Closed a tag!')}>I'm a tag</Tag>
  * <Tag variant='basic'>Basic tag</Tag>
  */
-export declare const Tag: (props: TagProps) => JSX.Element;
+export declare const Tag: PolymorphicForwardRefComponent<"span", TagProps>;
 export default Tag;