@itwin/itwinui-react 3.0.0-dev.1 → 3.0.0-dev.11

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

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

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

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { VisuallyHidden } from './VisuallyHidden.js';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.js';
 import { getWindow } from '../functions/index.js';
 /**
  * Visually-hidden polite live region that automatically clears itself after 5 seconds.
@@ -14,12 +14,15 @@ import { getWindow } from '../functions/index.js';
  * @private
  */
 export const AutoclearingHiddenLiveRegion = ({ text = '' }) => {
-    const [maybeText, setMaybeText] = React.useState(text);
-    React.useEffect(() => {
-        var _a;
-        setMaybeText(text);
-        const timeout = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.setTimeout(() => setMaybeText(''), 5000);
-        return () => { var _a; return void ((_a = getWindow()) === null || _a === void 0 ? void 0 : _a.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.d.ts

@@ -0,0 +1,14 @@
+import type { PolymorphicForwardRefComponent } from '../props.js';
+export declare const ButtonBase: PolymorphicForwardRefComponent<"button", ButtonBaseProps>;
+type ButtonBaseProps = {
+    /**
+     * Custom `disabled` prop that keeps the button focusable, prevents
+     * clicks, applied disabled styling, and adds `aria-disabled`.
+     */
+    disabled?: boolean;
+    /**
+     * Built-in html `disabled` attribute
+     */
+    htmlDisabled?: boolean;
+};
+export {};

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

@@ -0,0 +1,42 @@
+/*---------------------------------------------------------------------------------------------
+ * 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),
+  });
+});
+ButtonBase.displayName = 'ButtonBase';

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

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

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

@@ -10,37 +10,46 @@ 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 === null || lastElement === void 0 ? void 0 : lastElement.focus();
-        }
-        else {
-            firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-        }
-    };
-    const onLastFocus = (event) => {
-        const [firstElement, lastElement] = getFirstLastFocusables();
-        if (event.relatedTarget === lastElement) {
-            firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-        }
-        else {
-            lastElement === null || lastElement === void 0 ? void 0 : 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.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-export declare type InputContainerProps<T extends React.ElementType = 'div'> = {
-    as?: T;
+import type { PolymorphicForwardRefComponent } from '../props.js';
+export type InputContainerProps = {
     label?: React.ReactNode;
     disabled?: boolean;
     required?: boolean;
@@ -8,13 +8,12 @@ export declare type InputContainerProps<T extends React.ElementType = 'div'> = {
     message?: React.ReactNode;
     icon?: JSX.Element;
     isLabelInline?: boolean;
-    isIconInline?: boolean;
     statusMessage?: React.ReactNode;
     inputId?: string;
     labelId?: string;
-} & React.ComponentPropsWithoutRef<T>;
+};
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
  */
-export declare const InputContainer: <T extends React.ElementType<any> = "div">(props: InputContainerProps<T>) => JSX.Element;
+export declare const InputContainer: PolymorphicForwardRefComponent<"div", InputContainerProps>;

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

@@ -5,24 +5,63 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from './Box.js';
+import { Label } from '../../Label/Label.js';
+import { StatusMessage } from '../../StatusMessage/StatusMessage.js';
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
  */
-export const InputContainer = (props) => {
-    const { label, disabled, required, status, message, icon, isLabelInline, isIconInline, children, className, style, statusMessage, inputId, labelId, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-input-container', {
-            'iui-disabled': disabled,
-            [`iui-${status}`]: !!status,
-            'iui-inline-label': isLabelInline,
-            'iui-inline-icon': isIconInline,
-            'iui-with-message': (!!message || !!icon || !!statusMessage) && !isLabelInline,
-        }, className), style: style, ...rest },
-        label && (React.createElement(Box, { as: inputId && props.as !== 'label' ? 'label' : 'div', className: cx('iui-label', {
-                'iui-required': required,
-            }), htmlFor: inputId, id: labelId }, label)),
-        children,
-        statusMessage ? (statusMessage) : (React.createElement(React.Fragment, null,
-            icon && (React.createElement(Box, { as: 'span', className: 'iui-input-icon', "aria-hidden": true }, icon)),
-            message && !isLabelInline && (React.createElement(Box, { className: 'iui-message' }, message))))));
-};
+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,
+          ),
+  );
+});

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

@@ -1,7 +1,8 @@
 import type { PolymorphicForwardRefComponent } from '../props.js';
-export declare type InputFlexContainerProps = {
+export type InputFlexContainerProps = {
     isDisabled?: boolean;
     status?: 'positive' | 'warning' | 'negative';
+    size?: 'small' | 'large';
 };
 /**
  * Utility component for input container with display flex abilities.

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

@@ -10,6 +10,19 @@ import { Box } from './Box.js';
  * @private
  */
 export const InputFlexContainer = React.forwardRef((props, ref) => {
-    const { isDisabled, status, children, className, style, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-input-flex-container', className), "data-iui-status": status, "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.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { CommonProps } from '../props.js';
-export declare type MiddleTextTruncationProps = {
+export type MiddleTextTruncationProps = {
     /**
      * Text to truncate.
      */
@@ -31,5 +31,5 @@ export declare type MiddleTextTruncationProps = {
  *   )}
  * />
  */
-export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => JSX.Element;
+export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => React.JSX.Element;
 export default MiddleTextTruncation;

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

@@ -22,23 +22,32 @@ const ELLIPSIS_CHAR = '…';
  * />
  */
 export const MiddleTextTruncation = (props) => {
-    var _a;
-    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 }, (_a = textRenderer === null || textRenderer === void 0 ? void 0 : textRenderer(truncatedText, text)) !== null && _a !== void 0 ? _a : 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.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+export type PortalProps = {
+    /**
+     * Where should the element be portaled to?
+     *
+     * If true, it will portal into nearest ThemeContext.portalContainer.
+     *
+     * If false, it will not be portaled.
+     *
+     * Otherwise, it will portal to the element passed to `to`.
+     *
+     * @default true
+     */
+    portal?: boolean | {
+        to: HTMLElement | (() => HTMLElement);
+    };
+};
+/**
+ * Helper component that portals children according to the following conditions:
+ *   - renders null on server
+ *   - if `portal` is set to true, renders into nearest ThemeContext.portalContainer
+ *   - if `portal` is set to false, renders as-is without portal
+ *   - otherwise renders into `portal.to` (can be an element or a function)
+ *
+ * @private
+ */
+export declare const Portal: (props: React.PropsWithChildren<PortalProps>) => React.ReactNode;

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

@@ -0,0 +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 * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { ThemeContext } from '../../ThemeProvider/ThemeContext.js';
+import { getDocument } from '../functions/dom.js';
+import { useIsClient } from '../hooks/useIsClient.js';
+// ----------------------------------------------------------------------------
+/**
+ * Helper component that portals children according to the following conditions:
+ *   - renders null on server
+ *   - if `portal` is set to true, renders into nearest ThemeContext.portalContainer
+ *   - if `portal` is set to false, renders as-is without portal
+ *   - otherwise renders into `portal.to` (can be an element or a function)
+ *
+ * @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 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;
+};

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare type ResizerProps = {
+export type ResizerProps = {
     /**
      * Ref of the element that is being resized.
      */
@@ -32,5 +32,5 @@ export declare type ResizerProps = {
  *   </div>
  * );
  */
-export declare const Resizer: (props: ResizerProps) => JSX.Element;
+export declare const Resizer: (props: ResizerProps) => React.JSX.Element;
 export default Resizer;