@itwin/itwinui-react 3.11.3 → 3.12.1

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.js

@@ -1,24 +1,20 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { 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 React.createElement(
+    VisuallyHidden,
+    {
+      as: 'div',
+      'aria-live': 'polite',
+      'aria-atomic': 'true',
+    },
+    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,35 @@
-/*---------------------------------------------------------------------------------------------
- * 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 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 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),
+  });
 });
 ButtonBase.displayName = 'ButtonBase';

package/esm/utils/components/FocusTrap.js

@@ -1,45 +1,46 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { 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 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,
+    }),
+  );
 };

package/esm/utils/components/InputContainer.js

@@ -1,28 +1,58 @@
-/*---------------------------------------------------------------------------------------------
- * 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 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 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,
+        {
+          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,
+          ),
+  );
 });

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,40 @@
-/*---------------------------------------------------------------------------------------------
- * 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 * 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 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 }));
+  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 }));
+  const { className, ...rest } = props;
+  return React.createElement(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,29 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { 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 */ `
+const css = `
   :host {
     overflow: hidden;
     display: -webkit-box;

package/esm/utils/components/MiddleTextTruncation.js

@@ -1,42 +1,32 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { 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 React.createElement(
+    'span',
+    {
+      style: {
+        display: 'flex',
+        minWidth: 0,
+        flexGrow: 1,
+        whiteSpace: 'nowrap',
+        ...style,
+      },
+      ref: ref,
+      ...rest,
+    },
+    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;
 };