@itwin/itwinui-react 3.11.2 → 3.12.0

package/esm/utils/color/index.js

@@ -1,5 +1 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 export * from './ColorValue.js';

package/esm/utils/components/AutoclearingHiddenLiveRegion.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 /**
  * Visually-hidden polite live region that automatically clears itself after 5 seconds.
  *
@@ -9,4 +8,4 @@ import * as React from 'react';
  */
 export declare const AutoclearingHiddenLiveRegion: ({ text }: {
     text?: string | undefined;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/esm/utils/components/AutoclearingHiddenLiveRegion.js

@@ -1,24 +1,18 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { VisuallyHidden } from '../../core/VisuallyHidden/VisuallyHidden.js';
 import { getWindow } from '../functions/index.js';
-/**
- * Visually-hidden polite live region that automatically clears itself after 5 seconds.
- *
- * Should only be used for small updates and user-initiated actions (e.g. when _updating_ the selection),
- * otherwise it could cause too many announcements every time an instance of this component is mounted.
- *
- * @private
- */
 export const AutoclearingHiddenLiveRegion = ({ text = '' }) => {
-    const [maybeText, setMaybeText] = React.useState(text);
-    React.useEffect(() => {
-        setMaybeText(text);
-        const timeout = getWindow()?.setTimeout(() => setMaybeText(''), 5000);
-        return () => void getWindow()?.clearTimeout(timeout);
-    }, [text]);
-    return (React.createElement(VisuallyHidden, { as: 'div', "aria-live": 'polite', "aria-atomic": 'true' }, maybeText));
+  const [maybeText, setMaybeText] = React.useState(text);
+  React.useEffect(() => {
+    setMaybeText(text);
+    const timeout = getWindow()?.setTimeout(() => setMaybeText(''), 5000);
+    return () => void getWindow()?.clearTimeout(timeout);
+  }, [text]);
+  return _jsx(VisuallyHidden, {
+    as: 'div',
+    'aria-live': 'polite',
+    'aria-atomic': 'true',
+    children: maybeText,
+  });
 };

package/esm/utils/components/Box.js

@@ -1,11 +1,2 @@
-/*---------------------------------------------------------------------------------------------
- * 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 '../functions/polymorphic.js';
-/**
- * Polymorphic component that renders a div element by default.
- * Intended to be used as a base for other components.
- * @private
- */
 export const Box = polymorphic.div('');

package/esm/utils/components/ButtonBase.js

@@ -1,24 +1,36 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from './Box.js';
 import { useIsClient } from '../hooks/useIsClient.js';
 export const ButtonBase = React.forwardRef((props, forwardedRef) => {
-    const { as: asProp = 'button', disabled: disabledProp, htmlDisabled, ...rest } = props;
-    const isClient = useIsClient();
-    const ariaDisabled = disabledProp &&
-        !htmlDisabled && // htmlDisabled prop takes preference
-        isClient && // progressively enhance after first render
-        asProp === 'button'; // ignore if not button, e.g. links
-    const handleIfEnabled = (handler) => (e) => {
-        if (disabledProp) {
-            return;
-        }
-        handler?.(e);
-    };
-    return (React.createElement(Box, { as: asProp, type: asProp === 'button' ? 'button' : undefined, ref: forwardedRef, "aria-disabled": ariaDisabled ? 'true' : undefined, "data-iui-disabled": disabledProp ? 'true' : undefined, disabled: htmlDisabled ?? (!isClient && disabledProp) ? true : undefined, ...rest, className: cx('iui-button-base', props.className), onClick: handleIfEnabled(props.onClick), onPointerDown: handleIfEnabled(props.onPointerDown), onPointerUp: handleIfEnabled(props.onPointerUp) }));
+  const {
+    as: asProp = 'button',
+    disabled: disabledProp,
+    htmlDisabled,
+    ...rest
+  } = props;
+  const isClient = useIsClient();
+  const ariaDisabled =
+    disabledProp && !htmlDisabled && isClient && asProp === 'button';
+  const handleIfEnabled = (handler) => (e) => {
+    if (disabledProp) {
+      return;
+    }
+    handler?.(e);
+  };
+  return _jsx(Box, {
+    as: asProp,
+    type: asProp === 'button' ? 'button' : undefined,
+    ref: forwardedRef,
+    'aria-disabled': ariaDisabled ? 'true' : undefined,
+    'data-iui-disabled': disabledProp ? 'true' : undefined,
+    disabled: htmlDisabled ?? (!isClient && disabledProp) ? true : undefined,
+    ...rest,
+    className: cx('iui-button-base', props.className),
+    onClick: handleIfEnabled(props.onClick),
+    onPointerDown: handleIfEnabled(props.onPointerDown),
+    onPointerUp: handleIfEnabled(props.onPointerUp),
+  });
 });
 ButtonBase.displayName = 'ButtonBase';

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 export type FocusTrapProps = {
     /**
      * A single child element to trap focus in.
@@ -9,4 +8,4 @@ export type FocusTrapProps = {
  * Trap focus within child container.
  * Used for modals and dialogs.
  */
-export declare const FocusTrap: (props: FocusTrapProps) => React.JSX.Element;
+export declare const FocusTrap: (props: FocusTrapProps) => import("react/jsx-runtime").JSX.Element;

package/esm/utils/components/FocusTrap.js

@@ -1,45 +1,51 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import {
+  jsx as _jsx,
+  jsxs as _jsxs,
+  Fragment as _Fragment,
+} from 'react/jsx-runtime';
 import * as React from 'react';
 import { getTabbableElements } from '../functions/focusable.js';
 import { mergeRefs } from '../hooks/useMergedRefs.js';
-/**
- * Trap focus within child container.
- * Used for modals and dialogs.
- */
 export const FocusTrap = (props) => {
-    const { children } = props;
-    const childRef = React.useRef();
-    const getFirstLastFocusables = () => {
-        const elements = getTabbableElements(childRef.current);
-        const firstElement = elements[0];
-        const lastElement = elements[(elements.length || 1) - 1];
-        return [firstElement, lastElement];
-    };
-    const onFirstFocus = (event) => {
-        const [firstElement, lastElement] = getFirstLastFocusables();
-        if (event.relatedTarget === firstElement) {
-            lastElement?.focus();
-        }
-        else {
-            firstElement?.focus();
-        }
-    };
-    const onLastFocus = (event) => {
-        const [firstElement, lastElement] = getFirstLastFocusables();
-        if (event.relatedTarget === lastElement) {
-            firstElement?.focus();
-        }
-        else {
-            lastElement?.focus();
-        }
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { tabIndex: 0, onFocus: onFirstFocus, "aria-hidden": true }),
-        React.cloneElement(children, {
-            ref: mergeRefs(children.ref, childRef),
-        }),
-        React.createElement("div", { tabIndex: 0, onFocus: onLastFocus, "aria-hidden": true })));
+  const { children } = props;
+  const childRef = React.useRef();
+  const getFirstLastFocusables = () => {
+    const elements = getTabbableElements(childRef.current);
+    const firstElement = elements[0];
+    const lastElement = elements[(elements.length || 1) - 1];
+    return [firstElement, lastElement];
+  };
+  const onFirstFocus = (event) => {
+    const [firstElement, lastElement] = getFirstLastFocusables();
+    if (event.relatedTarget === firstElement) {
+      lastElement?.focus();
+    } else {
+      firstElement?.focus();
+    }
+  };
+  const onLastFocus = (event) => {
+    const [firstElement, lastElement] = getFirstLastFocusables();
+    if (event.relatedTarget === lastElement) {
+      firstElement?.focus();
+    } else {
+      lastElement?.focus();
+    }
+  };
+  return _jsxs(_Fragment, {
+    children: [
+      _jsx('div', {
+        tabIndex: 0,
+        onFocus: onFirstFocus,
+        'aria-hidden': true,
+      }),
+      React.cloneElement(children, {
+        ref: mergeRefs(children.ref, childRef),
+      }),
+      _jsx('div', {
+        tabIndex: 0,
+        onFocus: onLastFocus,
+        'aria-hidden': true,
+      }),
+    ],
+  });
 };

package/esm/utils/components/InputContainer.js

@@ -1,28 +1,52 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from './Box.js';
 import { Label } from '../../core/Label/Label.js';
 import { StatusMessage } from '../../core/StatusMessage/StatusMessage.js';
-/**
- * Input container to wrap inputs with label, and add optional message and icon.
- * @private
- */
 export const InputContainer = React.forwardRef((props, forwardedRef) => {
-    const { label, disabled, required, status, message, icon, isLabelInline, children, className, style, statusMessage, inputId, labelId, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-input-grid', className), "data-iui-status": status, "data-iui-label-placement": isLabelInline ? 'inline' : undefined, style: style, ref: forwardedRef, ...rest },
-        label && (React.createElement(Label
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        , { 
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            as: inputId && props.as !== 'label' ? 'label' : 'div', required: required, disabled: disabled, htmlFor: inputId, id: labelId }, label)),
-        children,
-        statusMessage
-            ? statusMessage
-            : message && (React.createElement(StatusMessage, { startIcon: icon, status: status }, message))));
+  const {
+    label,
+    disabled,
+    required,
+    status,
+    message,
+    icon,
+    isLabelInline,
+    children,
+    className,
+    style,
+    statusMessage,
+    inputId,
+    labelId,
+    ...rest
+  } = props;
+  return _jsxs(Box, {
+    className: cx('iui-input-grid', className),
+    'data-iui-status': status,
+    'data-iui-label-placement': isLabelInline ? 'inline' : undefined,
+    style: style,
+    ref: forwardedRef,
+    ...rest,
+    children: [
+      label &&
+        _jsx(Label, {
+          as: inputId && props.as !== 'label' ? 'label' : 'div',
+          required: required,
+          disabled: disabled,
+          htmlFor: inputId,
+          id: labelId,
+          children: label,
+        }),
+      children,
+      statusMessage
+        ? statusMessage
+        : message &&
+          _jsx(StatusMessage, {
+            startIcon: icon,
+            status: status,
+            children: message,
+          }),
+    ],
+  });
 });

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

@@ -21,7 +21,7 @@ export declare const InputFlexContainerButton: PolymorphicForwardRefComponent<"b
      * Use 'borderless' to hide outline.
      * @default 'borderless'
      */
-    styleType?: IconButtonProps['styleType'];
+    styleType?: IconButtonProps["styleType"];
 }>;
 /**
  * Icon inside InputFlexContainer that collapses the padding between the icon and the input/textarea.
@@ -32,5 +32,5 @@ export declare const InputFlexContainerIcon: PolymorphicForwardRefComponent<"spa
      * Option to add padding to the icon.
      * @default true
      */
-    padded?: IconProps['padded'];
+    padded?: IconProps["padded"];
 }>;

package/esm/utils/components/InputFlexContainer.js

@@ -1,33 +1,38 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-import React from 'react';
+import { jsx as _jsx } from 'react/jsx-runtime';
+import * as React from 'react';
 import cx from 'classnames';
 import { Box } from './Box.js';
 import { Icon } from '../../core/Icon/Icon.js';
 import { IconButton } from '../../core/Buttons/IconButton.js';
-/**
- * Utility component for input container with display flex abilities.
- * @private
- */
 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));
+  const { isDisabled, status, children, className, size, style, ...rest } =
+    props;
+  return _jsx(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: 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 }));
+  const { className, ...rest } = props;
+  return _jsx(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 }));
+  const { className, ...rest } = props;
+  return _jsx(Icon, {
+    ref: ref,
+    className: cx('iui-input-flex-container-icon', className),
+    padded: true,
+    ...rest,
+  });
 });

package/esm/utils/components/InputWithIcon.js

@@ -1,8 +1,3 @@
-/*---------------------------------------------------------------------------------------------
- * 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 '../functions/polymorphic.js';
-/** @private */
 export const InputWithIcon = polymorphic.div('iui-input-with-icon');
 InputWithIcon.displayName = 'InputWithIcon';

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

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

package/esm/utils/components/LineClamp.js

@@ -1,19 +1,26 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 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 { lines, children, ...rest } = props;
+  return _jsxs(Box, {
+    ref: forwardedRef,
+    ...rest,
+    style: {
+      '--_iui-line-clamp': lines,
+      ...props.style,
+    },
+    children: [
+      _jsx(ShadowRoot, {
+        css: css,
+        children: _jsx('slot', {}),
+      }),
+      children,
+    ],
+  });
 });
-const css = /* css */ `
+const css = `
   :host {
     overflow: hidden;
     display: -webkit-box;

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

@@ -31,4 +31,4 @@ export type MiddleTextTruncationProps = {
  *   )}
  * />
  */
-export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => React.JSX.Element;
+export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => import("react/jsx-runtime").JSX.Element;

package/esm/utils/components/MiddleTextTruncation.js

@@ -1,42 +1,30 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useOverflow } from '../hooks/useOverflow.js';
 const ELLIPSIS_CHAR = '…';
-/**
- * Truncates text with the ellipsis in the middle,
- * leaving defined number of chars at the end.
- * @example
- * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' />
- * @example
- * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' endCharsCount={10} />
- * @example
- * <MiddleTextTruncation
- *   text='ThisIsMyVeryLongFileName.dgn'
- *   textRenderer={React.useCallback(
- *     (truncatedText) => <b>{truncatedText}</b>,
- *     []
- *   )}
- * />
- */
 export const MiddleTextTruncation = (props) => {
-    const { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
-    const [ref, visibleCount] = useOverflow(text);
-    const truncatedText = React.useMemo(() => {
-        if (visibleCount < text.length) {
-            return `${text.substring(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
-        }
-        else {
-            return text;
-        }
-    }, [endCharsCount, text, visibleCount]);
-    return (React.createElement("span", { style: {
-            display: 'flex',
-            minWidth: 0,
-            flexGrow: 1,
-            whiteSpace: 'nowrap',
-            ...style,
-        }, ref: ref, ...rest }, textRenderer?.(truncatedText, text) ?? truncatedText));
+  const { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
+  const [ref, visibleCount] = useOverflow(text);
+  const truncatedText = React.useMemo(() => {
+    if (visibleCount < text.length) {
+      return `${text.substring(
+        0,
+        visibleCount - endCharsCount - ELLIPSIS_CHAR.length,
+      )}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
+    } else {
+      return text;
+    }
+  }, [endCharsCount, text, visibleCount]);
+  return _jsx('span', {
+    style: {
+      display: 'flex',
+      minWidth: 0,
+      flexGrow: 1,
+      whiteSpace: 'nowrap',
+      ...style,
+    },
+    ref: ref,
+    ...rest,
+    children: textRenderer?.(truncatedText, text) ?? truncatedText,
+  });
 };

package/esm/utils/components/Portal.d.ts

@@ -32,4 +32,4 @@ export type PortalProps = {
  * @private
  */
 export declare const Portal: (props: React.PropsWithChildren<PortalProps>) => React.ReactNode;
-export declare const usePortalTo: (portal: NonNullable<PortalProps['portal']>) => HTMLElement | null | undefined;
+export declare const usePortalTo: (portal: NonNullable<PortalProps["portal"]>) => HTMLElement | null | undefined;

package/esm/utils/components/Portal.js

@@ -1,41 +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 * as ReactDOM from 'react-dom';
 import { useIsClient } from '../hooks/useIsClient.js';
 import { atom } from 'jotai';
 import { useScopedAtom } from '../providers/ScopeProvider.js';
-// ----------------------------------------------------------------------------
 export const portalContainerAtom = atom(undefined);
-// ----------------------------------------------------------------------------
-/**
- * Helper component that portals children according to the following conditions:
- *   - renders null on server
- *   - if `portal` is set to true, renders into nearest ThemeProvider's portalContainer
- *   - if `portal` is set to false, renders as-is without portal
- *   - otherwise renders into `portal.to` (can be an element or a function)
- *     - If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).
- *     - E.g. `portal={{ to: () => document.querySelector('.may-not-exist') }}`.
- *
- * @private
- */
 export const Portal = (props) => {
-    const { portal = true, children } = props;
-    const isClient = useIsClient();
-    const portalTo = usePortalTo(portal);
-    if (!isClient) {
-        return null;
-    }
-    return portalTo ? ReactDOM.createPortal(children, portalTo) : children;
+  const { portal = true, children } = props;
+  const isClient = useIsClient();
+  const portalTo = usePortalTo(portal);
+  if (!isClient) {
+    return null;
+  }
+  return portalTo ? ReactDOM.createPortal(children, portalTo) : children;
 };
-// ----------------------------------------------------------------------------
 export const usePortalTo = (portal) => {
-    const [portalContainer] = useScopedAtom(portalContainerAtom);
-    if (typeof portal === 'boolean') {
-        return portal ? portalContainer : null;
-    }
-    const portalTo = typeof portal.to === 'function' ? portal.to() : portal.to;
-    return portalTo ?? portalContainer;
+  const [portalContainer] = useScopedAtom(portalContainerAtom);
+  if (typeof portal === 'boolean') {
+    return portal ? portalContainer : null;
+  }
+  const portalTo = typeof portal.to === 'function' ? portal.to() : portal.to;
+  return portalTo ?? portalContainer;
 };

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

@@ -34,4 +34,4 @@ export type ResizerProps = {
  *   </div>
  * );
  */
-export declare const Resizer: (props: ResizerProps) => React.JSX.Element;
+export declare const Resizer: (props: ResizerProps) => import("react/jsx-runtime").JSX.Element;