@itwin/itwinui-react 3.0.3 → 3.0.5

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

@@ -14,15 +14,11 @@ import { getWindow } from '../functions/index.js';
  * @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/core/utils/components/ButtonBase.js

@@ -7,36 +7,18 @@ 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 && // 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) }));
 });
 ButtonBase.displayName = 'ButtonBase';

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

@@ -10,46 +10,37 @@ import { mergeRefs } from '../hooks/useMergedRefs.js';
  * 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 })));
 };
 export default FocusTrap;

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

@@ -12,56 +12,17 @@ import { StatusMessage } from '../../StatusMessage/StatusMessage.js';
  * @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,
+    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,
-          ),
-  );
+        , { 
+            // 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))));
 });

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

@@ -10,19 +10,6 @@ import { Box } from './Box.js';
  * @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));
 });

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

@@ -22,32 +22,22 @@ const ELLIPSIS_CHAR = '…';
  * />
  */
 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));
 };
 export default MiddleTextTruncation;

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

@@ -18,19 +18,19 @@ import { useIsClient } from '../hooks/useIsClient.js';
  * @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;
 };
 // ----------------------------------------------------------------------------
 const usePortalTo = (portal) => {
-  const themeInfo = React.useContext(ThemeContext);
-  if (typeof portal === 'boolean') {
-    return portal ? themeInfo?.portalContainer ?? getDocument()?.body : null;
-  }
-  return typeof portal.to === 'function' ? portal.to() : portal.to;
+    const themeInfo = React.useContext(ThemeContext);
+    if (typeof portal === 'boolean') {
+        return portal ? themeInfo?.portalContainer ?? getDocument()?.body : null;
+    }
+    return typeof portal.to === 'function' ? portal.to() : portal.to;
 };