@itwin/itwinui-react 3.11.2 → 3.12.0

package/cjs/utils/hooks/useDragAndDrop.js

@@ -1,127 +1,127 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDragAndDrop = 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 React = __importStar(require("react"));
-const index_js_1 = require("../functions/index.js");
-const useEventListener_js_1 = require("./useEventListener.js");
-const useResizeObserver_js_1 = require("./useResizeObserver.js");
+Object.defineProperty(exports, 'useDragAndDrop', {
+  enumerable: true,
+  get: function () {
+    return useDragAndDrop;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../functions/index.js');
+const _useEventListener = require('./useEventListener.js');
+const _useResizeObserver = require('./useResizeObserver.js');
 const getContainerRect = (containerRef) => {
-    const containerRect = containerRef?.current?.getBoundingClientRect();
-    return {
-        top: containerRect?.top ?? 0,
-        right: containerRect?.right ?? (0, index_js_1.getWindow)()?.innerWidth ?? 0,
-        bottom: containerRect?.bottom ?? (0, index_js_1.getWindow)()?.innerHeight ?? 0,
-        left: containerRect?.left ?? 0,
-    };
+  const containerRect = containerRef?.current?.getBoundingClientRect();
+  return {
+    top: containerRect?.top ?? 0,
+    right: containerRect?.right ?? (0, _index.getWindow)()?.innerWidth ?? 0,
+    bottom: containerRect?.bottom ?? (0, _index.getWindow)()?.innerHeight ?? 0,
+    left: containerRect?.left ?? 0,
+  };
 };
-/**
- * Helper hook that handles elements drag logic.
- * @param elementRef Element ref that is draggable.
- * @param containerRect Bounding rectangle of container element that element can't go outside. If not passed window is used as a container.
- * @returns
- * `onPointerDown` - handler that is called when pointer is down and handles all the dragging logic.
- * `transform` - current transform of the element, it is used to preserve drag position when element visibility is being toggled.
- */
 const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
-    const grabOffsetX = React.useRef(0);
-    const grabOffsetY = React.useRef(0);
-    const translateX = React.useRef();
-    const translateY = React.useRef();
-    const containerRectRef = React.useRef(getContainerRect(containerRef));
-    const adjustTransform = React.useCallback(() => {
-        if (!elementRef.current || !enabled) {
-            return;
-        }
-        const { top, right, bottom, left } = elementRef.current?.getBoundingClientRect();
-        let [newTranslateX, newTranslateY] = (0, index_js_1.getTranslateValuesFromElement)(elementRef.current);
-        containerRectRef.current = getContainerRect(containerRef);
-        if (bottom > containerRectRef.current.bottom) {
-            newTranslateY -= bottom - containerRectRef.current.bottom;
-        }
-        if (top < containerRectRef.current.top) {
-            newTranslateY += containerRectRef.current.top - top;
-        }
-        if (right > containerRectRef.current.right) {
-            newTranslateX -= right - containerRectRef.current.right;
-        }
-        if (left < containerRectRef.current.left) {
-            newTranslateX += containerRectRef.current.left - left;
-        }
-        translateX.current = newTranslateX;
-        translateY.current = newTranslateY;
-        elementRef.current.style.transform = `translate(${newTranslateX}px, ${newTranslateY}px)`;
-    }, [containerRef, elementRef, enabled]);
-    const [resizeRef, resizeObserver] = (0, useResizeObserver_js_1.useResizeObserver)(adjustTransform);
-    resizeRef(containerRef?.current);
-    React.useEffect(() => {
-        return () => {
-            resizeObserver?.disconnect();
-        };
-    }, [resizeObserver]);
-    (0, useEventListener_js_1.useEventListener)('resize', () => {
-        adjustTransform();
-        if (translateX.current != null && translateY.current != null) {
-            setTransform(`translate(${translateX.current}px, ${translateY.current}px)`);
-        }
-    }, (0, index_js_1.getWindow)());
-    const [transform, setTransform] = React.useState('');
-    const onPointerMove = React.useRef((event) => {
-        if (!elementRef.current) {
-            return;
-        }
-        const newTranslateX = event.clientX - grabOffsetX.current;
-        const newTranslateY = event.clientY - grabOffsetY.current;
-        elementRef.current.style.transform = `translate(${newTranslateX}px, ${newTranslateY}px)`;
-        adjustTransform();
-    });
-    const originalUserSelect = React.useRef('');
-    const onPointerDown = React.useCallback((e) => {
-        if (!elementRef.current || e.button !== 0 || !enabled) {
-            return;
-        }
-        const [x, y] = (0, index_js_1.getTranslateValuesFromElement)(elementRef.current);
-        grabOffsetX.current = e.clientX - x;
-        grabOffsetY.current = e.clientY - y;
-        originalUserSelect.current = elementRef.current.style.userSelect;
-        // Prevents from selecting inner content when dragging.
-        elementRef.current.style.userSelect = 'none';
-        const ownerDocument = elementRef.current.ownerDocument || document;
-        ownerDocument.addEventListener('pointermove', onPointerMove.current);
-        ownerDocument.addEventListener('pointerup', () => {
-            setTransform(`translate(${translateX.current}px, ${translateY.current}px)`);
-            ownerDocument.removeEventListener('pointermove', onPointerMove.current);
-            if (elementRef.current) {
-                elementRef.current.style.userSelect = originalUserSelect.current;
-            }
-        }, { once: true });
-    }, [elementRef, enabled]);
-    return { onPointerDown, transform };
+  const grabOffsetX = _react.useRef(0);
+  const grabOffsetY = _react.useRef(0);
+  const translateX = _react.useRef();
+  const translateY = _react.useRef();
+  const containerRectRef = _react.useRef(getContainerRect(containerRef));
+  const adjustTransform = _react.useCallback(() => {
+    if (!elementRef.current || !enabled) {
+      return;
+    }
+    const { top, right, bottom, left } =
+      elementRef.current?.getBoundingClientRect();
+    let [newTranslateX, newTranslateY] = (0,
+    _index.getTranslateValuesFromElement)(elementRef.current);
+    containerRectRef.current = getContainerRect(containerRef);
+    if (bottom > containerRectRef.current.bottom) {
+      newTranslateY -= bottom - containerRectRef.current.bottom;
+    }
+    if (top < containerRectRef.current.top) {
+      newTranslateY += containerRectRef.current.top - top;
+    }
+    if (right > containerRectRef.current.right) {
+      newTranslateX -= right - containerRectRef.current.right;
+    }
+    if (left < containerRectRef.current.left) {
+      newTranslateX += containerRectRef.current.left - left;
+    }
+    translateX.current = newTranslateX;
+    translateY.current = newTranslateY;
+    elementRef.current.style.transform = `translate(${newTranslateX}px, ${newTranslateY}px)`;
+  }, [containerRef, elementRef, enabled]);
+  const [resizeRef, resizeObserver] = (0, _useResizeObserver.useResizeObserver)(
+    adjustTransform,
+  );
+  resizeRef(containerRef?.current);
+  _react.useEffect(() => {
+    return () => {
+      resizeObserver?.disconnect();
+    };
+  }, [resizeObserver]);
+  (0, _useEventListener.useEventListener)(
+    'resize',
+    () => {
+      adjustTransform();
+      if (translateX.current != null && translateY.current != null) {
+        setTransform(
+          `translate(${translateX.current}px, ${translateY.current}px)`,
+        );
+      }
+    },
+    (0, _index.getWindow)(),
+  );
+  const [transform, setTransform] = _react.useState('');
+  const onPointerMove = _react.useRef((event) => {
+    if (!elementRef.current) {
+      return;
+    }
+    const newTranslateX = event.clientX - grabOffsetX.current;
+    const newTranslateY = event.clientY - grabOffsetY.current;
+    elementRef.current.style.transform = `translate(${newTranslateX}px, ${newTranslateY}px)`;
+    adjustTransform();
+  });
+  const originalUserSelect = _react.useRef('');
+  const onPointerDown = _react.useCallback(
+    (e) => {
+      if (!elementRef.current || e.button !== 0 || !enabled) {
+        return;
+      }
+      const [x, y] = (0, _index.getTranslateValuesFromElement)(
+        elementRef.current,
+      );
+      grabOffsetX.current = e.clientX - x;
+      grabOffsetY.current = e.clientY - y;
+      originalUserSelect.current = elementRef.current.style.userSelect;
+      elementRef.current.style.userSelect = 'none';
+      const ownerDocument = elementRef.current.ownerDocument || document;
+      ownerDocument.addEventListener('pointermove', onPointerMove.current);
+      ownerDocument.addEventListener(
+        'pointerup',
+        () => {
+          setTransform(
+            `translate(${translateX.current}px, ${translateY.current}px)`,
+          );
+          ownerDocument.removeEventListener(
+            'pointermove',
+            onPointerMove.current,
+          );
+          if (elementRef.current) {
+            elementRef.current.style.userSelect = originalUserSelect.current;
+          }
+        },
+        {
+          once: true,
+        },
+      );
+    },
+    [elementRef, enabled],
+  );
+  return {
+    onPointerDown,
+    transform,
+  };
 };
-exports.useDragAndDrop = useDragAndDrop;

package/cjs/utils/hooks/useEventListener.js

@@ -1,61 +1,28 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useEventListener = 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 React = __importStar(require("react"));
-/**
- * Hook that adds and removes Event listeners.
- * @example
- *  useEventListener(
- *     'pointerup',
- *     handlePointerUp,
- *     containerRef.current?.ownerDocument,
- *  );
- */
+Object.defineProperty(exports, 'useEventListener', {
+  enumerable: true,
+  get: function () {
+    return useEventListener;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
 const useEventListener = (eventName, handler, element) => {
-    // Based on published hook https://usehooks.com/useEventListener/.
-    const savedHandler = React.useRef();
-    // Update reference if handler changes. This allows our effect below to
-    // always use latest handler without us needing to pass it in effect deps array
-    // and potentially cause effect to re-run every render.
-    React.useEffect(() => {
-        savedHandler.current = handler;
-    }, [handler]);
-    React.useEffect(() => {
-        if (!element) {
-            return;
-        }
-        const eventListener = (event) => savedHandler.current?.(event);
-        element.addEventListener(eventName, eventListener);
-        return () => {
-            element.removeEventListener(eventName, eventListener);
-        };
-    }, [eventName, element]);
+  const savedHandler = _react.useRef();
+  _react.useEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+  _react.useEffect(() => {
+    if (!element) {
+      return;
+    }
+    const eventListener = (event) => savedHandler.current?.(event);
+    element.addEventListener(eventName, eventListener);
+    return () => {
+      element.removeEventListener(eventName, eventListener);
+    };
+  }, [eventName, element]);
 };
-exports.useEventListener = useEventListener;

package/cjs/utils/hooks/useGlobals.d.ts

@@ -7,9 +7,9 @@ import { ThemeContext } from '../../core/ThemeProvider/ThemeContext.js';
  * @private
  */
 export declare const useGlobals: () => {
-    theme?: import("../../index.js").ThemeType | undefined;
-    themeOptions?: import("../../core/ThemeProvider/ThemeProvider.js").ThemeOptions | undefined;
-    portalContainer?: HTMLElement | null | undefined;
+    theme?: import("../../index.js").ThemeType;
+    themeOptions?: import("../../core/ThemeProvider/ThemeProvider.js").ThemeOptions;
+    portalContainer?: HTMLElement | null;
 } | undefined;
 /** Shows console error if ThemeProvider is not used */
 export declare const useThemeProviderWarning: (themeContext: React.ContextType<typeof ThemeContext>) => void;

package/cjs/utils/hooks/useGlobals.js

@@ -1,74 +1,58 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useThemeProviderWarning = exports.useGlobals = 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 React = __importStar(require("react"));
-const ThemeContext_js_1 = require("../../core/ThemeProvider/ThemeContext.js");
-const dev_js_1 = require("../functions/dev.js");
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  useGlobals: function () {
+    return useGlobals;
+  },
+  useThemeProviderWarning: function () {
+    return useThemeProviderWarning;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _ThemeContext = require('../../core/ThemeProvider/ThemeContext.js');
+const _dev = require('../functions/dev.js');
 const didLogWarning = {
-    fontSize: false,
-    themeProvider: false,
+  fontSize: false,
+  themeProvider: false,
 };
-/**
- * Hook used in every component for any shared setup and side effects.
- * Returns the nearest ThemeContext.
- *
- * @private
- */
 const useGlobals = () => {
-    const themeContext = React.useContext(ThemeContext_js_1.ThemeContext);
-    (0, exports.useThemeProviderWarning)(themeContext);
-    useRootFontSizeWarning();
-    return themeContext;
+  const themeContext = _react.useContext(_ThemeContext.ThemeContext);
+  useThemeProviderWarning(themeContext);
+  useRootFontSizeWarning();
+  return themeContext;
 };
-exports.useGlobals = useGlobals;
-// ----------------------------------------------------------------------------
-/** Shows console error if ThemeProvider is not used */
 const useThemeProviderWarning = (themeContext) => {
-    React.useEffect(() => {
-        if (dev_js_1.isDev && !didLogWarning.themeProvider && !themeContext) {
-            console.error('iTwinUI components must be used within a tree wrapped in a ThemeProvider.');
-            didLogWarning.themeProvider = true;
-        }
-    }, [themeContext]);
+  _react.useEffect(() => {
+    if (_dev.isDev && !didLogWarning.themeProvider && !themeContext) {
+      console.error(
+        'iTwinUI components must be used within a tree wrapped in a ThemeProvider.',
+      );
+      didLogWarning.themeProvider = true;
+    }
+  }, [themeContext]);
 };
-exports.useThemeProviderWarning = useThemeProviderWarning;
-// ----------------------------------------------------------------------------
-/** Shows console error if the page changes the root font size */
 const useRootFontSizeWarning = () => {
-    React.useEffect(() => {
-        if (dev_js_1.isDev && !didLogWarning.fontSize) {
-            const rootFontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
-            if (rootFontSize < 16) {
-                console.error('Root font size must not be overridden. \nSee https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#relative-font-size');
-            }
-            didLogWarning.fontSize = true;
-        }
-    }, []);
+  _react.useEffect(() => {
+    if (_dev.isDev && !didLogWarning.fontSize) {
+      const rootFontSize = parseInt(
+        getComputedStyle(document.documentElement).fontSize,
+      );
+      if (rootFontSize < 16) {
+        console.error(
+          'Root font size must not be overridden. \nSee https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#relative-font-size',
+        );
+      }
+      didLogWarning.fontSize = true;
+    }
+  }, []);
 };

package/cjs/utils/hooks/useId.js

@@ -1,45 +1,21 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useId = void 0;
-const React = __importStar(require("react"));
-const numbers_js_1 = require("../functions/numbers.js");
-/**
- * Wrapper around React's `useId` hook, which prefixes the id with `iui-` and uses
- * a random value as fallback for older React versions which don't include `useId`.
- */
+Object.defineProperty(exports, 'useId', {
+  enumerable: true,
+  get: function () {
+    return useId;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _numbers = require('../functions/numbers.js');
 const useId = () => {
-    const uniqueValue = useUniqueValue();
-    return React.useMemo(() => `iui-${uniqueValue}`, [uniqueValue]);
+  const uniqueValue = useUniqueValue();
+  return _react.useMemo(() => `iui-${uniqueValue}`, [uniqueValue]);
 };
-exports.useId = useId;
-// This is needed to avoid bundlers trying to import non-existing export.
-// Read more: https://github.com/webpack/webpack/issues/14814
-const _React = React;
-const useUniqueValue = _React.useId ?? (() => React.useMemo(() => (0, numbers_js_1.getRandomValue)(10), []));
+const _React = _react;
+const useUniqueValue =
+  _React.useId ??
+  (() => _react.useMemo(() => (0, _numbers.getRandomValue)(10), []));