@itwin/itwinui-react 3.4.2 → 3.6.0

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;
+  }
+`;

package/esm/core/utils/components/InputFlexContainer.d.ts

@@ -1,4 +1,6 @@
 import type { PolymorphicForwardRefComponent } from '../props.js';
+import type { IconProps } from '../../Icon/Icon.js';
+import type { IconButtonProps } from '../../Buttons/IconButton.js';
 export type InputFlexContainerProps = {
     isDisabled?: boolean;
     status?: 'positive' | 'warning' | 'negative';
@@ -9,3 +11,26 @@ export type InputFlexContainerProps = {
  * @private
  */
 export declare const InputFlexContainer: PolymorphicForwardRefComponent<"div", InputFlexContainerProps>;
+/**
+ * Button inside InputFlexContainer that collapses the padding between the button and the input/textarea.
+ * @private
+ */
+export declare const InputFlexContainerButton: PolymorphicForwardRefComponent<"button", Omit<IconButtonProps, "styleType"> & {
+    /**
+     * Style of the button.
+     * Use 'borderless' to hide outline.
+     * @default 'borderless'
+     */
+    styleType?: IconButtonProps['styleType'];
+}>;
+/**
+ * Icon inside InputFlexContainer that collapses the padding between the icon and the input/textarea.
+ * @private
+ */
+export declare const InputFlexContainerIcon: PolymorphicForwardRefComponent<"span", Omit<IconProps, "padded"> & {
+    /**
+     * Option to add padding to the icon.
+     * @default true
+     */
+    padded?: IconProps['padded'];
+}>;

package/esm/core/utils/components/InputFlexContainer.js

@@ -5,6 +5,8 @@
 import React from 'react';
 import cx from 'classnames';
 import { Box } from './Box.js';
+import { Icon } from '../../Icon/Icon.js';
+import { IconButton } from '../../Buttons/IconButton.js';
 /**
  * Utility component for input container with display flex abilities.
  * @private
@@ -13,3 +15,19 @@ export const InputFlexContainer = React.forwardRef((props, ref) => {
     const { isDisabled, status, children, className, size, style, ...rest } = props;
     return (React.createElement(Box, { className: cx('iui-input-flex-container', className), "data-iui-status": status, "data-iui-size": size, "data-iui-disabled": isDisabled ? 'true' : undefined, ref: ref, style: style, ...rest }, children));
 });
+/**
+ * Button inside InputFlexContainer that collapses the padding between the button and the input/textarea.
+ * @private
+ */
+export const InputFlexContainerButton = React.forwardRef((props, ref) => {
+    const { className, ...rest } = props;
+    return (React.createElement(IconButton, { ref: ref, className: cx('iui-input-flex-container-icon', className), styleType: 'borderless', ...rest }));
+});
+/**
+ * Icon inside InputFlexContainer that collapses the padding between the icon and the input/textarea.
+ * @private
+ */
+export const InputFlexContainerIcon = React.forwardRef((props, ref) => {
+    const { className, ...rest } = props;
+    return (React.createElement(Icon, { ref: ref, className: cx('iui-input-flex-container-icon', className), padded: true, ...rest }));
+});

package/esm/core/utils/components/LineClamp.d.ts

@@ -0,0 +1,5 @@
+import type { PolymorphicForwardRefComponent } from '../props.js';
+/** @private */
+export declare const LineClamp: PolymorphicForwardRefComponent<"div", {
+    lines?: number | undefined;
+}>;

package/esm/core/utils/components/LineClamp.js

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { Box } from './Box.js';
+import { ShadowRoot } from './ShadowRoot.js';
+/** @private */
+export const LineClamp = React.forwardRef((props, forwardedRef) => {
+    const { lines, children, ...rest } = props;
+    return (React.createElement(Box, { ref: forwardedRef, ...rest, style: { '--_iui-line-clamp': lines, ...props.style } },
+        React.createElement(ShadowRoot, { css: css },
+            React.createElement("slot", null)),
+        children));
+});
+const css = /* css */ `
+  :host {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: var(--_iui-line-clamp, 3);
+    -webkit-box-orient: vertical;
+  }
+`;

package/esm/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/esm/core/utils/components/ShadowRoot.js

@@ -6,24 +6,39 @@ import * as React from 'react';
 import * as ReactDOM from '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
  */
-export const ShadowRoot = ({ children }) => {
+export 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/esm/core/utils/components/index.d.ts

@@ -11,3 +11,4 @@ export * from './Box.js';
 export * from './ButtonBase.js';
 export * from './Portal.js';
 export * from './ShadowRoot.js';
+export * from './LineClamp.js';

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

@@ -15,3 +15,4 @@ export * from './Box.js';
 export * from './ButtonBase.js';
 export * from './Portal.js';
 export * from './ShadowRoot.js';
+export * from './LineClamp.js';

package/esm/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/esm/core/utils/functions/polymorphic.js

@@ -2,6 +2,7 @@
  * 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 */
 import * as React from 'react';
 import cx from 'classnames';
 import { useGlobals } from '../hooks/useGlobals.js';
@@ -9,9 +10,21 @@ import styles from '../../../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(cx(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);
+            }
             useGlobals();
-            return (React.createElement(Element, { ref: ref, ...attrs, ...props, className: getScopedClassName(cx(className, attrs?.className, props.className)) }));
+            return React.createElement(Element, { ref: ref, ...props });
         });
         Comp.displayName = getDisplayNameFromClass(className);
         return Comp;
@@ -20,11 +33,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/esm/core/utils/icons/Svg.js

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

package/esm/core/utils/icons/SvgStatusError.js

@@ -6,5 +6,5 @@ import * as React from 'react';
 import { Svg } from './Svg.js';
 export const SvgStatusError = (props) => {
     return (React.createElement(Svg, { ...props },
-        React.createElement("path", { d: 'm8 0a8 8 0 1 0 8 8 8 8 0 0 0 -8-8zm1 12h-2v-2h2zm0-3h-2v-5h2z' })));
+        React.createElement("path", { d: 'M9 12H7v-2h2v2Zm0-3H7V4h2v5Zm2.314-9H4.686L0 4.686v6.628L4.686 16h6.628L16 11.314V4.686L11.314 0Z' })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.4.2",
+  "version": "3.6.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -55,27 +55,6 @@
     "ui",
     "ux"
   ],
-  "scripts": {
-    "build": "yarn clean:build && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && tsc -p tsconfig.react-table.json && yarn build:styles && yarn build:post",
-    "build:styles": "vite build src/styles.js",
-    "build:watch": "concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"",
-    "build:post": "node ./scripts/postBuild.mjs",
-    "clean:build": "rimraf esm && rimraf cjs && rimraf react-table.d.ts",
-    "clean:coverage": "rimraf coverage",
-    "clean": "rimraf .turbo && yarn clean:coverage && yarn clean:build && rimraf node_modules",
-    "test": "yarn test:types && yarn test:unit",
-    "test:unit": "vitest run",
-    "test:unit:watch": "yarn test:unit --watch",
-    "test:types": "tsc -p tsconfig.test.json --noEmit",
-    "format": "prettier --config .prettierrc **/*.{tsx,ts,js} --ignore-path .gitignore --write",
-    "lint": "eslint \"**/*.{js,ts,tsx}\" --max-warnings=0",
-    "lint:fix": "yarn lint --fix && node ../../scripts/copyrightLinter.js --fix \"*/**/*.{js,ts,tsx}\"",
-    "dev": "yarn clean:build && concurrently \"yarn dev:esm\" \"yarn dev:cjs\" \"yarn build:styles --watch\" \"yarn dev:types\"",
-    "dev:esm": "swc src -d esm --watch",
-    "dev:cjs": "swc src -d cjs --watch -C module.type=commonjs",
-    "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.react-table.json --watch --preserveWatchOutput\"",
-    "dev:styles": "yarn build:styles --watch"
-  },
   "dependencies": {
     "@floating-ui/react": "^0.26.3",
     "@itwin/itwinui-illustrations-react": "^2.1.0",
@@ -85,8 +64,6 @@
     "tslib": "^2.6.0"
   },
   "devDependencies": {
-    "@itwin/itwinui-css": "^2.3.1",
-    "@itwin/itwinui-variables": "3.0.0",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.68",
     "@testing-library/jest-dom": "^6.3.0",
@@ -105,7 +82,9 @@
     "react-dom": "^18.0.0",
     "typescript": "~5.1.6",
     "vite": "^5.0.12",
-    "vitest": "^1.2.1"
+    "vitest": "^1.2.1",
+    "@itwin/itwinui-css": "2.5.0",
+    "@itwin/itwinui-variables": "3.1.0"
   },
   "peerDependencies": {
     "react": ">= 17.0.0 < 19.0.0",
@@ -123,5 +102,26 @@
   "prettier": "configs/prettier-config",
   "sideEffects": [
     "styles.css"
-  ]
-}
+  ],
+  "scripts": {
+    "build": "pnpm clean:build && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && tsc -p tsconfig.react-table.json && pnpm build:styles && pnpm build:post",
+    "build:styles": "vite build src/styles.js",
+    "build:watch": "concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"",
+    "build:post": "node ./scripts/postBuild.mjs",
+    "clean:build": "rimraf esm && rimraf cjs && rimraf react-table.d.ts",
+    "clean:coverage": "rimraf coverage",
+    "clean": "rimraf .turbo && pnpm clean:coverage && pnpm clean:build && rimraf node_modules",
+    "test": "pnpm test:types && pnpm test:unit",
+    "test:unit": "vitest run",
+    "test:unit:watch": "pnpm test:unit --watch",
+    "test:types": "tsc -p tsconfig.test.json --noEmit",
+    "format": "prettier --config .prettierrc **/*.{tsx,ts,js} --ignore-path .gitignore --write",
+    "lint": "eslint \"**/*.{js,ts,tsx}\" --max-warnings=0",
+    "lint:fix": "pnpm lint --fix && node ../../scripts/copyrightLinter.js --fix \"*/**/*.{js,ts,tsx}\"",
+    "dev": "pnpm clean:build && concurrently \"pnpm dev:esm\" \"pnpm dev:cjs\" \"pnpm build:styles --watch\" \"pnpm dev:types\"",
+    "dev:esm": "swc src -d esm --watch",
+    "dev:cjs": "swc src -d cjs --watch -C module.type=commonjs",
+    "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.react-table.json --watch --preserveWatchOutput\"",
+    "dev:styles": "pnpm build:styles --watch"
+  }
+}