@itwin/itwinui-react 2.6.1 → 2.8.0

package/cjs/core/utils/hooks/useTheme.js

@@ -1,10 +1,34 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTheme = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+const React = __importStar(require("react"));
 const functions_1 = require("../functions");
 const useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
 const useIsThemeAlreadySet_1 = require("./useIsThemeAlreadySet");
@@ -23,6 +47,7 @@ const useTheme = (theme, themeOptions) => {
     var _a;
     const ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : (0, functions_1.getDocument)();
     const isThemeAlreadySet = (0, useIsThemeAlreadySet_1.useIsThemeAlreadySet)(ownerDocument);
+    useCorrectRootFontSize();
     (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(() => {
         if (!ownerDocument || isThemeAlreadySet.current) {
             return;
@@ -81,3 +106,22 @@ const handleTheme = (theme, ownerDocument, highContrast) => {
         (_b = prefersHCQuery === null || prefersHCQuery === void 0 ? void 0 : prefersHCQuery.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(prefersHCQuery, 'change', changeHandler);
     };
 };
+let didLogWarning = false;
+let isDev = false;
+// wrapping in try-catch because process might be undefined
+try {
+    isDev = process.env.NODE_ENV !== 'production';
+}
+catch (_a) { }
+/** Shows console error if the page changes the root font size */
+const useCorrectRootFontSize = () => {
+    React.useEffect(() => {
+        if (isDev && !didLogWarning) {
+            const rootFontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
+            if (rootFontSize < 16) {
+                console.error('Root font size must not be overridden. \nSee https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#relative-font-size');
+                didLogWarning = true;
+            }
+        }
+    }, []);
+};

package/esm/core/Badge/Badge.d.ts

@@ -10,7 +10,7 @@ export declare type BadgeProps = {
      *
      * If not specified, a default neutral background will be used.
      */
-    backgroundColor?: 'primary' | 'positive' | 'negative' | 'warning' | keyof typeof SoftBackgrounds | AnyString;
+    backgroundColor?: 'primary' | 'informational' | 'positive' | 'negative' | 'warning' | keyof typeof SoftBackgrounds | AnyString;
     /**
      * Badge label.
      * Always gets converted to uppercase, and truncated if too long.

package/esm/core/Badge/Badge.js

@@ -13,18 +13,14 @@ const getBadgeColorValue = (color) => {
     if (!color) {
         return '';
     }
-    switch (color) {
-        case 'primary':
-            return '#A5D7F5';
-        case 'positive':
-            return '#C3E1AF';
-        case 'negative':
-            return '#EFA9A9';
-        case 'warning':
-            return '#F9D7AB';
-        default:
-            return isSoftBackground(color) ? SoftBackgrounds[color] : color;
-    }
+    return isSoftBackground(color) ? SoftBackgrounds[color] : color;
+};
+/**
+ * Helper function that returns one of the preset badge status values.
+ */
+const getStatusValue = (color) => {
+    const statuses = ['positive', 'negative', 'warning', 'informational'];
+    return color && statuses.includes(color) ? color : undefined;
 };
 /**
  * A colorful visual indicator for categorizing items.
@@ -36,12 +32,15 @@ const getBadgeColorValue = (color) => {
 export const Badge = (props) => {
     const { backgroundColor, style, className, children, ...rest } = props;
     useTheme();
-    const _style = backgroundColor
+    // choosing 'primary' status should result in data-iui-status equaling 'informational'
+    const reducedBackgroundColor = backgroundColor === 'primary' ? 'informational' : backgroundColor;
+    const statusValue = getStatusValue(reducedBackgroundColor);
+    const _style = reducedBackgroundColor && !statusValue
         ? {
-            '--iui-badge-background-color': getBadgeColorValue(backgroundColor),
+            '--iui-badge-background-color': getBadgeColorValue(reducedBackgroundColor),
             ...style,
         }
         : { ...style };
-    return (React.createElement("span", { className: cx('iui-badge', className), style: _style, ...rest }, children));
+    return (React.createElement("span", { className: cx('iui-badge', className), style: _style, "data-iui-status": statusValue, ...rest }, children));
 };
 export default Badge;

package/esm/core/Carousel/Carousel.js

@@ -60,8 +60,9 @@ export const Carousel = Object.assign(React.forwardRef((props, ref) => {
         if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
             return;
         }
-        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-            setKeysPressed((old) => ({ ...old, [event.key]: true }));
+        const key = event.key;
+        if (key === 'ArrowLeft' || key === 'ArrowRight') {
+            setKeysPressed((old) => ({ ...old, [key]: true }));
         }
     };
     const handleKeyUp = (event) => {

package/esm/core/DatePicker/DatePicker.d.ts

@@ -61,6 +61,11 @@ export declare type DatePickerProps = {
      * @default false
      */
     showYearSelection?: boolean;
+    /**
+     * Will disable dates for which this function returns true.
+     * Disabled dates cannot be selected.
+     */
+    isDateDisabled?: (date: Date) => boolean;
 } & DateRangePickerProps & Omit<TimePickerProps, 'date' | 'onChange' | 'setFocusHour'>;
 /**
  * Date picker component

package/esm/core/DatePicker/DatePicker.js

@@ -123,7 +123,7 @@ export const generateLocalizedStrings = (locale) => {
  */
 export const DatePicker = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { date, onChange, localizedNames, className, style, setFocus = false, showTime = false, use12Hours = false, precision, hourStep, minuteStep, secondStep, useCombinedRenderer, combinedRenderer, hourRenderer, minuteRenderer, secondRenderer, meridiemRenderer, showYearSelection = false, enableRangeSelect = false, startDate, endDate, ...rest } = props;
+    const { date, onChange, localizedNames, className, style, setFocus = false, showTime = false, use12Hours = false, precision, hourStep, minuteStep, secondStep, useCombinedRenderer, combinedRenderer, hourRenderer, minuteRenderer, secondRenderer, meridiemRenderer, showYearSelection = false, enableRangeSelect = false, startDate, endDate, isDateDisabled, ...rest } = props;
     useTheme();
     const monthNames = (_a = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.months) !== null && _a !== void 0 ? _a : defaultMonths;
     const shortDays = (_b = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.shortDays) !== null && _b !== void 0 ? _b : defaultShortDays;
@@ -260,6 +260,10 @@ export const DatePicker = (props) => {
             }
         }
     };
+    const isPreviousMonthDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(new Date(displayedYear, displayedMonthIndex, 0));
+    const isNextMonthDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(new Date(displayedYear, displayedMonthIndex + 1, 1));
+    const isPreviousYearDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(new Date(displayedYear - 1, 11, 31));
+    const isNextYearDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(new Date(displayedYear + 1, 0, 1));
     const handleCalendarKeyDown = (event) => {
         if (!focusedDay) {
             return;
@@ -269,6 +273,9 @@ export const DatePicker = (props) => {
             case 'ArrowDown':
                 adjustedFocusedDay.setDate(focusedDay.getDate() + 7);
                 if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
+                    if (isNextMonthDisabled) {
+                        return;
+                    }
                     handleMoveToNextMonth();
                 }
                 setFocusedDay(adjustedFocusedDay);
@@ -278,6 +285,9 @@ export const DatePicker = (props) => {
             case 'ArrowUp':
                 adjustedFocusedDay.setDate(focusedDay.getDate() - 7);
                 if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
+                    if (isPreviousMonthDisabled) {
+                        return;
+                    }
                     handleMoveToPreviousMonth();
                 }
                 setFocusedDay(adjustedFocusedDay);
@@ -287,6 +297,9 @@ export const DatePicker = (props) => {
             case 'ArrowLeft':
                 adjustedFocusedDay.setDate(focusedDay.getDate() - 1);
                 if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
+                    if (isPreviousMonthDisabled) {
+                        return;
+                    }
                     handleMoveToPreviousMonth();
                 }
                 setFocusedDay(adjustedFocusedDay);
@@ -296,6 +309,9 @@ export const DatePicker = (props) => {
             case 'ArrowRight':
                 adjustedFocusedDay.setDate(focusedDay.getDate() + 1);
                 if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
+                    if (isNextMonthDisabled) {
+                        return;
+                    }
                     handleMoveToNextMonth();
                 }
                 setFocusedDay(adjustedFocusedDay);
@@ -305,7 +321,9 @@ export const DatePicker = (props) => {
             case 'Enter':
             case ' ':
             case 'Spacebar':
-                onDayClick(focusedDay);
+                if (!(isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(focusedDay))) {
+                    onDayClick(focusedDay);
+                }
                 event.preventDefault();
                 break;
         }
@@ -340,23 +358,24 @@ export const DatePicker = (props) => {
     return (React.createElement("div", { className: cx('iui-date-picker', className), style: style, ...rest },
         React.createElement("div", null,
             React.createElement("div", { className: 'iui-calendar-month-year' },
-                showYearSelection && (React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousYear, "aria-label": 'Previous year', size: 'small' },
+                showYearSelection && (React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousYear, "aria-label": 'Previous year', size: 'small', disabled: isPreviousYearDisabled },
                     React.createElement(SvgChevronLeftDouble, null))),
-                React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month', size: 'small' },
+                React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month', size: 'small', disabled: isPreviousMonthDisabled },
                     React.createElement(SvgChevronLeft, null)),
                 React.createElement("span", { "aria-live": 'polite' },
                     React.createElement("span", { className: 'iui-calendar-month', title: monthNames[displayedMonthIndex] }, monthNames[displayedMonthIndex]),
                     "\u00A0",
                     displayedYear),
-                React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month', size: 'small' },
+                React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month', size: 'small', disabled: isNextMonthDisabled },
                     React.createElement(SvgChevronRight, null)),
-                showYearSelection && (React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToNextYear, "aria-label": 'Next year', size: 'small' },
+                showYearSelection && (React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToNextYear, "aria-label": 'Next year', size: 'small', disabled: isNextYearDisabled },
                     React.createElement(SvgChevronRightDouble, null)))),
             React.createElement("div", { className: 'iui-calendar-weekdays' }, shortDays.map((day, index) => (React.createElement("div", { key: day, title: longDays[index] }, day)))),
             React.createElement("div", { onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map((weekDays, weekIndex) => {
                 return (React.createElement("div", { key: `week-${displayedMonthIndex}-${weekIndex}`, className: 'iui-calendar-week' }, weekDays.map((weekDay, dayIndex) => {
                     const dateValue = weekDay.getDate();
-                    return (React.createElement("div", { key: `day-${displayedMonthIndex}-${dayIndex}`, className: getDayClass(weekDay), onClick: () => onDayClick(weekDay), role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, ref: (element) => isSameDay(weekDay, focusedDay) &&
+                    const isDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(weekDay);
+                    return (React.createElement("div", { key: `day-${displayedMonthIndex}-${dayIndex}`, className: getDayClass(weekDay), onClick: () => !isDisabled && onDayClick(weekDay), role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, "aria-disabled": isDisabled ? 'true' : undefined, ref: (element) => isSameDay(weekDay, focusedDay) &&
                             needFocus.current &&
                             (element === null || element === void 0 ? void 0 : element.focus()) }, dateValue));
                 })));

package/esm/core/Dialog/DialogMain.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { FocusTrap, getTranslateValues, useLatestRef, Resizer, useMergedRefs, useTheme, useIsomorphicLayoutEffect, } from '../utils';
+import { FocusTrap, getTranslateValues, Resizer, useMergedRefs, useTheme, useIsomorphicLayoutEffect, } from '../utils';
 import '@itwin/itwinui-css/css/dialog.css';
 import { useDialogContext } from './DialogContext';
 import { CSSTransition } from 'react-transition-group';
@@ -38,28 +38,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
     const dialogRef = React.useRef(null);
     const refs = useMergedRefs(dialogRef, ref);
     const hasBeenResized = React.useRef(false);
-    // Focuses dialog when opened and brings back focus to the previously focused element when closed.
     const previousFocusedElement = React.useRef();
-    const setFocusRef = useLatestRef(setFocus);
-    React.useEffect(() => {
-        var _a, _b, _c;
-        if (!setFocusRef.current) {
-            return;
-        }
-        if (isOpen) {
-            previousFocusedElement.current = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement;
-            (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-        else {
-            (_c = previousFocusedElement.current) === null || _c === void 0 ? void 0 : _c.focus();
-        }
-        const ref = dialogRef.current;
-        return () => {
-            var _a;
-            (ref === null || ref === void 0 ? void 0 : ref.contains(document.activeElement)) &&
-                ((_a = previousFocusedElement.current) === null || _a === void 0 ? void 0 : _a.focus());
-        };
-    }, [isOpen, setFocusRef]);
     const originalBodyOverflow = React.useRef('');
     React.useEffect(() => {
         if (isOpen) {
@@ -130,7 +109,6 @@ export const DialogMain = React.forwardRef((props, ref) => {
     const content = (React.createElement("div", { className: cx('iui-dialog', {
             'iui-dialog-default': styleType === 'default',
             'iui-dialog-full-page': styleType === 'fullPage',
-            'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
         }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, style: {
             transform,
@@ -145,7 +123,24 @@ export const DialogMain = React.forwardRef((props, ref) => {
                 }
             }, onResizeEnd: setResizeStyle })),
         children));
-    return (React.createElement(CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true, nodeRef: dialogRef },
+    return (React.createElement(CSSTransition, { in: isOpen, classNames: {
+            enter: 'iui-dialog-animation-enter',
+            enterActive: 'iui-dialog-animation-enter-active',
+            enterDone: 'iui-dialog-visible',
+        }, timeout: { exit: 600 }, 
+        // Focuses dialog when opened
+        onEntered: () => {
+            var _a, _b;
+            previousFocusedElement.current = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement;
+            setFocus && ((_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true }));
+        }, 
+        // Brings back focus to the previously focused element when closed
+        onExit: () => {
+            var _a, _b, _c;
+            if ((_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.contains((_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.activeElement)) {
+                (_c = previousFocusedElement.current) === null || _c === void 0 ? void 0 : _c.focus();
+            }
+        }, unmountOnExit: true, nodeRef: dialogRef },
         React.createElement(DialogDragContext.Provider, { value: { onPointerDown: handlePointerDown } },
             trapFocus && React.createElement(FocusTrap, null, content),
             !trapFocus && content)));

package/esm/core/Slider/Thumb.js

@@ -40,8 +40,6 @@ export const Thumb = (props) => {
     const handlePointerDownOnThumb = React.useCallback(() => {
         !disabled && onThumbActivated(index);
     }, [disabled, index, onThumbActivated]);
-    const [hasFocus, setHasFocus] = React.useState(false);
-    const [isHovered, setIsHovered] = React.useState(false);
     const adjustedValue = React.useMemo(() => {
         if (value < sliderMin) {
             return sliderMin;
@@ -58,11 +56,11 @@ export const Thumb = (props) => {
         return (100.0 * (adjustedValue - sliderMin)) / (sliderMax - sliderMin);
     }, [adjustedValue, sliderMax, sliderMin]);
     const { style, className, ...rest } = thumbProps || {};
-    return (React.createElement(Tooltip, { visible: isActive || hasFocus || isHovered, placement: 'top', ...tooltipProps },
+    return (React.createElement(Tooltip, { placement: 'top', trigger: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.visible) == null ? 'mouseenter click focus' : undefined, ...tooltipProps },
         React.createElement("div", { ...rest, "data-index": index, ref: thumbRef, style: {
                 ...style,
                 ...(orientation === 'horizontal'
                     ? { left: `${lowPercent}%` }
                     : { bottom: `${lowPercent}%` }),
-            }, className: cx('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: (event) => handleOnKeyboardEvent(event, false), onKeyUp: (event) => handleOnKeyboardEvent(event, true), onFocus: () => setHasFocus(true), onBlur: () => setHasFocus(false), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) })));
+            }, className: cx('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: (event) => handleOnKeyboardEvent(event, false), onKeyUp: (event) => handleOnKeyboardEvent(event, true) })));
 };

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

@@ -1,6 +1,15 @@
 import React from 'react';
-import { CommonProps } from '../utils';
+import { CommonProps, PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../utils';
 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 = {
     /**
      * Sets the elevation of the surface
@@ -16,6 +25,10 @@ export declare type SurfaceProps = {
  * @example
  * <Surface>Surface Content</Surface>
  * <Surface elevation={2}>Surface Content</Surface>
+ * <Surface>
+ *   <Surface.Header>Surface Header Content</Surface.Header>
+ *   <Surface.Body isPadded={true}>Surface Body Content</Surface.Body>
+ * </Surface>
  */
 export declare const Surface: React.ForwardRefExoticComponent<{
     /**
@@ -26,5 +39,14 @@ export declare const Surface: React.ForwardRefExoticComponent<{
      * Content in the surface.
      */
     children: React.ReactNode;
-} & Omit<CommonProps, "title"> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<CommonProps, "title"> & React.RefAttributes<HTMLDivElement>> & {
+    /**
+     * 	Surface header subcomponent
+     */
+    Header: PolymorphicForwardRefComponent<"div", SurfaceHeaderOwnProps>;
+    /**
+     * 	Surface body subcomponent. Additional padding can be added to the body through the 'isPadded' prop
+     */
+    Body: PolymorphicForwardRefComponent<"div", SurfaceBodyOwnProps>;
+};
 export default Surface;

package/esm/core/Surface/Surface.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { useTheme } from '../utils';
+import { useSafeContext, useTheme, supportsHas, } from '../utils';
 import '@itwin/itwinui-css/css/surface.css';
 /**
  * Helper function that returns one of the preset surface elevation values.
@@ -27,19 +27,55 @@ const getSurfaceElevationValue = (elevation) => {
             return '';
     }
 };
+const SurfaceHeader = React.forwardRef((props, ref) => {
+    const { as: Element = 'div', children, className, ...rest } = props;
+    const { setHasLayout } = useSafeContext(SurfaceContext);
+    React.useEffect(() => {
+        if (!supportsHas()) {
+            setHasLayout(true);
+        }
+    }, [setHasLayout]);
+    return (React.createElement(Element, { className: cx('iui-surface-header', className), ref: ref, ...rest }, children));
+});
+const SurfaceBody = React.forwardRef((props, ref) => {
+    const { as: Element = 'div', children, className, isPadded, ...rest } = props;
+    const { setHasLayout } = useSafeContext(SurfaceContext);
+    React.useEffect(() => {
+        if (!supportsHas()) {
+            setHasLayout(true);
+        }
+    }, [setHasLayout]);
+    return (React.createElement(Element, { className: cx('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
  * @example
  * <Surface>Surface Content</Surface>
  * <Surface elevation={2}>Surface Content</Surface>
+ * <Surface>
+ *   <Surface.Header>Surface Header Content</Surface.Header>
+ *   <Surface.Body isPadded={true}>Surface Body Content</Surface.Body>
+ * </Surface>
  */
-export const Surface = React.forwardRef((props, ref) => {
+export const Surface = Object.assign(React.forwardRef((props, ref) => {
     const { elevation, className, style, children, ...rest } = props;
     useTheme();
+    const [hasLayout, setHasLayout] = React.useState(false);
     const _style = {
         '--iui-surface-elevation': getSurfaceElevationValue(elevation),
         ...style,
     };
-    return (React.createElement("div", { className: cx('iui-surface', className), style: _style, ref: ref, ...rest }, children));
+    return (React.createElement("div", { className: cx('iui-surface', className), style: _style, ref: ref, "data-iui-layout": hasLayout ? 'true' : undefined, ...rest },
+        React.createElement(SurfaceContext.Provider, { value: { setHasLayout } }, children)));
+}), {
+    /**
+     * 	Surface header subcomponent
+     */
+    Header: SurfaceHeader,
+    /**
+     * 	Surface body subcomponent. Additional padding can be added to the body through the 'isPadded' prop
+     */
+    Body: SurfaceBody,
 });
+const SurfaceContext = React.createContext(undefined);
 export default Surface;

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

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

package/esm/core/Tabs/Tabs.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme, useMergedRefs, getBoundedValue, useContainerWidth, useIsomorphicLayoutEffect, } from '../utils';
+import { useTheme, useMergedRefs, getBoundedValue, useContainerWidth, useIsomorphicLayoutEffect, useIsClient, } from '../utils';
 import '@itwin/itwinui-css/css/tabs.css';
 import { Tab } from './Tab';
 /**
@@ -44,6 +44,7 @@ export const Tabs = (props) => {
     }
     const { labels, activeIndex, onTabSelected, focusActivationMode = 'auto', type = 'default', color = 'blue', orientation = 'horizontal', tabsClassName, contentClassName, wrapperClassName, children, ...rest } = props;
     useTheme();
+    const isClient = useIsClient();
     const tablistRef = React.useRef(null);
     const [tablistSizeRef, tabsWidth] = useContainerWidth(type !== 'default');
     const refs = useMergedRefs(tablistRef, tablistSizeRef);
@@ -155,7 +156,8 @@ export const Tabs = (props) => {
     return (React.createElement("div", { className: cx('iui-tabs-wrapper', `iui-${orientation}`, wrapperClassName), style: stripeProperties },
         React.createElement("ul", { className: cx('iui-tabs', `iui-${type}`, {
                 'iui-green': color === 'green',
-                'iui-animated': type !== 'default',
+                'iui-animated': type !== 'default' && isClient,
+                'iui-not-animated': type !== 'default' && !isClient,
                 'iui-large': hasSublabel,
             }, tabsClassName), role: 'tablist', ref: refs, onKeyDown: onKeyDown, ...rest }, labels.map((label, index) => {
             const onClick = () => {

package/esm/core/Tile/Tile.d.ts

@@ -1,5 +1,16 @@
 import React from 'react';
+import { PolymorphicComponentProps } from '../utils';
 import '@itwin/itwinui-css/css/tile.css';
+declare type TileActionOwnProps = {};
+/**
+ * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
+ * Renders `a` element by default.
+ * @example
+ * <Tile
+ *   name={<Tile.Action href='/new-page'>Tile name<Tile.Action/>}
+ * />
+ */
+export declare const TileAction: (props: PolymorphicComponentProps<'a', TileActionOwnProps>) => JSX.Element;
 export declare type TileProps = {
     /**
      * Name or title of the tile.
@@ -102,7 +113,8 @@ export declare type TileProps = {
      * @default false
      */
     isDisabled?: boolean;
-} & React.ComponentPropsWithoutRef<'div'>;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'onClick'>;
 /**
  * Tile component that displays content and actions in a card-like format.
  * @example
@@ -120,5 +132,15 @@ export declare type TileProps = {
  *  isNew={false}
  * />
  */
-export declare const Tile: (props: TileProps) => JSX.Element;
+export declare const Tile: ((props: TileProps) => JSX.Element) & {
+    /**
+     * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
+     * Renders `a` element by default.
+     * @example
+     * <Tile
+     *   name={<Tile.Action href='/new-page'>Tile name<Tile.Action/>}
+     * />
+     */
+    Action: (props: PolymorphicComponentProps<'a', TileActionOwnProps>) => JSX.Element;
+};
 export default Tile;