@itwin/itwinui-react 2.6.0 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # Changelog
 
+## 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
 
 ### Minor Changes

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/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/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;

package/cjs/core/Tile/Tile.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tile = void 0;
+exports.Tile = exports.TileAction = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -15,6 +15,27 @@ require("@itwin/itwinui-css/css/tile.css");
 const DropdownMenu_1 = require("../DropdownMenu");
 const Buttons_1 = require("../Buttons");
 const ProgressIndicators_1 = require("../ProgressIndicators");
+const TileContext = react_1.default.createContext(undefined);
+/**
+ * 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/>}
+ * />
+ */
+const TileAction = (props) => {
+    var _a, _b, _c;
+    const tileContext = (0, utils_1.useSafeContext)(TileContext);
+    const supportsHas = (_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, 'selector(:has(+ *))');
+    react_1.default.useEffect(() => {
+        if (!supportsHas) {
+            tileContext.setActionable(true);
+        }
+    }, [supportsHas, tileContext]);
+    return react_1.default.createElement(utils_1.LinkAction, { ...props });
+};
+exports.TileAction = TileAction;
 /**
  * Tile component that displays content and actions in a card-like format.
  * @example
@@ -32,59 +53,73 @@ const ProgressIndicators_1 = require("../ProgressIndicators");
  *  isNew={false}
  * />
  */
-const Tile = (props) => {
-    const { className, name, description, metadata, thumbnail, buttons, leftIcon, rightIcon, badge, isNew, isSelected, moreOptions, variant = 'default', children, isActionable, status, isLoading = false, isDisabled = false, ...rest } = props;
+exports.Tile = Object.assign((props) => {
+    const { className, name, description, metadata, thumbnail, buttons, leftIcon, rightIcon, badge, isNew, isSelected, moreOptions, variant = 'default', children, isActionable: isActionableProp, status, isLoading = false, isDisabled = false, onClick, ...rest } = props;
     (0, utils_1.useTheme)();
     const [isMenuVisible, setIsMenuVisible] = react_1.default.useState(false);
     const showMenu = react_1.default.useCallback(() => setIsMenuVisible(true), []);
     const hideMenu = react_1.default.useCallback(() => setIsMenuVisible(false), []);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tile', {
-            'iui-folder': variant === 'folder',
-            'iui-new': isNew,
-            'iui-selected': isSelected,
-            'iui-actionable': isActionable,
-            [`iui-${status}`]: !!status,
-            'iui-loading': isLoading,
-        }, className), "aria-disabled": isDisabled, tabIndex: isActionable && !isDisabled ? 0 : undefined, ...rest },
-        thumbnail && (react_1.default.createElement("div", { className: 'iui-tile-thumbnail' },
-            typeof thumbnail === 'string' ? (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: `url(${thumbnail})` } })) : thumbnail && thumbnail.type === 'img' ? (react_1.default.cloneElement(thumbnail, {
-                className: 'iui-tile-thumbnail-picture',
-            })) : react_1.default.isValidElement(thumbnail) ? (react_1.default.cloneElement(thumbnail, {
-                className: (0, classnames_1.default)('iui-thumbnail-icon', thumbnail.props.className),
-            })) : (thumbnail),
-            leftIcon &&
-                react_1.default.cloneElement(leftIcon, {
-                    className: 'iui-tile-thumbnail-type-indicator',
-                    'data-iui-size': 'small',
-                }),
-            rightIcon &&
-                react_1.default.cloneElement(rightIcon, {
-                    className: 'iui-tile-thumbnail-quick-action',
-                    'data-iui-size': 'small',
-                }),
-            badge && (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
-        react_1.default.createElement("div", { className: 'iui-tile-content' },
-            react_1.default.createElement("div", { className: 'iui-tile-name' },
-                react_1.default.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
-                react_1.default.createElement("span", { className: 'iui-tile-name-label' }, name)),
-            description != undefined && (react_1.default.createElement("div", { className: 'iui-tile-description' }, description)),
-            metadata != undefined && (react_1.default.createElement("div", { className: 'iui-tile-metadata' }, metadata)),
-            moreOptions && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: (close) => moreOptions.map((option) => react_1.default.cloneElement(option, {
-                    onClick: (value) => {
-                        var _a, _b;
-                        close();
-                        (_b = (_a = option.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, value);
-                    },
-                })) },
-                react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tile-more-options', {
-                        'iui-visible': isMenuVisible,
-                    }) },
-                    react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
-                        react_1.default.createElement(utils_1.SvgMore, null))))),
-            children),
-        buttons && react_1.default.createElement("div", { className: 'iui-tile-buttons' }, buttons)));
-};
-exports.Tile = Tile;
+    const [localActionable, setLocalActionable] = react_1.default.useState(isActionableProp);
+    const isActionable = isActionableProp !== null && isActionableProp !== void 0 ? isActionableProp : localActionable;
+    const tileName = (react_1.default.createElement("div", { className: 'iui-tile-name' },
+        react_1.default.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
+        react_1.default.createElement("span", { className: 'iui-tile-name-label' }, isActionable && onClick ? (react_1.default.createElement(utils_1.LinkAction, { as: 'button', onClick: !isDisabled ? onClick : undefined, "aria-disabled": isDisabled }, name)) : (name))));
+    return (react_1.default.createElement(TileContext.Provider, { value: { setActionable: setLocalActionable } },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tile', {
+                'iui-folder': variant === 'folder',
+                'iui-new': isNew,
+                'iui-selected': isSelected,
+                'iui-actionable': isActionable,
+                [`iui-${status}`]: !!status,
+                'iui-loading': isLoading,
+            }, className), "aria-disabled": isDisabled, ...rest },
+            variant !== 'folder' ? tileName : null,
+            thumbnail && (react_1.default.createElement("div", { className: 'iui-tile-thumbnail' },
+                typeof thumbnail === 'string' ? (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: `url(${thumbnail})` } })) : thumbnail && thumbnail.type === 'img' ? (react_1.default.cloneElement(thumbnail, {
+                    className: 'iui-tile-thumbnail-picture',
+                })) : react_1.default.isValidElement(thumbnail) ? (react_1.default.cloneElement(thumbnail, {
+                    className: (0, classnames_1.default)('iui-thumbnail-icon', thumbnail.props.className),
+                })) : (thumbnail),
+                leftIcon &&
+                    react_1.default.cloneElement(leftIcon, {
+                        className: 'iui-tile-thumbnail-type-indicator',
+                        'data-iui-size': 'small',
+                    }),
+                rightIcon &&
+                    react_1.default.cloneElement(rightIcon, {
+                        className: 'iui-tile-thumbnail-quick-action',
+                        'data-iui-size': 'small',
+                    }),
+                badge && (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
+            react_1.default.createElement("div", { className: 'iui-tile-content' },
+                variant === 'folder' ? tileName : null,
+                description != undefined && (react_1.default.createElement("div", { className: 'iui-tile-description' }, description)),
+                metadata != undefined && (react_1.default.createElement("div", { className: 'iui-tile-metadata' }, metadata)),
+                moreOptions && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: (close) => moreOptions.map((option) => react_1.default.cloneElement(option, {
+                        onClick: (value) => {
+                            var _a, _b;
+                            close();
+                            (_b = (_a = option.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+                        },
+                    })) },
+                    react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tile-more-options', {
+                            'iui-visible': isMenuVisible,
+                        }) },
+                        react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
+                            react_1.default.createElement(utils_1.SvgMore, null))))),
+                children),
+            buttons && react_1.default.createElement("div", { className: 'iui-tile-buttons' }, buttons))));
+}, {
+    /**
+     * 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: exports.TileAction,
+});
 const TitleIcon = ({ isLoading = false, isSelected = false, isNew = false, status, }) => {
     const StatusIcon = !!status && utils_1.StatusIconMap[status];
     if (isLoading) {

package/cjs/core/ToggleSwitch/ToggleSwitch.d.ts

@@ -15,16 +15,20 @@ export declare type ToggleSwitchProps = {
      * @default false
      */
     setFocus?: boolean;
-    /**
-     * Icon inside the toggle switch. Shown only when toggle is checked.
-     */
-    icon?: JSX.Element;
+} & ({
     /**
      * Size of the toggle switch.
      *  @default 'default'
      */
-    size?: 'default' | 'small';
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>;
+    size?: 'default';
+    /**
+     * Icon inside the toggle switch. Shown only when toggle is checked and size is not small.
+     */
+    icon?: JSX.Element;
+} | {
+    size: 'small';
+    icon?: never;
+}) & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>;
 /**
  * A switch for turning on and off.
  * @example
@@ -43,29 +47,5 @@ export declare type ToggleSwitchProps = {
  * <caption>Toggle with icon</caption>
  * <ToggleSwitch label='With icon toggle' icon={<svg viewBox='0 0 16 16'><path d='M1 1v14h14V1H1zm13 1.7v10.6L8.7 8 14 2.7zM8 7.3L2.7 2h10.6L8 7.3zm-.7.7L2 13.3V2.7L7.3 8zm.7.7l5.3 5.3H2.7L8 8.7z' /></svg>} />
  */
-export declare const ToggleSwitch: React.ForwardRefExoticComponent<{
-    /**
-     * Label for the toggle switch.
-     */
-    label?: React.ReactNode;
-    /**
-     * Position of the label.
-     * @default 'right'
-     */
-    labelPosition?: "right" | "left" | undefined;
-    /**
-     * Set focus on toggle.
-     * @default false
-     */
-    setFocus?: boolean | undefined;
-    /**
-     * Icon inside the toggle switch. Shown only when toggle is checked.
-     */
-    icon?: JSX.Element | undefined;
-    /**
-     * Size of the toggle switch.
-     *  @default 'default'
-     */
-    size?: "small" | "default" | undefined;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & React.RefAttributes<HTMLInputElement>>;
+export declare const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<HTMLInputElement>>;
 export default ToggleSwitch;

package/cjs/core/ToggleSwitch/ToggleSwitch.js

@@ -31,7 +31,13 @@ require("@itwin/itwinui-css/css/toggle-switch.css");
  * <ToggleSwitch label='With icon toggle' icon={<svg viewBox='0 0 16 16'><path d='M1 1v14h14V1H1zm13 1.7v10.6L8.7 8 14 2.7zM8 7.3L2.7 2h10.6L8 7.3zm-.7.7L2 13.3V2.7L7.3 8zm.7.7l5.3 5.3H2.7L8 8.7z' /></svg>} />
  */
 exports.ToggleSwitch = react_1.default.forwardRef((props, ref) => {
-    const { disabled = false, labelPosition = 'right', icon, label, setFocus = false, className, style, size = 'default', ...rest } = props;
+    let icon;
+    if (props.size !== 'small') {
+        icon = props.icon;
+        props = { ...props };
+        delete props.icon;
+    }
+    const { disabled = false, labelPosition = 'right', label, setFocus = false, className, style, size = 'default', ...rest } = props;
     (0, utils_1.useTheme)();
     const inputElementRef = react_1.default.useRef(null);
     const refs = (0, utils_1.useMergedRefs)(inputElementRef, ref);
@@ -48,6 +54,7 @@ exports.ToggleSwitch = react_1.default.forwardRef((props, ref) => {
         }, className), "data-iui-size": size, style: style },
         react_1.default.createElement("input", { className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: refs, ...rest }),
         icon &&
+            size !== 'small' &&
             react_1.default.cloneElement(icon, {
                 className: (0, classnames_1.default)('iui-toggle-switch-icon', icon.props.className),
                 'aria-hidden': true,

package/cjs/core/index.d.ts

@@ -104,5 +104,5 @@ export { Anchor, Body, Headline, Leading, Small, Subheading, Title, Blockquote,
 export type { AnchorProps, BodyProps, HeadlineProps, LeadingProps, SmallProps, SubheadingProps, TitleProps, BlockquoteProps, CodeProps, KbdProps, TextProps, } from './Typography';
 export { Wizard, Stepper, WorkflowDiagram } from './Stepper';
 export type { WizardProps, StepProperties, WizardType, WizardLocalization, StepperProps, StepperLocalization, WorkflowDiagramProps, } from './Stepper';
-export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, Icon, Flex, } from './utils';
-export type { ThemeType, MiddleTextTruncationProps, IconProps, FlexProps, FlexItemProps, FlexSpacerProps, } from './utils';
+export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, LinkBox, LinkAction, Icon, Flex, } from './utils';
+export type { ThemeType, MiddleTextTruncationProps, IconProps, FlexProps, FlexItemProps, FlexSpacerProps, LinkBoxProps, LinkActionProps, } from './utils';

package/cjs/core/index.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTabs = exports.Tab = exports.Tabs = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileEmptyCard = exports.FileUploadCard = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.NonIdealState = exports.ErrorPage = exports.DropdownMenu = exports.Dialog = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Backdrop = exports.UserIconGroup = exports.AvatarGroup = exports.UserIcon = exports.Avatar = exports.Alert = void 0;
 exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.BaseFilter = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.NotificationMarker = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = void 0;
-exports.Flex = exports.Icon = exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.WorkflowDiagram = exports.Stepper = exports.Wizard = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = void 0;
+exports.Flex = exports.Icon = exports.LinkAction = exports.LinkBox = exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.WorkflowDiagram = exports.Stepper = exports.Wizard = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -183,5 +183,7 @@ Object.defineProperty(exports, "getUserColor", { enumerable: true, get: function
 Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return utils_1.useTheme; } });
 Object.defineProperty(exports, "ColorValue", { enumerable: true, get: function () { return utils_1.ColorValue; } });
 Object.defineProperty(exports, "MiddleTextTruncation", { enumerable: true, get: function () { return utils_1.MiddleTextTruncation; } });
+Object.defineProperty(exports, "LinkBox", { enumerable: true, get: function () { return utils_1.LinkBox; } });
+Object.defineProperty(exports, "LinkAction", { enumerable: true, get: function () { return utils_1.LinkAction; } });
 Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return utils_1.Icon; } });
 Object.defineProperty(exports, "Flex", { enumerable: true, get: function () { return utils_1.Flex; } });