@itwin/itwinui-react 3.4.1 → 3.5.0

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -80,14 +80,13 @@
     "@floating-ui/react": "^0.26.3",
     "@itwin/itwinui-illustrations-react": "^2.1.0",
     "classnames": "^2.3.2",
-    "jsdom": "^24.0.0",
     "react-table": "^7.8.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.6.0"
   },
   "devDependencies": {
-    "@itwin/itwinui-css": "^2.3.1",
-    "@itwin/itwinui-variables": "3.0.0",
+    "@itwin/itwinui-css": "^2.4.0",
+    "@itwin/itwinui-variables": "3.1.0",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.68",
     "@testing-library/jest-dom": "^6.3.0",
@@ -101,6 +100,7 @@
     "eslint": "^8",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-require-extensions": "^0.1.3",
+    "jsdom": "^24.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "typescript": "~5.1.6",