@itwin/itwinui-react 3.4.1 → 3.5.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 3.5.0
+
+### Minor Changes
+
+- [#1844](https://github.com/iTwin/iTwinUI/pull/1844): Interactive elements will now be correctly focused on Safari 17+.
+- [#1860](https://github.com/iTwin/iTwinUI/pull/1860): `ThemeProvider` will now automatically specify an `accent-color` to match the current theme.
+- [#1856](https://github.com/iTwin/iTwinUI/pull/1856): Added new `isExternal` prop to `Anchor`. When true, displays an icon at the end of link text.
+- [#1858](https://github.com/iTwin/iTwinUI/pull/1858): `ToggleSwitch` will now show a checkmark icon by default in the checked state. `SvgCheckmark` no longer needs to be manually passed into the `icon` prop.
+- [#1862](https://github.com/iTwin/iTwinUI/pull/1862): `Select` will now correctly reset its `value` if `null` is passed.
+- [#1864](https://github.com/iTwin/iTwinUI/pull/1864): Added a new `underline` prop to `Anchor`. When true, anchors will be underlined by default instead of only on hover.
+- [#1856](https://github.com/iTwin/iTwinUI/pull/1856): `Anchor` links that open in a new tab will now add a visually-hidden warning for screen-reader users. This can be combined with the `isExternal` prop, which adds a visual indication for sighted users.
+- [#1859](https://github.com/iTwin/iTwinUI/pull/1859): `ProgressRadial` and `ProgressLinear` will now include a visually hidden "Loading" text alternative for non-sighted users.
+
+### Patch Changes
+
+- [#1845](https://github.com/iTwin/iTwinUI/pull/1845): Removed `:focus-visible` fallback styles for older browsers.
+- [#1861](https://github.com/iTwin/iTwinUI/pull/1861): Added `width`/`height` attributes to inlined svgs, to make them more resilient in case CSS fails.
+
+## 3.4.2
+
+### Patch Changes
+
+- [#1848](https://github.com/iTwin/iTwinUI/pull/1848): Removed `jsdom` from direct dependencies.
+
 ## 3.4.1
 
 ### Patch Changes

package/cjs/core/ProgressIndicators/ProgressLinear.js

@@ -34,6 +34,7 @@ exports.ProgressLinear = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
+const VisuallyHidden_js_1 = require("../VisuallyHidden/VisuallyHidden.js");
 /**
  * Shows progress on a linear bar
  * @example
@@ -62,5 +63,9 @@ exports.ProgressLinear = React.forwardRef((props, forwardedRef) => {
     const boundedValue = (0, index_js_1.getBoundedValue)(value ?? 100, 0, 100);
     return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-progress-indicator-linear', className), ref: forwardedRef, "data-iui-status": status, "data-iui-indeterminate": indeterminate ? 'true' : undefined, "data-iui-animated": isAnimated ? 'true' : undefined, style: {
             '--iui-progress-percentage': `${boundedValue}%`,
-        }, ...rest }, labels.length > 0 && (React.createElement(index_js_1.Box, { as: 'div', ...labelGroupProps, className: (0, classnames_1.default)('iui-progress-indicator-linear-label', labelGroupProps?.className) }, labels.map((label, index) => (React.createElement("span", { key: index }, label)))))));
+        }, ...rest },
+        React.createElement(index_js_1.ShadowRoot, null,
+            value !== 100 && React.createElement(VisuallyHidden_js_1.VisuallyHidden, null, "Loading."),
+            React.createElement("slot", null)),
+        labels.length > 0 && (React.createElement(index_js_1.Box, { as: 'div', ...labelGroupProps, className: (0, classnames_1.default)('iui-progress-indicator-linear-label', labelGroupProps?.className) }, labels.map((label, index) => (React.createElement("span", { key: index }, label)))))));
 });

package/cjs/core/ProgressIndicators/ProgressRadial.js

@@ -34,6 +34,7 @@ exports.ProgressRadial = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
+const VisuallyHidden_js_1 = require("../VisuallyHidden/VisuallyHidden.js");
 /**
  * Circular Progress Indicator
  * @example
@@ -62,7 +63,11 @@ exports.ProgressRadial = React.forwardRef((props, forwardedRef) => {
                 '--iui-progress-percentage': `${(0, index_js_1.getBoundedValue)(value, 0, 100)}%`,
             }),
             ...style,
-        }, ...rest }, size !== 'x-small'
-        ? children ?? (!!status ? statusMap[status] : null)
-        : null));
+        }, ...rest },
+        React.createElement(index_js_1.ShadowRoot, null,
+            value !== 100 && React.createElement(VisuallyHidden_js_1.VisuallyHidden, null, "Loading."),
+            React.createElement("slot", null)),
+        size !== 'x-small'
+            ? children ?? (!!status ? statusMap[status] : null)
+            : null));
 });

package/cjs/core/Select/Select.d.ts

@@ -64,8 +64,10 @@ export type SelectMultipleTypeProps<T> = {
     /**
      * Selected option value.
      * If `multiple` is enabled, it is an array of values.
+     *
+     * Pass `null` to reset the value.
      */
-    value?: T;
+    value?: T | null;
     /**
      * Callback function handling change event on select.
      */

package/cjs/core/Select/Select.js

@@ -102,7 +102,7 @@ exports.Select = React.forwardRef((props, forwardedRef) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
     const [uncontrolledValue, setUncontrolledValue] = React.useState();
-    const value = valueProp ?? uncontrolledValue;
+    const value = valueProp !== undefined ? valueProp : uncontrolledValue;
     const onChangeRef = (0, index_js_1.useLatestRef)(onChangeProp);
     const selectRef = React.useRef(null);
     const show = React.useCallback(() => {

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

@@ -17,9 +17,11 @@ type ToggleSwitchProps = {
      */
     size?: 'default';
     /**
-     * Icon inside the toggle switch. Shown only when toggle is checked and size is not small.
+     * Custom icon inside the toggle switch. Shown only when toggle is checked and size is not small.
+     *
+     * Will override the default checkmark icon.
      */
-    icon?: JSX.Element;
+    icon?: JSX.Element | null;
 } | {
     size: 'small';
     icon?: never;

package/cjs/core/ToggleSwitch/ToggleSwitch.js

@@ -53,21 +53,15 @@ const index_js_1 = require("../utils/index.js");
  * <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.forwardRef((props, ref) => {
-    let icon;
-    if (props.size !== 'small') {
-        icon = props.icon;
-        props = { ...props };
-        delete props.icon;
-    }
-    const { disabled = false, labelPosition = 'right', label, className, style, size = 'default', ...rest } = props;
-    const inputElementRef = React.useRef(null);
-    const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
+    const { disabled = false, labelPosition = 'right', label, className, style, size = 'default', icon: iconProp, ...rest } = props;
+    // Disallow custom icon for small size, but keep the default checkmark when prop is not passed.
+    const shouldShowIcon = iconProp === undefined || (iconProp !== null && size !== 'small');
     return (React.createElement(index_js_1.Box, { as: label ? 'label' : 'div', className: (0, classnames_1.default)('iui-toggle-switch-wrapper', {
             'iui-disabled': disabled,
             'iui-label-on-right': label && labelPosition === 'right',
             'iui-label-on-left': label && labelPosition === 'left',
         }, className), "data-iui-size": size, style: style },
-        React.createElement(index_js_1.Box, { as: 'input', className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: refs, ...rest }),
-        icon && size !== 'small' && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-toggle-switch-icon', "aria-hidden": true }, icon)),
+        React.createElement(index_js_1.Box, { as: 'input', className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: ref, ...rest }),
+        shouldShowIcon && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-toggle-switch-icon', "aria-hidden": true }, iconProp || React.createElement(index_js_1.SvgCheckmark, null))),
         label && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-toggle-switch-label' }, label))));
 });

package/cjs/core/Typography/Anchor.d.ts

@@ -1,3 +1,21 @@
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+type AnchorProps = {
+    /**
+     * Whether the anchor links to an external site.
+     *
+     * When true, there will be an icon added at the end of the anchor text. This is useful
+     * to indicate that the link will open in a new tab.
+     *
+     * Not all external links should open in a new tab, so this prop should be used with caution.
+     */
+    isExternal?: boolean;
+    /**
+     * Whether the anchor should be underlined in its idle state.
+     *
+     * By default, the anchor is underlined only on hover, or when using a high-contrast theme.
+     */
+    underline?: boolean;
+};
 /**
  * A consistently styled anchor component.
  *
@@ -7,9 +25,11 @@
  * @example
  * <Anchor href='/'>Home</Anchor>
  * <Anchor href='/projects'>Projects</Anchor>
+ * <Anchor href='/help' underline>Help</Anchor>
  *
  * @example
  * <Anchor as={Link} to='/'>Home</Anchor>
  * <Anchor as='button' onClick={() => {}}>click me</Anchor>
  */
-export declare const Anchor: import("../utils/props.js").PolymorphicForwardRefComponent<"a", {}>;
+export declare const Anchor: PolymorphicForwardRefComponent<"a", AnchorProps>;
+export {};

package/cjs/core/Typography/Anchor.js

@@ -1,11 +1,40 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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.
  *--------------------------------------------------------------------------------------------*/
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Anchor = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
+const VisuallyHidden_js_1 = require("../VisuallyHidden/VisuallyHidden.js");
 /**
  * A consistently styled anchor component.
  *
@@ -15,9 +44,15 @@ const index_js_1 = require("../utils/index.js");
  * @example
  * <Anchor href='/'>Home</Anchor>
  * <Anchor href='/projects'>Projects</Anchor>
+ * <Anchor href='/help' underline>Help</Anchor>
  *
  * @example
  * <Anchor as={Link} to='/'>Home</Anchor>
  * <Anchor as='button' onClick={() => {}}>click me</Anchor>
  */
-exports.Anchor = index_js_1.polymorphic.a('iui-anchor');
+exports.Anchor = React.forwardRef((props, forwardedRef) => {
+    const { isExternal, underline, children, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { as: 'a', "data-iui-underline": underline ? 'true' : undefined, ...rest, ref: forwardedRef, className: (0, classnames_1.default)('iui-anchor', { 'iui-anchor-external': isExternal }, props.className) },
+        children,
+        props.target === '_blank' && (React.createElement(VisuallyHidden_js_1.VisuallyHidden, null, " (opens in new tab)"))));
+});

package/cjs/core/VisuallyHidden/VisuallyHidden.js

@@ -33,7 +33,7 @@ exports.VisuallyHidden = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const Box_js_1 = require("../utils/components/Box.js");
+const index_js_1 = require("../utils/index.js");
 /**
  * Hides content visually but keeps it still accessible to screen readers
  * and other assistive technologies.
@@ -45,6 +45,22 @@ const Box_js_1 = require("../utils/components/Box.js");
  * @see https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
  */
 exports.VisuallyHidden = React.forwardRef((props, ref) => {
-    const { className, unhideOnFocus = true, ...rest } = props;
-    return (React.createElement(Box_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-visually-hidden', className), "data-iui-unhide-on-focus": unhideOnFocus ? true : undefined, ref: ref, ...rest }));
+    const { as: asProp = 'span', className, unhideOnFocus = true, children: childrenProp, ...rest } = props;
+    // ShadowRoot is not supported on all elements, so we only use it for few common ones.
+    const children = !['div', 'span', 'p'].includes(asProp) ? (childrenProp) : (React.createElement(React.Fragment, null,
+        React.createElement(index_js_1.ShadowRoot, { css: css },
+            React.createElement("slot", null)),
+        childrenProp));
+    return (React.createElement(index_js_1.Box, { as: asProp, className: (0, classnames_1.default)('iui-visually-hidden', className), "data-iui-unhide-on-focus": unhideOnFocus ? true : undefined, ref: ref, ...rest }, children));
 });
+// ----------------------------------------------------------------------------
+const css = /* css */ `
+  :host(:where(:not([data-iui-unhide-on-focus]:is(:focus-within, :active)))) {
+    clip-path: inset(50%) !important;
+    overflow: hidden !important;
+    position: absolute !important;
+    white-space: nowrap !important;
+    block-size: 1px !important;
+    inline-size: 1px !important;
+  }
+`;

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

@@ -5,6 +5,7 @@ import * as React from 'react';
  *
  * @private
  */
-export declare const ShadowRoot: ({ children }: {
+export declare const ShadowRoot: ({ children, css, }: {
     children: React.ReactNode;
+    css?: string | undefined;
 }) => React.JSX.Element | null;

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

@@ -32,24 +32,39 @@ const React = __importStar(require("react"));
 const ReactDOM = __importStar(require("react-dom"));
 const isBrowser = typeof document !== 'undefined';
 const supportsDSD = isBrowser && 'shadowRootMode' in HTMLTemplateElement.prototype;
+const supportsAdoptedStylesheets = isBrowser && 'adoptedStyleSheets' in Document.prototype;
 /**
  * Wrapper around `<template>` element that attaches shadow root to its parent
  * and moves its children into the shadow root.
  *
  * @private
  */
-const ShadowRoot = ({ children }) => {
+const ShadowRoot = ({ children, css, }) => {
     const [shadowRoot, setShadowRoot] = React.useState();
     const isFirstRender = useIsFirstRender();
+    const styleSheet = React.useRef();
     const attachShadowRef = React.useCallback((template) => {
         const parent = template?.parentElement;
         if (!template || !parent) {
             return;
         }
-        queueMicrotask(() => ReactDOM.flushSync(() => setShadowRoot(parent.shadowRoot || parent.attachShadow({ mode: 'open' }))));
-    }, []);
+        if (parent.shadowRoot) {
+            parent.shadowRoot.replaceChildren(); // Remove previous shadowroot content
+        }
+        queueMicrotask(() => {
+            const shadow = parent.shadowRoot || parent.attachShadow({ mode: 'open' });
+            if (css && supportsAdoptedStylesheets) {
+                styleSheet.current || (styleSheet.current = new CSSStyleSheet());
+                styleSheet.current.replaceSync(css);
+                shadow.adoptedStyleSheets = [styleSheet.current];
+            }
+            ReactDOM.flushSync(() => setShadowRoot(shadow));
+        });
+    }, [css]);
     if (!isBrowser) {
-        return React.createElement("template", { shadowrootmode: 'open' }, children);
+        return (React.createElement("template", { shadowrootmode: 'open' },
+            css && React.createElement("style", null, css),
+            children));
     }
     // In browsers that support DSD, the template will be automatically removed as soon as it's parsed.
     // To pass hydration, the first client render needs to emulate this browser behavior and return null.

package/cjs/core/utils/functions/polymorphic.d.ts

@@ -3,11 +3,13 @@ import type { PolymorphicForwardRefComponent } from '../props.js';
 /**
  * Utility to create a type-safe polymorphic component with a simple class.
  *
- * Can be called directly or as a property of the `Polymorphic` object.
+ * Can be called directly or as a property of the `polymorphic` object.
  * In both cases, returns a component that:
+ * - uses CSS-modules scoped classes
  * - supports `as` prop with default element
- * - forwards ref and rest props
- * - adds and merges css classes
+ * - forwards ref and spreads rest props
+ * - adds and merges CSS classes
+ * - adds tabIndex to interactive elements (Safari workaround)
  *
  * @example
  * const MyPolyDiv = polymorphic('my-poly-div');

package/cjs/core/utils/functions/polymorphic.js

@@ -31,6 +31,7 @@ exports.polymorphic = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const useGlobals_js_1 = require("../hooks/useGlobals.js");
@@ -38,9 +39,21 @@ const styles_js_1 = __importDefault(require("../../../styles.js"));
 const _base = (defaultElement) => {
     return (className, attrs) => {
         const Comp = React.forwardRef(({ as = defaultElement, ...props }, ref) => {
-            const Element = as || 'div'; // eslint-disable-line
+            props = {
+                ...attrs,
+                ...props,
+                className: getScopedClassName((0, classnames_1.default)(className, attrs?.className, props.className)),
+            };
+            const Element = as || 'div';
+            // Add tabIndex to interactive elements if not already set.
+            // Workaround for Safari refusing to focus links/buttons/non-text inputs.
+            if (Element === 'button' ||
+                Element === 'a' ||
+                (Element === 'input' && props.type === 'checkbox')) {
+                props.tabIndex ?? (props.tabIndex = 0);
+            }
             (0, useGlobals_js_1.useGlobals)();
-            return (React.createElement(Element, { ref: ref, ...attrs, ...props, className: getScopedClassName((0, classnames_1.default)(className, attrs?.className, props.className)) }));
+            return React.createElement(Element, { ref: ref, ...props });
         });
         Comp.displayName = getDisplayNameFromClass(className);
         return Comp;
@@ -49,11 +62,13 @@ const _base = (defaultElement) => {
 /**
  * Utility to create a type-safe polymorphic component with a simple class.
  *
- * Can be called directly or as a property of the `Polymorphic` object.
+ * Can be called directly or as a property of the `polymorphic` object.
  * In both cases, returns a component that:
+ * - uses CSS-modules scoped classes
  * - supports `as` prop with default element
- * - forwards ref and rest props
- * - adds and merges css classes
+ * - forwards ref and spreads rest props
+ * - adds and merges CSS classes
+ * - adds tabIndex to interactive elements (Safari workaround)
  *
  * @example
  * const MyPolyDiv = polymorphic('my-poly-div');

package/cjs/core/utils/icons/Svg.js

@@ -6,4 +6,8 @@ exports.Svg = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const polymorphic_js_1 = require("../functions/polymorphic.js");
-exports.Svg = polymorphic_js_1.polymorphic.svg('', { viewBox: '0 0 16 16' });
+exports.Svg = polymorphic_js_1.polymorphic.svg('', {
+    viewBox: '0 0 16 16',
+    width: 16,
+    height: 16,
+});

package/esm/core/ProgressIndicators/ProgressLinear.js

@@ -4,7 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box, getBoundedValue } from '../utils/index.js';
+import { Box, ShadowRoot, getBoundedValue } from '../utils/index.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 /**
  * Shows progress on a linear bar
  * @example
@@ -33,5 +34,9 @@ export const ProgressLinear = React.forwardRef((props, forwardedRef) => {
     const boundedValue = getBoundedValue(value ?? 100, 0, 100);
     return (React.createElement(Box, { className: cx('iui-progress-indicator-linear', className), ref: forwardedRef, "data-iui-status": status, "data-iui-indeterminate": indeterminate ? 'true' : undefined, "data-iui-animated": isAnimated ? 'true' : undefined, style: {
             '--iui-progress-percentage': `${boundedValue}%`,
-        }, ...rest }, labels.length > 0 && (React.createElement(Box, { as: 'div', ...labelGroupProps, className: cx('iui-progress-indicator-linear-label', labelGroupProps?.className) }, labels.map((label, index) => (React.createElement("span", { key: index }, label)))))));
+        }, ...rest },
+        React.createElement(ShadowRoot, null,
+            value !== 100 && React.createElement(VisuallyHidden, null, "Loading."),
+            React.createElement("slot", null)),
+        labels.length > 0 && (React.createElement(Box, { as: 'div', ...labelGroupProps, className: cx('iui-progress-indicator-linear-label', labelGroupProps?.className) }, labels.map((label, index) => (React.createElement("span", { key: index }, label)))))));
 });

package/esm/core/ProgressIndicators/ProgressRadial.js

@@ -4,7 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { SvgCheckmarkSmall, SvgImportantSmall, Box, getBoundedValue, } from '../utils/index.js';
+import { SvgCheckmarkSmall, SvgImportantSmall, Box, getBoundedValue, ShadowRoot, } from '../utils/index.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 /**
  * Circular Progress Indicator
  * @example
@@ -33,7 +34,11 @@ export const ProgressRadial = React.forwardRef((props, forwardedRef) => {
                 '--iui-progress-percentage': `${getBoundedValue(value, 0, 100)}%`,
             }),
             ...style,
-        }, ...rest }, size !== 'x-small'
-        ? children ?? (!!status ? statusMap[status] : null)
-        : null));
+        }, ...rest },
+        React.createElement(ShadowRoot, null,
+            value !== 100 && React.createElement(VisuallyHidden, null, "Loading."),
+            React.createElement("slot", null)),
+        size !== 'x-small'
+            ? children ?? (!!status ? statusMap[status] : null)
+            : null));
 });

package/esm/core/Select/Select.d.ts

@@ -64,8 +64,10 @@ export type SelectMultipleTypeProps<T> = {
     /**
      * Selected option value.
      * If `multiple` is enabled, it is an array of values.
+     *
+     * Pass `null` to reset the value.
      */
-    value?: T;
+    value?: T | null;
     /**
      * Callback function handling change event on select.
      */

package/esm/core/Select/Select.js

@@ -73,7 +73,7 @@ export const Select = React.forwardRef((props, forwardedRef) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
     const [uncontrolledValue, setUncontrolledValue] = React.useState();
-    const value = valueProp ?? uncontrolledValue;
+    const value = valueProp !== undefined ? valueProp : uncontrolledValue;
     const onChangeRef = useLatestRef(onChangeProp);
     const selectRef = React.useRef(null);
     const show = React.useCallback(() => {

package/esm/core/ToggleSwitch/ToggleSwitch.d.ts

@@ -17,9 +17,11 @@ type ToggleSwitchProps = {
      */
     size?: 'default';
     /**
-     * Icon inside the toggle switch. Shown only when toggle is checked and size is not small.
+     * Custom icon inside the toggle switch. Shown only when toggle is checked and size is not small.
+     *
+     * Will override the default checkmark icon.
      */
-    icon?: JSX.Element;
+    icon?: JSX.Element | null;
 } | {
     size: 'small';
     icon?: never;

package/esm/core/ToggleSwitch/ToggleSwitch.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useMergedRefs, Box } from '../utils/index.js';
+import { Box, SvgCheckmark } from '../utils/index.js';
 /**
  * A switch for turning on and off.
  * @example
@@ -24,21 +24,15 @@ import { useMergedRefs, Box } from '../utils/index.js';
  * <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 const ToggleSwitch = React.forwardRef((props, ref) => {
-    let icon;
-    if (props.size !== 'small') {
-        icon = props.icon;
-        props = { ...props };
-        delete props.icon;
-    }
-    const { disabled = false, labelPosition = 'right', label, className, style, size = 'default', ...rest } = props;
-    const inputElementRef = React.useRef(null);
-    const refs = useMergedRefs(inputElementRef, ref);
+    const { disabled = false, labelPosition = 'right', label, className, style, size = 'default', icon: iconProp, ...rest } = props;
+    // Disallow custom icon for small size, but keep the default checkmark when prop is not passed.
+    const shouldShowIcon = iconProp === undefined || (iconProp !== null && size !== 'small');
     return (React.createElement(Box, { as: label ? 'label' : 'div', className: cx('iui-toggle-switch-wrapper', {
             'iui-disabled': disabled,
             'iui-label-on-right': label && labelPosition === 'right',
             'iui-label-on-left': label && labelPosition === 'left',
         }, className), "data-iui-size": size, style: style },
-        React.createElement(Box, { as: 'input', className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: refs, ...rest }),
-        icon && size !== 'small' && (React.createElement(Box, { as: 'span', className: 'iui-toggle-switch-icon', "aria-hidden": true }, icon)),
+        React.createElement(Box, { as: 'input', className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: ref, ...rest }),
+        shouldShowIcon && (React.createElement(Box, { as: 'span', className: 'iui-toggle-switch-icon', "aria-hidden": true }, iconProp || React.createElement(SvgCheckmark, null))),
         label && (React.createElement(Box, { as: 'span', className: 'iui-toggle-switch-label' }, label))));
 });

package/esm/core/Typography/Anchor.d.ts

@@ -1,3 +1,21 @@
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+type AnchorProps = {
+    /**
+     * Whether the anchor links to an external site.
+     *
+     * When true, there will be an icon added at the end of the anchor text. This is useful
+     * to indicate that the link will open in a new tab.
+     *
+     * Not all external links should open in a new tab, so this prop should be used with caution.
+     */
+    isExternal?: boolean;
+    /**
+     * Whether the anchor should be underlined in its idle state.
+     *
+     * By default, the anchor is underlined only on hover, or when using a high-contrast theme.
+     */
+    underline?: boolean;
+};
 /**
  * A consistently styled anchor component.
  *
@@ -7,9 +25,11 @@
  * @example
  * <Anchor href='/'>Home</Anchor>
  * <Anchor href='/projects'>Projects</Anchor>
+ * <Anchor href='/help' underline>Help</Anchor>
  *
  * @example
  * <Anchor as={Link} to='/'>Home</Anchor>
  * <Anchor as='button' onClick={() => {}}>click me</Anchor>
  */
-export declare const Anchor: import("../utils/props.js").PolymorphicForwardRefComponent<"a", {}>;
+export declare const Anchor: PolymorphicForwardRefComponent<"a", AnchorProps>;
+export {};

package/esm/core/Typography/Anchor.js

@@ -2,7 +2,10 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { polymorphic } from '../utils/index.js';
+import * as React from 'react';
+import cx from 'classnames';
+import { Box } from '../utils/index.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 /**
  * A consistently styled anchor component.
  *
@@ -12,9 +15,15 @@ import { polymorphic } from '../utils/index.js';
  * @example
  * <Anchor href='/'>Home</Anchor>
  * <Anchor href='/projects'>Projects</Anchor>
+ * <Anchor href='/help' underline>Help</Anchor>
  *
  * @example
  * <Anchor as={Link} to='/'>Home</Anchor>
  * <Anchor as='button' onClick={() => {}}>click me</Anchor>
  */
-export const Anchor = polymorphic.a('iui-anchor');
+export const Anchor = React.forwardRef((props, forwardedRef) => {
+    const { isExternal, underline, children, ...rest } = props;
+    return (React.createElement(Box, { as: 'a', "data-iui-underline": underline ? 'true' : undefined, ...rest, ref: forwardedRef, className: cx('iui-anchor', { 'iui-anchor-external': isExternal }, props.className) },
+        children,
+        props.target === '_blank' && (React.createElement(VisuallyHidden, null, " (opens in new tab)"))));
+});

package/esm/core/VisuallyHidden/VisuallyHidden.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box } from '../utils/components/Box.js';
+import { Box, ShadowRoot } from '../utils/index.js';
 /**
  * Hides content visually but keeps it still accessible to screen readers
  * and other assistive technologies.
@@ -16,6 +16,22 @@ import { Box } from '../utils/components/Box.js';
  * @see https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
  */
 export const VisuallyHidden = React.forwardRef((props, ref) => {
-    const { className, unhideOnFocus = true, ...rest } = props;
-    return (React.createElement(Box, { as: 'span', className: cx('iui-visually-hidden', className), "data-iui-unhide-on-focus": unhideOnFocus ? true : undefined, ref: ref, ...rest }));
+    const { as: asProp = 'span', className, unhideOnFocus = true, children: childrenProp, ...rest } = props;
+    // ShadowRoot is not supported on all elements, so we only use it for few common ones.
+    const children = !['div', 'span', 'p'].includes(asProp) ? (childrenProp) : (React.createElement(React.Fragment, null,
+        React.createElement(ShadowRoot, { css: css },
+            React.createElement("slot", null)),
+        childrenProp));
+    return (React.createElement(Box, { as: asProp, className: cx('iui-visually-hidden', className), "data-iui-unhide-on-focus": unhideOnFocus ? true : undefined, ref: ref, ...rest }, children));
 });
+// ----------------------------------------------------------------------------
+const css = /* css */ `
+  :host(:where(:not([data-iui-unhide-on-focus]:is(:focus-within, :active)))) {
+    clip-path: inset(50%) !important;
+    overflow: hidden !important;
+    position: absolute !important;
+    white-space: nowrap !important;
+    block-size: 1px !important;
+    inline-size: 1px !important;
+  }
+`;