@itwin/itwinui-react 2.6.0 → 2.7.0

package/cjs/core/utils/components/LinkAction.d.ts

@@ -0,0 +1,30 @@
+import { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props';
+import '@itwin/itwinui-css/css/utils.css';
+declare type LinkActionOwnProps = {};
+declare type LinkBoxOwnProps = {};
+export declare type LinkActionProps = PolymorphicComponentProps<'a', LinkActionOwnProps>;
+export declare type LinkBoxProps = PolymorphicComponentProps<'div', LinkBoxOwnProps>;
+/**
+ * Polymorphic link action component.
+ * It is rendered as `a` by default.
+ * @example
+ * <LinkBox>
+ *   <Surface>
+ *     <LinkAction href='/new-page'>Whole card is clickable</LinkAction>
+ *   </Surface>
+ * </LinkBox>
+ */
+export declare const LinkAction: PolymorphicForwardRefComponent<"a", LinkActionOwnProps>;
+/**
+ * Polymorphic link box component.
+ * Used to wrap around your component to use LinkAction.
+ * Rendered as `div` by default
+ * @example
+ * <LinkBox>
+ *   <Surface>
+ *     <LinkAction href='/new-page'>Whole card is clickable</LinkAction>
+ *   </Surface>
+ * </LinkBox>
+ */
+export declare const LinkBox: PolymorphicForwardRefComponent<"div", LinkBoxOwnProps>;
+export {};

package/cjs/core/utils/components/LinkAction.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkBox = exports.LinkAction = 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_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+require("@itwin/itwinui-css/css/utils.css");
+/**
+ * Polymorphic link action component.
+ * It is rendered as `a` by default.
+ * @example
+ * <LinkBox>
+ *   <Surface>
+ *     <LinkAction href='/new-page'>Whole card is clickable</LinkAction>
+ *   </Surface>
+ * </LinkBox>
+ */
+exports.LinkAction = react_1.default.forwardRef((props, ref) => {
+    const { as: Element = 'a', className, ...rest } = props;
+    return (react_1.default.createElement(Element, { ref: ref, className: (0, classnames_1.default)('iui-link-action', className), ...rest }));
+});
+exports.LinkAction.displayName = 'LinkAction';
+/**
+ * Polymorphic link box component.
+ * Used to wrap around your component to use LinkAction.
+ * Rendered as `div` by default
+ * @example
+ * <LinkBox>
+ *   <Surface>
+ *     <LinkAction href='/new-page'>Whole card is clickable</LinkAction>
+ *   </Surface>
+ * </LinkBox>
+ */
+exports.LinkBox = react_1.default.forwardRef((props, ref) => {
+    const { as: Element = 'div', className, ...rest } = props;
+    return (react_1.default.createElement(Element, { ref: ref, className: (0, classnames_1.default)('iui-link-box', className), ...rest }));
+});
+exports.LinkBox.displayName = 'LinkBox';

package/cjs/core/utils/components/index.d.ts

@@ -8,3 +8,4 @@ export * from './VirtualScroll';
 export * from './VisuallyHidden';
 export * from './Icon';
 export * from './Flex';
+export * from './LinkAction';

package/cjs/core/utils/components/index.js

@@ -28,3 +28,4 @@ __exportStar(require("./VirtualScroll"), exports);
 __exportStar(require("./VisuallyHidden"), exports);
 __exportStar(require("./Icon"), exports);
 __exportStar(require("./Flex"), exports);
+__exportStar(require("./LinkAction"), exports);

package/cjs/core/utils/hooks/index.d.ts

@@ -10,4 +10,5 @@ export * from './useSafeContext';
 export * from './useLatestRef';
 export * from './useIsomorphicLayoutEffect';
 export * from './useIsThemeAlreadySet';
+export * from './useIsClient';
 export * from './useId';

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

@@ -30,4 +30,5 @@ __exportStar(require("./useSafeContext"), exports);
 __exportStar(require("./useLatestRef"), exports);
 __exportStar(require("./useIsomorphicLayoutEffect"), exports);
 __exportStar(require("./useIsThemeAlreadySet"), exports);
+__exportStar(require("./useIsClient"), exports);
 __exportStar(require("./useId"), exports);

package/cjs/core/utils/hooks/useIsClient.d.ts

@@ -0,0 +1 @@
+export declare const useIsClient: () => boolean;

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

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsClient = 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_1 = __importDefault(require("react"));
+const useIsClient = () => {
+    const [isClient, setIsClient] = react_1.default.useState(false);
+    react_1.default.useEffect(() => {
+        setIsClient(true);
+    }, []);
+    return isClient;
+};
+exports.useIsClient = useIsClient;

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

@@ -27,6 +27,11 @@ const useTheme = (theme, themeOptions) => {
         if (!ownerDocument || isThemeAlreadySet.current) {
             return;
         }
+        // do nothing if using v1 for the main page (incremental migration)
+        if (ownerDocument.documentElement.className.includes('iui-theme-') ||
+            ownerDocument.body.classList.contains('iui-body')) {
+            return;
+        }
         ownerDocument.body.classList.toggle('iui-root', true);
         switch (theme) {
             case 'light':

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

package/esm/core/Tile/Tile.js

@@ -4,11 +4,31 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { StatusIconMap, useTheme, SvgMore, SvgNew, SvgCheckmark, } from '../utils';
+import { StatusIconMap, useTheme, SvgMore, SvgNew, SvgCheckmark, LinkAction, useSafeContext, getWindow, } from '../utils';
 import '@itwin/itwinui-css/css/tile.css';
 import { DropdownMenu } from '../DropdownMenu';
 import { IconButton } from '../Buttons';
 import { ProgressRadial } from '../ProgressIndicators';
+const TileContext = React.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/>}
+ * />
+ */
+export const TileAction = (props) => {
+    var _a, _b, _c;
+    const tileContext = useSafeContext(TileContext);
+    const supportsHas = (_c = (_b = (_a = 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.useEffect(() => {
+        if (!supportsHas) {
+            tileContext.setActionable(true);
+        }
+    }, [supportsHas, tileContext]);
+    return React.createElement(LinkAction, { ...props });
+};
 /**
  * Tile component that displays content and actions in a card-like format.
  * @example
@@ -26,58 +46,73 @@ import { ProgressRadial } from '../ProgressIndicators';
  *  isNew={false}
  * />
  */
-export 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;
+export const 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;
     useTheme();
     const [isMenuVisible, setIsMenuVisible] = React.useState(false);
     const showMenu = React.useCallback(() => setIsMenuVisible(true), []);
     const hideMenu = React.useCallback(() => setIsMenuVisible(false), []);
-    return (React.createElement("div", { className: cx('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.createElement("div", { className: 'iui-tile-thumbnail' },
-            typeof thumbnail === 'string' ? (React.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: `url(${thumbnail})` } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
-                className: 'iui-tile-thumbnail-picture',
-            })) : React.isValidElement(thumbnail) ? (React.cloneElement(thumbnail, {
-                className: cx('iui-thumbnail-icon', thumbnail.props.className),
-            })) : (thumbnail),
-            leftIcon &&
-                React.cloneElement(leftIcon, {
-                    className: 'iui-tile-thumbnail-type-indicator',
-                    'data-iui-size': 'small',
-                }),
-            rightIcon &&
-                React.cloneElement(rightIcon, {
-                    className: 'iui-tile-thumbnail-quick-action',
-                    'data-iui-size': 'small',
-                }),
-            badge && (React.createElement("div", { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
-        React.createElement("div", { className: 'iui-tile-content' },
-            React.createElement("div", { className: 'iui-tile-name' },
-                React.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
-                React.createElement("span", { className: 'iui-tile-name-label' }, name)),
-            description != undefined && (React.createElement("div", { className: 'iui-tile-description' }, description)),
-            metadata != undefined && (React.createElement("div", { className: 'iui-tile-metadata' }, metadata)),
-            moreOptions && (React.createElement(DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: (close) => moreOptions.map((option) => React.cloneElement(option, {
-                    onClick: (value) => {
-                        var _a, _b;
-                        close();
-                        (_b = (_a = option.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, value);
-                    },
-                })) },
-                React.createElement("div", { className: cx('iui-tile-more-options', {
-                        'iui-visible': isMenuVisible,
-                    }) },
-                    React.createElement(IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
-                        React.createElement(SvgMore, null))))),
-            children),
-        buttons && React.createElement("div", { className: 'iui-tile-buttons' }, buttons)));
-};
+    const [localActionable, setLocalActionable] = React.useState(isActionableProp);
+    const isActionable = isActionableProp !== null && isActionableProp !== void 0 ? isActionableProp : localActionable;
+    const tileName = (React.createElement("div", { className: 'iui-tile-name' },
+        React.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
+        React.createElement("span", { className: 'iui-tile-name-label' }, isActionable && onClick ? (React.createElement(LinkAction, { as: 'button', onClick: !isDisabled ? onClick : undefined, "aria-disabled": isDisabled }, name)) : (name))));
+    return (React.createElement(TileContext.Provider, { value: { setActionable: setLocalActionable } },
+        React.createElement("div", { className: cx('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.createElement("div", { className: 'iui-tile-thumbnail' },
+                typeof thumbnail === 'string' ? (React.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: `url(${thumbnail})` } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
+                    className: 'iui-tile-thumbnail-picture',
+                })) : React.isValidElement(thumbnail) ? (React.cloneElement(thumbnail, {
+                    className: cx('iui-thumbnail-icon', thumbnail.props.className),
+                })) : (thumbnail),
+                leftIcon &&
+                    React.cloneElement(leftIcon, {
+                        className: 'iui-tile-thumbnail-type-indicator',
+                        'data-iui-size': 'small',
+                    }),
+                rightIcon &&
+                    React.cloneElement(rightIcon, {
+                        className: 'iui-tile-thumbnail-quick-action',
+                        'data-iui-size': 'small',
+                    }),
+                badge && (React.createElement("div", { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
+            React.createElement("div", { className: 'iui-tile-content' },
+                variant === 'folder' ? tileName : null,
+                description != undefined && (React.createElement("div", { className: 'iui-tile-description' }, description)),
+                metadata != undefined && (React.createElement("div", { className: 'iui-tile-metadata' }, metadata)),
+                moreOptions && (React.createElement(DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: (close) => moreOptions.map((option) => React.cloneElement(option, {
+                        onClick: (value) => {
+                            var _a, _b;
+                            close();
+                            (_b = (_a = option.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+                        },
+                    })) },
+                    React.createElement("div", { className: cx('iui-tile-more-options', {
+                            'iui-visible': isMenuVisible,
+                        }) },
+                        React.createElement(IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
+                            React.createElement(SvgMore, null))))),
+                children),
+            buttons && React.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: TileAction,
+});
 const TitleIcon = ({ isLoading = false, isSelected = false, isNew = false, status, }) => {
     const StatusIcon = !!status && StatusIconMap[status];
     if (isLoading) {