@itwin/itwinui-react 3.4.0 → 3.4.1

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -64,7 +64,6 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
                 portaledPortalContainer ? (ReactDOM.createPortal(React.createElement(Toaster, null), portaledPortalContainer)) : (React.createElement("div", { ref: setPortalContainer, style: { display: 'contents' } },
                     React.createElement(Toaster, null)))))));
 });
-export default ThemeProvider;
 // ----------------------------------------------------------------------------
 const Root = React.forwardRef((props, forwardedRef) => {
     const { theme, children, themeOptions, className, ...rest } = props;

package/esm/core/Tile/Tile.d.ts

@@ -384,4 +384,4 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      */
     Buttons: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
 };
-export default Tile;
+export {};

package/esm/core/Tile/Tile.js

@@ -333,4 +333,3 @@ export const Tile = Object.assign(TileComponent, {
      */
     Buttons: TileButtons,
 });
-export default Tile;

package/esm/core/TimePicker/TimePicker.d.ts

@@ -92,4 +92,3 @@ export type TimePickerProps = {
  * <TimePicker date={new Date()} onChange={(e) => console.log('New time value: ' + e)} />
  */
 export declare const TimePicker: PolymorphicForwardRefComponent<"div", TimePickerProps>;
-export default TimePicker;

package/esm/core/TimePicker/TimePicker.js

@@ -261,4 +261,3 @@ const TimePickerColumn = (props) => {
                 } }, valueRenderer(value, precision)));
         }))));
 };
-export default TimePicker;

package/esm/core/Toast/Toast.d.ts

@@ -76,4 +76,3 @@ export type ToastPresentationProps = Omit<ToastProps, 'duration' | 'id' | 'isVis
  * @private
  */
 export declare const ToastPresentation: PolymorphicForwardRefComponent<"div", ToastPresentationProps>;
-export default Toast;

package/esm/core/Toast/Toast.js

@@ -126,4 +126,3 @@ export const ToastPresentation = React.forwardRef((props, forwardedRef) => {
         (type === 'persisting' || hasCloseButton) && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
             React.createElement(SvgCloseSmall, null)))));
 });
-export default Toast;

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

@@ -43,4 +43,4 @@ type ToggleSwitchProps = {
  * <ToggleSwitch label='With icon toggle' icon={<svg viewBox='0 0 16 16'><path d='M1 1v14h14V1H1zm13 1.7v10.6L8.7 8 14 2.7zM8 7.3L2.7 2h10.6L8 7.3zm-.7.7L2 13.3V2.7L7.3 8zm.7.7l5.3 5.3H2.7L8 8.7z' /></svg>} />
  */
 export declare const ToggleSwitch: PolymorphicForwardRefComponent<"input", ToggleSwitchProps>;
-export default ToggleSwitch;
+export {};

package/esm/core/ToggleSwitch/ToggleSwitch.js

@@ -42,4 +42,3 @@ export const ToggleSwitch = React.forwardRef((props, ref) => {
         icon && size !== 'small' && (React.createElement(Box, { as: 'span', className: 'iui-toggle-switch-icon', "aria-hidden": true }, icon)),
         label && (React.createElement(Box, { as: 'span', className: 'iui-toggle-switch-label' }, label))));
 });
-export default ToggleSwitch;

package/esm/core/Tooltip/Tooltip.d.ts

@@ -91,4 +91,4 @@ export declare const Tooltip: PolymorphicForwardRefComponent<"div", {
      */
     children?: React.ReactNode;
 } & PortalProps & TooltipOptions>;
-export default Tooltip;
+export {};

package/esm/core/Tooltip/Tooltip.js

@@ -116,4 +116,3 @@ export const Tooltip = React.forwardRef((props, forwardedRef) => {
         React.createElement(Portal, { portal: portal },
             React.createElement(Box, { className: cx('iui-tooltip', className), ref: useMergedRefs(tooltip.refs.setFloating, forwardedRef), style: { ...tooltip.floatingStyles, ...style }, ...tooltip.floatingProps }, content))));
 });
-export default Tooltip;

package/esm/core/TransferList/TransferList.d.ts

@@ -66,4 +66,4 @@ export declare const TransferListContext: React.Context<{
      */
     setLabelId: (labelId: string) => void;
 } | undefined>;
-export default TransferList;
+export {};

package/esm/core/TransferList/TransferList.js

@@ -140,4 +140,3 @@ export const TransferList = Object.assign(TransferListComponent, {
     Toolbar: TransferListToolbar,
 });
 export const TransferListContext = React.createContext(undefined);
-export default TransferList;

package/esm/core/Tree/Tree.d.ts

@@ -134,4 +134,3 @@ export type TreeProps<T> = {
   />
  */
 export declare const Tree: <T>(props: TreeProps<T>) => React.JSX.Element;
-export default Tree;

package/esm/core/Tree/Tree.js

@@ -190,4 +190,3 @@ const VirtualizedTree = React.forwardRef(({ flatNodesList, itemRenderer, scrollT
         style: { ...style, ...outerProps.style } },
         React.createElement(TreeElement, { ...innerProps, ...rest, ref: mergeRefs(ref, innerProps.ref) }, visibleChildren)));
 });
-export default Tree;

package/esm/core/Tree/TreeNode.d.ts

@@ -83,4 +83,4 @@ type TreeNodeProps = {
   />
  */
 export declare const TreeNode: (props: TreeNodeProps) => React.JSX.Element;
-export default TreeNode;
+export {};

package/esm/core/Tree/TreeNode.js

@@ -126,4 +126,3 @@ export const TreeNode = (props) => {
                 children)),
         hasSubNodes && (React.createElement(Box, { as: 'ul', className: 'iui-sub-tree', role: 'group', "aria-owns": subNodeIds.join(' ') }))));
 };
-export default TreeNode;

package/esm/core/Tree/TreeNodeExpander.d.ts

@@ -4,4 +4,4 @@ type TreeNodeExpanderProps = {
     isExpanded?: boolean;
 } & IconButtonProps;
 export declare const TreeNodeExpander: PolymorphicForwardRefComponent<"button", TreeNodeExpanderProps>;
-export default TreeNodeExpander;
+export {};

package/esm/core/Tree/TreeNodeExpander.js

@@ -16,4 +16,3 @@ export const TreeNodeExpander = React.forwardRef((props, ref) => {
                 'iui-tree-node-content-expander-icon-expanded': isExpanded,
             }) })));
 });
-export default TreeNodeExpander;

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

@@ -13,4 +13,3 @@
  * <Anchor as='button' onClick={() => {}}>click me</Anchor>
  */
 export declare const Anchor: import("../utils/props.js").PolymorphicForwardRefComponent<"a", {}>;
-export default Anchor;

package/esm/core/Typography/Anchor.js

@@ -18,4 +18,3 @@ import { polymorphic } from '../utils/index.js';
  * <Anchor as='button' onClick={() => {}}>click me</Anchor>
  */
 export const Anchor = polymorphic.a('iui-anchor');
-export default Anchor;

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

@@ -15,4 +15,4 @@ type BlockquoteProps = {
  * </Blockquote>
  */
 export declare const Blockquote: PolymorphicForwardRefComponent<"blockquote", BlockquoteProps>;
-export default Blockquote;
+export {};

package/esm/core/Typography/Blockquote.js

@@ -19,4 +19,3 @@ export const Blockquote = React.forwardRef((props, ref) => {
         children,
         footer && React.createElement("footer", null, footer)));
 });
-export default Blockquote;

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

@@ -4,4 +4,3 @@
  * <p>Some <Code>inline code</Code> in a paragraph</p>
  */
 export declare const Code: import("../utils/props.js").PolymorphicForwardRefComponent<"code", {}>;
-export default Code;

package/esm/core/Typography/Code.js

@@ -9,4 +9,3 @@ import { polymorphic } from '../utils/index.js';
  * <p>Some <Code>inline code</Code> in a paragraph</p>
  */
 export const Code = polymorphic.code('iui-code');
-export default Code;

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

@@ -30,4 +30,4 @@ type KbdProps = {
  * <Kbd title='Enter'>{KbdKeys.Enter}</Kbd>
  */
 export declare const Kbd: PolymorphicForwardRefComponent<"kbd", KbdProps>;
-export default Kbd;
+export {};

package/esm/core/Typography/Kbd.js

@@ -33,4 +33,3 @@ export const Kbd = React.forwardRef((props, forwardedRef) => {
     const { className, children, ...rest } = props;
     return (React.createElement(Box, { as: 'kbd', className: cx('iui-keyboard', className), ref: forwardedRef, ...rest }, children));
 });
-export default Kbd;

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

@@ -37,4 +37,4 @@ type TextProps = {
  * <Text isSkeleton>Skeleton text</Text>
  */
 export declare const Text: PolymorphicForwardRefComponent<"div", TextProps>;
-export default Text;
+export {};

package/esm/core/Typography/Text.js

@@ -26,4 +26,3 @@ export const Text = React.forwardRef((props, ref) => {
             'iui-skeleton': isSkeleton,
         }, className), ref: ref, ...rest }));
 });
-export default Text;

package/esm/core/VisuallyHidden/VisuallyHidden.d.ts

@@ -19,4 +19,4 @@ type VisuallyHiddenOwnProps = {
  * @see https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
  */
 export declare const VisuallyHidden: PolymorphicForwardRefComponent<"span", VisuallyHiddenOwnProps>;
-export default VisuallyHidden;
+export {};

package/esm/core/VisuallyHidden/VisuallyHidden.js

@@ -19,4 +19,3 @@ 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 }));
 });
-export default VisuallyHidden;

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

@@ -10,4 +10,3 @@ export type FocusTrapProps = {
  * Used for modals and dialogs.
  */
 export declare const FocusTrap: (props: FocusTrapProps) => React.JSX.Element;
-export default FocusTrap;

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

@@ -43,4 +43,3 @@ export const FocusTrap = (props) => {
         }),
         React.createElement("div", { tabIndex: 0, onFocus: onLastFocus, "aria-hidden": true })));
 };
-export default FocusTrap;

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

@@ -32,4 +32,3 @@ export type MiddleTextTruncationProps = {
  * />
  */
 export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => React.JSX.Element;
-export default MiddleTextTruncation;

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

@@ -40,4 +40,3 @@ export const MiddleTextTruncation = (props) => {
             ...style,
         }, ref: ref, ...rest }, textRenderer?.(truncatedText, text) ?? truncatedText));
 };
-export default MiddleTextTruncation;

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

@@ -23,6 +23,8 @@ export type ResizerProps = {
 /**
  * Component that allows to resize parent element.
  * Parent must have `position: relative`.
+ *
+ * Ideally should be used within a shadow root.
  * @private
  * @example
  * const ref = React.useRef<HTMLDivElement>(null);
@@ -33,4 +35,3 @@ export type ResizerProps = {
  * );
  */
 export declare const Resizer: (props: ResizerProps) => React.JSX.Element;
-export default Resizer;

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

@@ -7,6 +7,8 @@ import { getBoundedValue, getTranslateValuesFromElement, } from '../functions/in
 /**
  * Component that allows to resize parent element.
  * Parent must have `position: relative`.
+ *
+ * Ideally should be used within a shadow root.
  * @private
  * @example
  * const ref = React.useRef<HTMLDivElement>(null);
@@ -17,6 +19,16 @@ import { getBoundedValue, getTranslateValuesFromElement, } from '../functions/in
  * );
  */
 export const Resizer = (props) => {
+    return (React.createElement("div", { style: {
+            position: 'absolute',
+            inset: -6,
+            display: 'grid',
+            pointerEvents: 'none',
+        } },
+        React.createElement(ResizerStyles, null),
+        React.createElement(Resizers, { ...props })));
+};
+const Resizers = (props) => {
     const { elementRef, containerRef, onResizeStart, onResizeEnd } = props;
     const isResizing = React.useRef(false);
     const onResizePointerDown = (event) => {
@@ -147,69 +159,46 @@ export const Resizer = (props) => {
         }, { once: true });
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { "data-iui-resizer": 'top-left', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: 12,
-                height: 12,
-                cursor: 'nw-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'top', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                top: 0,
-                left: 8,
-                right: 8,
-                height: 8,
-                cursor: 'n-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'top-right', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                width: 12,
-                height: 12,
-                cursor: 'ne-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'right', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                top: 8,
-                right: 0,
-                bottom: 8,
-                width: 8,
-                cursor: 'e-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'bottom-right', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                bottom: 0,
-                right: 0,
-                width: 12,
-                height: 12,
-                cursor: 'se-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'bottom', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                bottom: 0,
-                left: 8,
-                right: 8,
-                height: 8,
-                cursor: 's-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'bottom-left', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                bottom: 0,
-                left: 0,
-                width: 12,
-                height: 12,
-                cursor: 'sw-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'left', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                top: 8,
-                left: 0,
-                bottom: 8,
-                width: 8,
-                cursor: 'w-resize',
-            } })));
+        React.createElement("div", { "data-iui-resizer": 'top-left', onPointerDown: onResizePointerDown, style: { cursor: 'nw-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'top', onPointerDown: onResizePointerDown, style: { cursor: 'n-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'top-right', onPointerDown: onResizePointerDown, style: { cursor: 'ne-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'right', onPointerDown: onResizePointerDown, style: { cursor: 'e-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'bottom-right', onPointerDown: onResizePointerDown, style: { cursor: 'se-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'bottom', onPointerDown: onResizePointerDown, style: { cursor: 's-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'bottom-left', onPointerDown: onResizePointerDown, style: { cursor: 'sw-resize' } }),
+        React.createElement("div", { "data-iui-resizer": 'left', onPointerDown: onResizePointerDown, style: { cursor: 'w-resize' } })));
 };
-export default Resizer;
+// ----------------------------------------------------------------------------
+const ResizerStyles = React.memo(() => React.createElement("style", null, resizerStyles));
+const resizerStyles = /* css */ `
+[data-iui-resizer] {
+  pointer-events: auto;
+  grid-area: 1 / 1 / -1 / -1;
+  width: 12px;
+  height: 12px;
+  z-index: 1;
+}
+[data-iui-resizer='top'],
+[data-iui-resizer='bottom'] {
+  height: 8px;
+  width: auto;
+  z-index: 0;
+}
+[data-iui-resizer='left'],
+[data-iui-resizer='right'] {
+  height: auto;
+  width: 8px;
+  z-index: 0;
+}
+[data-iui-resizer^='top'] {
+  align-self: start;
+}
+[data-iui-resizer^='bottom'] {
+  align-self: end;
+}
+[data-iui-resizer$='left'] {
+  justify-self: start;
+}
+[data-iui-resizer$='right'] {
+  justify-self: end;
+}`;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+/**
+ * Wrapper around `<template>` element that attaches shadow root to its parent
+ * and moves its children into the shadow root.
+ *
+ * @private
+ */
+export declare const ShadowRoot: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element | null;

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

@@ -0,0 +1,40 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 * as ReactDOM from 'react-dom';
+const isBrowser = typeof document !== 'undefined';
+const supportsDSD = isBrowser && 'shadowRootMode' in HTMLTemplateElement.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 }) => {
+    const [shadowRoot, setShadowRoot] = React.useState();
+    const isFirstRender = useIsFirstRender();
+    const attachShadowRef = React.useCallback((template) => {
+        const parent = template?.parentElement;
+        if (!template || !parent) {
+            return;
+        }
+        queueMicrotask(() => ReactDOM.flushSync(() => setShadowRoot(parent.shadowRoot || parent.attachShadow({ mode: 'open' }))));
+    }, []);
+    if (!isBrowser) {
+        return React.createElement("template", { shadowrootmode: 'open' }, 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.
+    if (supportsDSD && isFirstRender) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null, shadowRoot ? (ReactDOM.createPortal(children, shadowRoot)) : (React.createElement("template", { ref: attachShadowRef }))));
+};
+// ----------------------------------------------------------------------------
+function useIsFirstRender() {
+    const [isFirstRender, setIsFirstRender] = React.useState(true);
+    React.useEffect(() => setIsFirstRender(false), []);
+    return isFirstRender;
+}

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

@@ -73,4 +73,3 @@ export declare const useVirtualization: (props: VirtualScrollProps) => {
     };
     visibleChildren: JSX.Element[];
 };
-export default VirtualScroll;

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

@@ -283,4 +283,3 @@ export const useVirtualization = (props) => {
         visibleChildren,
     };
 };
-export default VirtualScroll;

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

@@ -4,4 +4,3 @@ export declare const WithCSSTransition: (props: Partial<React.ComponentPropsWith
     children: JSX.Element;
     dimension?: 'height' | 'width';
 }) => React.JSX.Element;
-export default WithCSSTransition;

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

@@ -35,4 +35,3 @@ export const WithCSSTransition = (props) => {
         },
     })) : (React.createElement(React.Fragment, null))));
 };
-export default WithCSSTransition;

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

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

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

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

package/esm/core/utils/hooks/useContainerWidth.d.ts

@@ -14,4 +14,3 @@
  * return <div ref={ref}>...</div>;
  */
 export declare const useContainerWidth: <T extends HTMLElement>(watchResizes?: boolean) => readonly [(instance: HTMLElement | null | undefined) => void, number];
-export default useContainerWidth;

package/esm/core/utils/hooks/useContainerWidth.js

@@ -36,4 +36,3 @@ export const useContainerWidth = (watchResizes = true) => {
     const refs = useMergedRefs(ref, watchResizes ? resizeRef : undefined);
     return [refs, contentWidth];
 };
-export default useContainerWidth;

package/esm/core/utils/hooks/useDragAndDrop.d.ts

@@ -11,4 +11,3 @@ export declare const useDragAndDrop: (elementRef: React.RefObject<HTMLElement>,
     onPointerDown: (e: React.PointerEvent<HTMLElement>) => void;
     transform: string;
 };
-export default useDragAndDrop;

package/esm/core/utils/hooks/useDragAndDrop.js

@@ -98,4 +98,3 @@ export const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
     }, [elementRef, enabled]);
     return { onPointerDown, transform };
 };
-export default useDragAndDrop;

package/esm/core/utils/hooks/useMediaQuery.d.ts

@@ -1,2 +1 @@
 export declare const useMediaQuery: (queryString: string) => boolean;
-export default useMediaQuery;

package/esm/core/utils/hooks/useMediaQuery.js

@@ -32,4 +32,3 @@ export const useMediaQuery = (queryString) => {
     }, [queryString]);
     return !!matches;
 };
-export default useMediaQuery;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -86,22 +86,19 @@
     "tslib": "^2.6.0"
   },
   "devDependencies": {
-    "@itwin/itwinui-css": "^2.3.0",
+    "@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",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^14.5.1",
-    "@types/node": "^18.0.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/node": "*",
+    "@types/react": "*",
+    "@types/react-dom": "*",
     "@types/react-transition-group": "^4.4.10",
-    "@typescript-eslint/eslint-plugin": "^5.60.0",
-    "@typescript-eslint/parser": "^5.60.0",
     "@vitest/coverage-v8": "^1.2.1",
-    "concurrently": "^5.3.0",
-    "eslint": "^8.43.0",
+    "eslint": "^8",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-require-extensions": "^0.1.3",
     "react": "^18.0.0",