@itwin/itwinui-react 3.0.3 → 3.0.5

package/cjs/core/utils/color/index.js

@@ -1,8 +1,8 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const tslib_1 = require('tslib');
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-tslib_1.__exportStar(require('./ColorValue.js'), exports);
+tslib_1.__exportStar(require("./ColorValue.js"), exports);

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

@@ -1,14 +1,14 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoclearingHiddenLiveRegion = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const VisuallyHidden_js_1 = require('../../VisuallyHidden/VisuallyHidden.js');
-const index_js_1 = require('../functions/index.js');
+const React = tslib_1.__importStar(require("react"));
+const VisuallyHidden_js_1 = require("../../VisuallyHidden/VisuallyHidden.js");
+const index_js_1 = require("../functions/index.js");
 /**
  * Visually-hidden polite live region that automatically clears itself after 5 seconds.
  *
@@ -18,19 +18,12 @@ const index_js_1 = require('../functions/index.js');
  * @private
  */
 const AutoclearingHiddenLiveRegion = ({ text = '' }) => {
-  const [maybeText, setMaybeText] = React.useState(text);
-  React.useEffect(() => {
-    setMaybeText(text);
-    const timeout = (0, index_js_1.getWindow)()?.setTimeout(
-      () => setMaybeText(''),
-      5000,
-    );
-    return () => void (0, index_js_1.getWindow)()?.clearTimeout(timeout);
-  }, [text]);
-  return React.createElement(
-    VisuallyHidden_js_1.VisuallyHidden,
-    { as: 'div', 'aria-live': 'polite', 'aria-atomic': 'true' },
-    maybeText,
-  );
+    const [maybeText, setMaybeText] = React.useState(text);
+    React.useEffect(() => {
+        setMaybeText(text);
+        const timeout = (0, index_js_1.getWindow)()?.setTimeout(() => setMaybeText(''), 5000);
+        return () => void (0, index_js_1.getWindow)()?.clearTimeout(timeout);
+    }, [text]);
+    return (React.createElement(VisuallyHidden_js_1.VisuallyHidden, { as: 'div', "aria-live": 'polite', "aria-atomic": 'true' }, maybeText));
 };
 exports.AutoclearingHiddenLiveRegion = AutoclearingHiddenLiveRegion;

package/cjs/core/utils/components/Box.js

@@ -1,11 +1,11 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Box = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const polymorphic_js_1 = require('../functions/polymorphic.js');
+const polymorphic_js_1 = require("../functions/polymorphic.js");
 /**
  * Polymorphic component that renders a div element by default.
  * Intended to be used as a base for other components.

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

@@ -1,46 +1,28 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonBase = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const Box_js_1 = require('./Box.js');
-const useIsClient_js_1 = require('../hooks/useIsClient.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Box_js_1 = require("./Box.js");
+const useIsClient_js_1 = require("../hooks/useIsClient.js");
 exports.ButtonBase = React.forwardRef((props, forwardedRef) => {
-  const {
-    as: asProp = 'button',
-    disabled: disabledProp,
-    htmlDisabled,
-    ...rest
-  } = props;
-  const isClient = (0, useIsClient_js_1.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_js_1.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: (0, classnames_1.default)('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 = (0, useIsClient_js_1.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_js_1.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: (0, classnames_1.default)('iui-button-base', props.className), onClick: handleIfEnabled(props.onClick), onPointerDown: handleIfEnabled(props.onPointerDown), onPointerUp: handleIfEnabled(props.onPointerUp) }));
 });
 exports.ButtonBase.displayName = 'ButtonBase';

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

@@ -1,60 +1,51 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.FocusTrap = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const focusable_js_1 = require('../functions/focusable.js');
-const useMergedRefs_js_1 = require('../hooks/useMergedRefs.js');
+const React = tslib_1.__importStar(require("react"));
+const focusable_js_1 = require("../functions/focusable.js");
+const useMergedRefs_js_1 = require("../hooks/useMergedRefs.js");
 /**
  * Trap focus within child container.
  * Used for modals and dialogs.
  */
 const FocusTrap = (props) => {
-  const { children } = props;
-  const childRef = React.useRef();
-  const getFirstLastFocusables = () => {
-    const elements = (0, focusable_js_1.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: (0, useMergedRefs_js_1.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 = (0, focusable_js_1.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: (0, useMergedRefs_js_1.mergeRefs)(children.ref, childRef),
+        }),
+        React.createElement("div", { tabIndex: 0, onFocus: onLastFocus, "aria-hidden": true })));
 };
 exports.FocusTrap = FocusTrap;
 exports.default = exports.FocusTrap;

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

@@ -1,71 +1,32 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputContainer = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const Box_js_1 = require('./Box.js');
-const Label_js_1 = require('../../Label/Label.js');
-const StatusMessage_js_1 = require('../../StatusMessage/StatusMessage.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Box_js_1 = require("./Box.js");
+const Label_js_1 = require("../../Label/Label.js");
+const StatusMessage_js_1 = require("../../StatusMessage/StatusMessage.js");
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
  */
 exports.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_js_1.Box,
-    {
-      className: (0, classnames_1.default)('iui-input-grid', className),
-      'data-iui-status': status,
-      'data-iui-label-placement': isLabelInline ? 'inline' : undefined,
-      style: style,
-      ref: forwardedRef,
-      ...rest,
-    },
-    label &&
-      React.createElement(
-        Label_js_1.Label,
+    const { label, disabled, required, status, message, icon, isLabelInline, children, className, style, statusMessage, inputId, labelId, ...rest } = props;
+    return (React.createElement(Box_js_1.Box, { className: (0, classnames_1.default)('iui-input-grid', className), "data-iui-status": status, "data-iui-label-placement": isLabelInline ? 'inline' : undefined, style: style, ref: forwardedRef, ...rest },
+        label && (React.createElement(Label_js_1.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_js_1.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_js_1.StatusMessage, { startIcon: icon, status: status }, message))));
 });

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

@@ -1,35 +1,19 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputFlexContainer = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const react_1 = tslib_1.__importDefault(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const Box_js_1 = require('./Box.js');
+const react_1 = tslib_1.__importDefault(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Box_js_1 = require("./Box.js");
 /**
  * Utility component for input container with display flex abilities.
  * @private
  */
 exports.InputFlexContainer = react_1.default.forwardRef((props, ref) => {
-  const { isDisabled, status, children, className, size, style, ...rest } =
-    props;
-  return react_1.default.createElement(
-    Box_js_1.Box,
-    {
-      className: (0, classnames_1.default)(
-        '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_1.default.createElement(Box_js_1.Box, { className: (0, classnames_1.default)('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/cjs/core/utils/components/MiddleTextTruncation.js

@@ -1,13 +1,13 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.MiddleTextTruncation = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const useOverflow_js_1 = require('../hooks/useOverflow.js');
+const React = tslib_1.__importStar(require("react"));
+const useOverflow_js_1 = require("../hooks/useOverflow.js");
 const ELLIPSIS_CHAR = '…';
 /**
  * Truncates text with the ellipsis in the middle,
@@ -26,33 +26,23 @@ const ELLIPSIS_CHAR = '…';
  * />
  */
 const MiddleTextTruncation = (props) => {
-  const { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
-  const [ref, visibleCount] = (0, useOverflow_js_1.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] = (0, useOverflow_js_1.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));
 };
 exports.MiddleTextTruncation = MiddleTextTruncation;
 exports.default = exports.MiddleTextTruncation;

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

@@ -1,16 +1,16 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Portal = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const ReactDOM = tslib_1.__importStar(require('react-dom'));
-const ThemeContext_js_1 = require('../../ThemeProvider/ThemeContext.js');
-const dom_js_1 = require('../functions/dom.js');
-const useIsClient_js_1 = require('../hooks/useIsClient.js');
+const React = tslib_1.__importStar(require("react"));
+const ReactDOM = tslib_1.__importStar(require("react-dom"));
+const ThemeContext_js_1 = require("../../ThemeProvider/ThemeContext.js");
+const dom_js_1 = require("../functions/dom.js");
+const useIsClient_js_1 = require("../hooks/useIsClient.js");
 // ----------------------------------------------------------------------------
 /**
  * Helper component that portals children according to the following conditions:
@@ -22,22 +22,20 @@ const useIsClient_js_1 = require('../hooks/useIsClient.js');
  * @private
  */
 const Portal = (props) => {
-  const { portal = true, children } = props;
-  const isClient = (0, useIsClient_js_1.useIsClient)();
-  const portalTo = usePortalTo(portal);
-  if (!isClient) {
-    return null;
-  }
-  return portalTo ? ReactDOM.createPortal(children, portalTo) : children;
+    const { portal = true, children } = props;
+    const isClient = (0, useIsClient_js_1.useIsClient)();
+    const portalTo = usePortalTo(portal);
+    if (!isClient) {
+        return null;
+    }
+    return portalTo ? ReactDOM.createPortal(children, portalTo) : children;
 };
 exports.Portal = Portal;
 // ----------------------------------------------------------------------------
 const usePortalTo = (portal) => {
-  const themeInfo = React.useContext(ThemeContext_js_1.ThemeContext);
-  if (typeof portal === 'boolean') {
-    return portal
-      ? themeInfo?.portalContainer ?? (0, dom_js_1.getDocument)()?.body
-      : null;
-  }
-  return typeof portal.to === 'function' ? portal.to() : portal.to;
+    const themeInfo = React.useContext(ThemeContext_js_1.ThemeContext);
+    if (typeof portal === 'boolean') {
+        return portal ? themeInfo?.portalContainer ?? (0, dom_js_1.getDocument)()?.body : null;
+    }
+    return typeof portal.to === 'function' ? portal.to() : portal.to;
 };