@itwin/itwinui-react 3.13.4 → 3.14.1

package/DEV-esm/utils/components/AutoclearingHiddenLiveRegion.js

@@ -1,18 +1,20 @@
 import * as React from 'react';
 import { VisuallyHidden } from '../../core/VisuallyHidden/VisuallyHidden.js';
 import { getWindow } from '../functions/index.js';
-export const AutoclearingHiddenLiveRegion = ({ text = '' })=>{
-    let [maybeText, setMaybeText] = React.useState(text);
-    React.useEffect(()=>{
-        setMaybeText(text);
-        let timeout = getWindow()?.setTimeout(()=>setMaybeText(''), 5000);
-        return ()=>void getWindow()?.clearTimeout(timeout);
-    }, [
-        text
-    ]);
-    return React.createElement(VisuallyHidden, {
-        as: "div",
-        "aria-live": "polite",
-        "aria-atomic": "true"
-    }, maybeText);
+export const AutoclearingHiddenLiveRegion = ({ text = '' }) => {
+  let [maybeText, setMaybeText] = React.useState(text);
+  React.useEffect(() => {
+    setMaybeText(text);
+    let 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/DEV-esm/utils/components/ButtonBase.js

@@ -2,26 +2,32 @@ 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)=>{
-    let { as: asProp = 'button', disabled: disabledProp, htmlDisabled, ...rest } = props;
-    let isClient = useIsClient();
-    let ariaDisabled = disabledProp && !htmlDisabled && isClient && 'button' === asProp;
-    let handleIfEnabled = (handler)=>(e)=>{
-            if (disabledProp) return;
-            handler?.(e);
-        };
-    return React.createElement(Box, {
-        as: asProp,
-        type: 'button' === asProp ? 'button' : void 0,
-        ref: forwardedRef,
-        "aria-disabled": ariaDisabled ? 'true' : void 0,
-        "data-iui-disabled": disabledProp ? 'true' : void 0,
-        disabled: !!(htmlDisabled ?? (!isClient && disabledProp)) || void 0,
-        ...rest,
-        className: cx('iui-button-base', props.className),
-        onClick: handleIfEnabled(props.onClick),
-        onPointerDown: handleIfEnabled(props.onPointerDown),
-        onPointerUp: handleIfEnabled(props.onPointerUp)
-    });
+export const ButtonBase = React.forwardRef((props, forwardedRef) => {
+  let {
+    as: asProp = 'button',
+    disabled: disabledProp,
+    htmlDisabled,
+    ...rest
+  } = props;
+  let isClient = useIsClient();
+  let ariaDisabled =
+    disabledProp && !htmlDisabled && isClient && 'button' === asProp;
+  let handleIfEnabled = (handler) => (e) => {
+    if (disabledProp) return;
+    handler?.(e);
+  };
+  return React.createElement(Box, {
+    as: asProp,
+    type: 'button' === asProp ? 'button' : void 0,
+    ref: forwardedRef,
+    'aria-disabled': ariaDisabled ? 'true' : void 0,
+    'data-iui-disabled': disabledProp ? 'true' : void 0,
+    disabled: !!(htmlDisabled ?? (!isClient && disabledProp)) || void 0,
+    ...rest,
+    className: cx('iui-button-base', props.className),
+    onClick: handleIfEnabled(props.onClick),
+    onPointerDown: handleIfEnabled(props.onPointerDown),
+    onPointerUp: handleIfEnabled(props.onPointerUp),
+  });
 });
 ButtonBase.displayName = 'ButtonBase';

package/DEV-esm/utils/components/FocusTrap.js

@@ -1,37 +1,40 @@
 import * as React from 'react';
 import { getTabbableElements } from '../functions/focusable.js';
 import { mergeRefs } from '../hooks/useMergedRefs.js';
-export const FocusTrap = (props)=>{
-    let { children } = props;
-    let childRef = React.useRef();
-    let getFirstLastFocusables = ()=>{
-        let elements = getTabbableElements(childRef.current);
-        let firstElement = elements[0];
-        let lastElement = elements[(elements.length || 1) - 1];
-        return [
-            firstElement,
-            lastElement
-        ];
-    };
-    let onFirstFocus = (event)=>{
-        let [firstElement, lastElement] = getFirstLastFocusables();
-        if (event.relatedTarget === firstElement) lastElement?.focus();
-        else firstElement?.focus();
-    };
-    let onLastFocus = (event)=>{
-        let [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
-    }));
+export const FocusTrap = (props) => {
+  let { children } = props;
+  let childRef = React.useRef();
+  let getFirstLastFocusables = () => {
+    let elements = getTabbableElements(childRef.current);
+    let firstElement = elements[0];
+    let lastElement = elements[(elements.length || 1) - 1];
+    return [firstElement, lastElement];
+  };
+  let onFirstFocus = (event) => {
+    let [firstElement, lastElement] = getFirstLastFocusables();
+    if (event.relatedTarget === firstElement) lastElement?.focus();
+    else firstElement?.focus();
+  };
+  let onLastFocus = (event) => {
+    let [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/DEV-esm/utils/components/InputContainer.js

@@ -3,23 +3,56 @@ import cx from 'classnames';
 import { Box } from './Box.js';
 import { Label } from '../../core/Label/Label.js';
 import { StatusMessage } from '../../core/StatusMessage/StatusMessage.js';
-export const InputContainer = React.forwardRef((props, forwardedRef)=>{
-    let { 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' : void 0,
-        style: style,
-        ref: forwardedRef,
-        ...rest
-    }, label && React.createElement(Label, {
-        as: inputId && 'label' !== props.as ? 'label' : 'div',
-        required: required,
-        disabled: disabled,
-        htmlFor: inputId,
-        id: labelId
-    }, label), children, statusMessage ? statusMessage : message && React.createElement(StatusMessage, {
-        startIcon: icon,
-        status: status
-    }, message));
+export const InputContainer = React.forwardRef((props, forwardedRef) => {
+  let {
+    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' : void 0,
+      style: style,
+      ref: forwardedRef,
+      ...rest,
+    },
+    label &&
+      React.createElement(
+        Label,
+        {
+          as: inputId && 'label' !== props.as ? 'label' : 'div',
+          required: required,
+          disabled: disabled,
+          htmlFor: inputId,
+          id: labelId,
+        },
+        label,
+      ),
+    children,
+    statusMessage
+      ? statusMessage
+      : message &&
+          React.createElement(
+            StatusMessage,
+            {
+              startIcon: icon,
+              status: status,
+            },
+            message,
+          ),
+  );
 });

package/DEV-esm/utils/components/InputFlexContainer.js

@@ -3,33 +3,37 @@ import cx from 'classnames';
 import { Box } from './Box.js';
 import { Icon } from '../../core/Icon/Icon.js';
 import { IconButton } from '../../core/Buttons/IconButton.js';
-export const InputFlexContainer = React.forwardRef((props, ref)=>{
-    let { 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' : void 0,
-        ref: ref,
-        style: style,
-        ...rest
-    }, children);
+export const InputFlexContainer = React.forwardRef((props, ref) => {
+  let { 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' : void 0,
+      ref: ref,
+      style: style,
+      ...rest,
+    },
+    children,
+  );
 });
-export const InputFlexContainerButton = React.forwardRef((props, ref)=>{
-    let { className, ...rest } = props;
-    return React.createElement(IconButton, {
-        ref: ref,
-        className: cx('iui-input-flex-container-icon', className),
-        styleType: "borderless",
-        ...rest
-    });
+export const InputFlexContainerButton = React.forwardRef((props, ref) => {
+  let { className, ...rest } = props;
+  return React.createElement(IconButton, {
+    ref: ref,
+    className: cx('iui-input-flex-container-icon', className),
+    styleType: 'borderless',
+    ...rest,
+  });
 });
-export const InputFlexContainerIcon = React.forwardRef((props, ref)=>{
-    let { className, ...rest } = props;
-    return React.createElement(Icon, {
-        ref: ref,
-        className: cx('iui-input-flex-container-icon', className),
-        padded: true,
-        ...rest
-    });
+export const InputFlexContainerIcon = React.forwardRef((props, ref) => {
+  let { className, ...rest } = props;
+  return React.createElement(Icon, {
+    ref: ref,
+    className: cx('iui-input-flex-container-icon', className),
+    padded: true,
+    ...rest,
+  });
 });

package/DEV-esm/utils/components/LineClamp.js

@@ -1,18 +1,27 @@
 import * as React from 'react';
 import { Box } from './Box.js';
 import { ShadowRoot } from './ShadowRoot.js';
-export const LineClamp = React.forwardRef((props, forwardedRef)=>{
-    let { 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);
+export const LineClamp = React.forwardRef((props, forwardedRef) => {
+  let { 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,
+  );
 });
 let css = `
   :host {

package/DEV-esm/utils/components/MiddleTextTruncation.js

@@ -1,27 +1,31 @@
 import * as React from 'react';
 import { useOverflow } from '../hooks/useOverflow.js';
 let ELLIPSIS_CHAR = '…';
-export const MiddleTextTruncation = (props)=>{
-    let { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
-    let [ref, visibleCount] = useOverflow(text);
-    let truncatedText = React.useMemo(()=>{
-        if (visibleCount < text.length) return `${text.substring(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
-        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);
+export const MiddleTextTruncation = (props) => {
+  let { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
+  let [ref, visibleCount] = useOverflow(text);
+  let truncatedText = React.useMemo(() => {
+    if (visibleCount < text.length)
+      return `${text.substring(
+        0,
+        visibleCount - endCharsCount - ELLIPSIS_CHAR.length,
+      )}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
+    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,
+  );
 };
 MiddleTextTruncation.displayName = 'MiddleTextTruncation';

package/DEV-esm/utils/components/Portal.js

@@ -4,16 +4,16 @@ import { useIsClient } from '../hooks/useIsClient.js';
 import { atom } from 'jotai';
 import { useScopedAtom } from '../providers/ScopeProvider.js';
 export const portalContainerAtom = atom(void 0);
-export const Portal = (props)=>{
-    let { portal = true, children } = props;
-    let isClient = useIsClient();
-    let portalTo = usePortalTo(portal);
-    if (!isClient) return null;
-    return portalTo ? ReactDOM.createPortal(children, portalTo) : children;
+export const Portal = (props) => {
+  let { portal = true, children } = props;
+  let isClient = useIsClient();
+  let portalTo = usePortalTo(portal);
+  if (!isClient) return null;
+  return portalTo ? ReactDOM.createPortal(children, portalTo) : children;
 };
-export const usePortalTo = (portal)=>{
-    let [portalContainer] = useScopedAtom(portalContainerAtom);
-    if ('boolean' == typeof portal) return portal ? portalContainer : null;
-    let portalTo = 'function' == typeof portal.to ? portal.to() : portal.to;
-    return portalTo ?? portalContainer;
+export const usePortalTo = (portal) => {
+  let [portalContainer] = useScopedAtom(portalContainerAtom);
+  if ('boolean' == typeof portal) return portal ? portalContainer : null;
+  let portalTo = 'function' == typeof portal.to ? portal.to() : portal.to;
+  return portalTo ?? portalContainer;
 };