@itwin/itwinui-react 2.6.1 → 2.8.0

package/CHANGELOG.md

@@ -1,10 +1,81 @@
 # Changelog
 
-## 2.6.1
+## 2.8.0
+
+### Minor Changes
+
+- 861fcab3: The `Surface` component can now be broken down using the `Surface.Header` and `Surface.Body` subcomponents. Users can add padding to the body using `isPadded`.
+
+  ```jsx
+  <Surface>
+    <Surface.Header>Surface Header Content</Surface.Header>
+    <Surface.Body isPadded={true}>Surface Body Content</Surface.Body>
+  </Surface>
+  ```
+
+- 861fcab3: A new `Divider` component has been created which can be used horizontally or vertically
+
+  ```jsx
+  <Divider orientation={'vertical'} />
+  ```
+
+- 8c89441f: Added `VisuallyHidden`, a utility component for providing text to assistive technologies while hiding it visually.
+
+  ```jsx
+  <div aria-hidden='true'>★★★☆☆</div>
+  <VisuallyHidden>3 stars out of 5</VisuallyHidden>
+  ```
 
 ### Patch Changes
 
-- c5cfa4c: Fixed an issue with incremental migration where adding a close button to v2 Toaster was breaking v1 styles for the whole page.
+- 3ad2dd90: Fixed an issue in draggable/resizable dialogs opened in popup windows, where pointermove event listeners were not being removed correctly.
+- 521610a0: iTwinUI will now show a warning in development if it detects that the page overrides the root font size. For more details, see the [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#relative-font-size).
+- 6caccc8d: Fixes jumpy animation when opening full page dialog
+- Updated dependencies
+  - @itwin/itwinui-css@1.9.0
+
+## 2.7.0
+
+### Minor Changes
+
+- bea577e2: Updated the visuals for status colors in Badge.
+- c581e9ed: Added `LinkBox` and `LinkAction`components to improve components with action accessibility.
+
+  Usage:
+
+  ```js
+  <LinkBox>
+    <LinkAction href='/new-page'>Link to click</LinkAction>
+  </LinkBox>
+  ```
+
+- c581e9ed: Added `Tile.Action` to take advantage of these new a11y components in Tile.
+
+  Usage:
+
+  ```js
+  <Tile
+    name={
+      <Tile.Action as='button' onClick={() => {/* Do things */}>
+        Tile name that is also a button
+      </Tile.Action>
+    }
+  />
+  ```
+
+- 61f44293: Added new `isDateDisabled` prop to DatePicker. Accepts a function which takes a date and returns a boolean to indicate whether that date is not selectable.
+
+### Patch Changes
+
+- 198d6a95: Remove the ability to set icon prop for ToggleSwitch when size is set to small
+- c5cfa4c6: Fixed an issue with incremental migration where adding a close button to v2 Toaster was breaking v1 styles for the whole page.
+- a1f235d0: Fixed Carousel showing warnings in React 16 when using arrow keys.
+- c9dee6f5: Fixed an issue where Slider's tooltip was still visible after unmounting the component.
+- 775933e3: The DOM order of Tile content has changed so that the name comes before the thumbnail region. This improves accessibility without affecting visuals.
+- 028d4cd7: Updated actionable tile to have a more prominent hover effect.
+- 341449ca: Fixes an issue where stripe width for borderless and pill tabs was rendering an incorrect length upon first visiting the page.
+- Updated dependencies
+  - @itwin/itwinui-css@1.8.0
 
 ## 2.6.0
 

package/cjs/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/cjs/core/Badge/Badge.js

@@ -19,18 +19,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 (0, utils_1.isSoftBackground)(color) ? utils_1.SoftBackgrounds[color] : color;
-    }
+    return (0, utils_1.isSoftBackground)(color) ? utils_1.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.
@@ -42,13 +38,16 @@ const getBadgeColorValue = (color) => {
 const Badge = (props) => {
     const { backgroundColor, style, className, children, ...rest } = props;
     (0, utils_1.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_1.default.createElement("span", { className: (0, classnames_1.default)('iui-badge', className), style: _style, ...rest }, children));
+    return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-badge', className), style: _style, "data-iui-status": statusValue, ...rest }, children));
 };
 exports.Badge = Badge;
 exports.default = exports.Badge;

package/cjs/core/Carousel/Carousel.js

@@ -66,8 +66,9 @@ exports.Carousel = Object.assign(react_1.default.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/cjs/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/cjs/core/DatePicker/DatePicker.js

@@ -130,7 +130,7 @@ exports.generateLocalizedStrings = generateLocalizedStrings;
  */
 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;
     (0, utils_1.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;
@@ -267,6 +267,10 @@ 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;
@@ -276,6 +280,9 @@ const DatePicker = (props) => {
             case 'ArrowDown':
                 adjustedFocusedDay.setDate(focusedDay.getDate() + 7);
                 if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
+                    if (isNextMonthDisabled) {
+                        return;
+                    }
                     handleMoveToNextMonth();
                 }
                 setFocusedDay(adjustedFocusedDay);
@@ -285,6 +292,9 @@ const DatePicker = (props) => {
             case 'ArrowUp':
                 adjustedFocusedDay.setDate(focusedDay.getDate() - 7);
                 if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
+                    if (isPreviousMonthDisabled) {
+                        return;
+                    }
                     handleMoveToPreviousMonth();
                 }
                 setFocusedDay(adjustedFocusedDay);
@@ -294,6 +304,9 @@ const DatePicker = (props) => {
             case 'ArrowLeft':
                 adjustedFocusedDay.setDate(focusedDay.getDate() - 1);
                 if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
+                    if (isPreviousMonthDisabled) {
+                        return;
+                    }
                     handleMoveToPreviousMonth();
                 }
                 setFocusedDay(adjustedFocusedDay);
@@ -303,6 +316,9 @@ const DatePicker = (props) => {
             case 'ArrowRight':
                 adjustedFocusedDay.setDate(focusedDay.getDate() + 1);
                 if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
+                    if (isNextMonthDisabled) {
+                        return;
+                    }
                     handleMoveToNextMonth();
                 }
                 setFocusedDay(adjustedFocusedDay);
@@ -312,7 +328,9 @@ 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;
         }
@@ -347,23 +365,24 @@ const DatePicker = (props) => {
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-date-picker', className), style: style, ...rest },
         react_1.default.createElement("div", null,
             react_1.default.createElement("div", { className: 'iui-calendar-month-year' },
-                showYearSelection && (react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousYear, "aria-label": 'Previous year', size: 'small' },
+                showYearSelection && (react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousYear, "aria-label": 'Previous year', size: 'small', disabled: isPreviousYearDisabled },
                     react_1.default.createElement(utils_1.SvgChevronLeftDouble, null))),
-                react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month', size: 'small' },
+                react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month', size: 'small', disabled: isPreviousMonthDisabled },
                     react_1.default.createElement(utils_1.SvgChevronLeft, null)),
                 react_1.default.createElement("span", { "aria-live": 'polite' },
                     react_1.default.createElement("span", { className: 'iui-calendar-month', title: monthNames[displayedMonthIndex] }, monthNames[displayedMonthIndex]),
                     "\u00A0",
                     displayedYear),
-                react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month', size: 'small' },
+                react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month', size: 'small', disabled: isNextMonthDisabled },
                     react_1.default.createElement(utils_1.SvgChevronRight, null)),
-                showYearSelection && (react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToNextYear, "aria-label": 'Next year', size: 'small' },
+                showYearSelection && (react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToNextYear, "aria-label": 'Next year', size: 'small', disabled: isNextYearDisabled },
                     react_1.default.createElement(utils_1.SvgChevronRightDouble, null)))),
             react_1.default.createElement("div", { className: 'iui-calendar-weekdays' }, shortDays.map((day, index) => (react_1.default.createElement("div", { key: day, title: longDays[index] }, day)))),
             react_1.default.createElement("div", { onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map((weekDays, weekIndex) => {
                 return (react_1.default.createElement("div", { key: `week-${displayedMonthIndex}-${weekIndex}`, className: 'iui-calendar-week' }, weekDays.map((weekDay, dayIndex) => {
                     const dateValue = weekDay.getDate();
-                    return (react_1.default.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_1.default.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/cjs/core/Dialog/DialogMain.js

@@ -44,28 +44,7 @@ exports.DialogMain = react_1.default.forwardRef((props, ref) => {
     const dialogRef = react_1.default.useRef(null);
     const refs = (0, utils_1.useMergedRefs)(dialogRef, ref);
     const hasBeenResized = react_1.default.useRef(false);
-    // Focuses dialog when opened and brings back focus to the previously focused element when closed.
     const previousFocusedElement = react_1.default.useRef();
-    const setFocusRef = (0, utils_1.useLatestRef)(setFocus);
-    react_1.default.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_1.default.useRef('');
     react_1.default.useEffect(() => {
         if (isOpen) {
@@ -136,7 +115,6 @@ exports.DialogMain = react_1.default.forwardRef((props, ref) => {
     const content = (react_1.default.createElement("div", { className: (0, classnames_1.default)('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,
@@ -151,7 +129,24 @@ exports.DialogMain = react_1.default.forwardRef((props, ref) => {
                 }
             }, onResizeEnd: setResizeStyle })),
         children));
-    return (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true, nodeRef: dialogRef },
+    return (react_1.default.createElement(react_transition_group_1.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_1.default.createElement(DialogDragContext_1.DialogDragContext.Provider, { value: { onPointerDown: handlePointerDown } },
             trapFocus && react_1.default.createElement(utils_1.FocusTrap, null, content),
             !trapFocus && content)));

package/cjs/core/Slider/Thumb.js

@@ -46,8 +46,6 @@ const Thumb = (props) => {
     const handlePointerDownOnThumb = react_1.default.useCallback(() => {
         !disabled && onThumbActivated(index);
     }, [disabled, index, onThumbActivated]);
-    const [hasFocus, setHasFocus] = react_1.default.useState(false);
-    const [isHovered, setIsHovered] = react_1.default.useState(false);
     const adjustedValue = react_1.default.useMemo(() => {
         if (value < sliderMin) {
             return sliderMin;
@@ -64,12 +62,12 @@ const Thumb = (props) => {
         return (100.0 * (adjustedValue - sliderMin)) / (sliderMax - sliderMin);
     }, [adjustedValue, sliderMax, sliderMin]);
     const { style, className, ...rest } = thumbProps || {};
-    return (react_1.default.createElement(Tooltip_1.Tooltip, { visible: isActive || hasFocus || isHovered, placement: 'top', ...tooltipProps },
+    return (react_1.default.createElement(Tooltip_1.Tooltip, { placement: 'top', trigger: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.visible) == null ? 'mouseenter click focus' : undefined, ...tooltipProps },
         react_1.default.createElement("div", { ...rest, "data-index": index, ref: thumbRef, style: {
                 ...style,
                 ...(orientation === 'horizontal'
                     ? { left: `${lowPercent}%` }
                     : { bottom: `${lowPercent}%` }),
-            }, className: (0, classnames_1.default)('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: (0, classnames_1.default)('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) })));
 };
 exports.Thumb = Thumb;

package/cjs/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/cjs/core/Surface/Surface.js

@@ -33,19 +33,55 @@ const getSurfaceElevationValue = (elevation) => {
             return '';
     }
 };
+const SurfaceHeader = react_1.default.forwardRef((props, ref) => {
+    const { as: Element = 'div', children, className, ...rest } = props;
+    const { setHasLayout } = (0, utils_1.useSafeContext)(SurfaceContext);
+    react_1.default.useEffect(() => {
+        if (!(0, utils_1.supportsHas)()) {
+            setHasLayout(true);
+        }
+    }, [setHasLayout]);
+    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-surface-header', className), ref: ref, ...rest }, children));
+});
+const SurfaceBody = react_1.default.forwardRef((props, ref) => {
+    const { as: Element = 'div', children, className, isPadded, ...rest } = props;
+    const { setHasLayout } = (0, utils_1.useSafeContext)(SurfaceContext);
+    react_1.default.useEffect(() => {
+        if (!(0, utils_1.supportsHas)()) {
+            setHasLayout(true);
+        }
+    }, [setHasLayout]);
+    return (react_1.default.createElement(Element, { 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
  * @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>
  */
-exports.Surface = react_1.default.forwardRef((props, ref) => {
+exports.Surface = Object.assign(react_1.default.forwardRef((props, ref) => {
     const { elevation, className, style, children, ...rest } = props;
     (0, utils_1.useTheme)();
+    const [hasLayout, setHasLayout] = react_1.default.useState(false);
     const _style = {
         '--iui-surface-elevation': getSurfaceElevationValue(elevation),
         ...style,
     };
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-surface', className), style: _style, ref: ref, ...rest }, children));
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-surface', className), style: _style, ref: ref, "data-iui-layout": hasLayout ? 'true' : undefined, ...rest },
+        react_1.default.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_1.default.createContext(undefined);
 exports.default = exports.Surface;

package/cjs/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/cjs/core/Tabs/Tabs.js

@@ -50,6 +50,7 @@ const Tabs = (props) => {
     }
     const { labels, activeIndex, onTabSelected, focusActivationMode = 'auto', type = 'default', color = 'blue', orientation = 'horizontal', tabsClassName, contentClassName, wrapperClassName, children, ...rest } = props;
     (0, utils_1.useTheme)();
+    const isClient = (0, utils_1.useIsClient)();
     const tablistRef = react_1.default.useRef(null);
     const [tablistSizeRef, tabsWidth] = (0, utils_1.useContainerWidth)(type !== 'default');
     const refs = (0, utils_1.useMergedRefs)(tablistRef, tablistSizeRef);
@@ -161,7 +162,8 @@ const Tabs = (props) => {
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tabs-wrapper', `iui-${orientation}`, wrapperClassName), style: stripeProperties },
         react_1.default.createElement("ul", { className: (0, classnames_1.default)('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/cjs/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;