@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.2

package/cjs/core/utils/hooks/useDragAndDrop.js

@@ -33,13 +33,12 @@ const index_js_1 = require("../functions/index.js");
 const useEventListener_js_1 = require("./useEventListener.js");
 const useResizeObserver_js_1 = require("./useResizeObserver.js");
 const getContainerRect = (containerRef) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const containerRect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const containerRect = containerRef?.current?.getBoundingClientRect();
     return {
-        top: (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _b !== void 0 ? _b : 0,
-        right: (_e = (_c = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _c !== void 0 ? _c : (_d = (0, index_js_1.getWindow)()) === null || _d === void 0 ? void 0 : _d.innerWidth) !== null && _e !== void 0 ? _e : 0,
-        bottom: (_h = (_f = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _f !== void 0 ? _f : (_g = (0, index_js_1.getWindow)()) === null || _g === void 0 ? void 0 : _g.innerHeight) !== null && _h !== void 0 ? _h : 0,
-        left: (_j = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _j !== void 0 ? _j : 0,
+        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,
     };
 };
 /**
@@ -57,11 +56,10 @@ const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
     const translateY = React.useRef();
     const containerRectRef = React.useRef(getContainerRect(containerRef));
     const adjustTransform = React.useCallback(() => {
-        var _a;
         if (!elementRef.current || !enabled) {
             return;
         }
-        const { top, right, bottom, left } = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const { top, right, bottom, left } = elementRef.current?.getBoundingClientRect();
         let [newTranslateX, newTranslateY] = (0, index_js_1.getTranslateValues)(elementRef.current);
         containerRectRef.current = getContainerRect(containerRef);
         if (bottom > containerRectRef.current.bottom) {
@@ -81,10 +79,10 @@ const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
         elementRef.current.style.transform = `translate(${newTranslateX}px, ${newTranslateY}px)`;
     }, [containerRef, elementRef, enabled]);
     const [resizeRef, resizeObserver] = (0, useResizeObserver_js_1.useResizeObserver)(adjustTransform);
-    resizeRef(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current);
+    resizeRef(containerRef?.current);
     React.useEffect(() => {
         return () => {
-            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+            resizeObserver?.disconnect();
         };
     }, [resizeObserver]);
     (0, useEventListener_js_1.useEventListener)('resize', () => {

package/cjs/core/utils/hooks/useEventListener.js

@@ -51,7 +51,7 @@ const useEventListener = (eventName, handler, element) => {
         if (!element) {
             return;
         }
-        const eventListener = (event) => { var _a; return (_a = savedHandler.current) === null || _a === void 0 ? void 0 : _a.call(savedHandler, event); };
+        const eventListener = (event) => savedHandler.current?.(event);
         element.addEventListener(eventName, eventListener);
         return () => {
             element.removeEventListener(eventName, eventListener);

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

@@ -1,10 +1,15 @@
-import '@itwin/itwinui-css/css/global.css';
-import '@itwin/itwinui-variables/index.css';
+import * as React from 'react';
+import { ThemeContext } from '../../ThemeProvider/ThemeContext.js';
 /**
  * Hook used in every component for any shared setup and side effects.
+ * Returns the nearest ThemeContext.
  *
  * @private
  */
-export declare const useGlobals: () => void;
+export declare const useGlobals: () => {
+    theme?: import("../../index.js").ThemeType | undefined;
+    themeOptions?: import("../../ThemeProvider/ThemeProvider.js").ThemeOptions | undefined;
+    portalContainerRef?: React.RefObject<HTMLElement> | undefined;
+} | undefined;
 /** Shows console error if ThemeProvider is not used */
-export declare const useThemeProviderWarning: () => void;
+export declare const useThemeProviderWarning: (themeContext: React.ContextType<typeof ThemeContext>) => void;

package/cjs/core/utils/hooks/useGlobals.js

@@ -29,33 +29,33 @@ exports.useThemeProviderWarning = exports.useGlobals = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
-require("@itwin/itwinui-css/css/global.css");
-require("@itwin/itwinui-variables/index.css");
 const ThemeContext_js_1 = require("../../ThemeProvider/ThemeContext.js");
 let isDev = false;
 // wrapping in try-catch because process might be undefined
 try {
     isDev = process.env.NODE_ENV !== 'production';
 }
-catch (_a) { }
+catch { }
 const didLogWarning = {
     fontSize: false,
     themeProvider: false,
 };
 /**
  * Hook used in every component for any shared setup and side effects.
+ * Returns the nearest ThemeContext.
  *
  * @private
  */
 const useGlobals = () => {
-    (0, exports.useThemeProviderWarning)();
+    const themeContext = React.useContext(ThemeContext_js_1.ThemeContext);
+    (0, exports.useThemeProviderWarning)(themeContext);
     useRootFontSizeWarning();
+    return themeContext;
 };
 exports.useGlobals = useGlobals;
 // ----------------------------------------------------------------------------
 /** Shows console error if ThemeProvider is not used */
-const useThemeProviderWarning = () => {
-    const themeContext = React.useContext(ThemeContext_js_1.ThemeContext);
+const useThemeProviderWarning = (themeContext) => {
     React.useEffect(() => {
         if (isDev && !didLogWarning.themeProvider && !themeContext) {
             console.error('iTwinUI components must be used within a tree wrapped in a ThemeProvider.');

package/cjs/core/utils/hooks/useId.js

@@ -26,7 +26,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useId = void 0;
 const React = __importStar(require("react"));
@@ -43,4 +42,4 @@ 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 = (_a = _React.useId) !== null && _a !== void 0 ? _a : (() => (0, numbers_js_1.getRandomValue)(10));
+const useUniqueValue = _React.useId ?? (() => (0, numbers_js_1.getRandomValue)(10));

package/cjs/core/utils/hooks/useIntersection.js

@@ -46,10 +46,9 @@ const useIntersection = (onIntersect, options = {}, once = true) => {
     const { root, rootMargin, threshold } = options;
     const cleanupRef = React.useRef(() => { });
     const setRef = React.useCallback((node) => {
-        var _a, _b;
-        (_a = cleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(cleanupRef);
+        cleanupRef.current?.();
         cleanupRef.current = () => { }; // ensure it doesn't try to clean up again
-        if (!node || !((_b = (0, dom_js_1.getWindow)()) === null || _b === void 0 ? void 0 : _b.IntersectionObserver)) {
+        if (!node || !(0, dom_js_1.getWindow)()?.IntersectionObserver) {
             return;
         }
         const observer = new IntersectionObserver(([entry], obs) => {

package/cjs/core/utils/hooks/useMediaQuery.js

@@ -34,27 +34,25 @@ const useIsomorphicLayoutEffect_js_1 = require("./useIsomorphicLayoutEffect.js")
 const useMediaQuery = (queryString) => {
     const [matches, setMatches] = React.useState();
     (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
-        var _a, _b, _c;
-        const mediaQueryList = (_b = (_a = (0, index_js_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, queryString);
+        const mediaQueryList = (0, index_js_1.getWindow)()?.matchMedia?.(queryString);
         const handleChange = ({ matches }) => setMatches(matches);
         if (mediaQueryList != undefined) {
             setMatches(mediaQueryList.matches);
             try {
                 mediaQueryList.addEventListener('change', handleChange);
             }
-            catch (_d) {
+            catch {
                 // Safari 13 fallback
-                (_c = mediaQueryList.addListener) === null || _c === void 0 ? void 0 : _c.call(mediaQueryList, handleChange);
+                mediaQueryList.addListener?.(handleChange);
             }
         }
         return () => {
-            var _a;
             try {
-                mediaQueryList === null || mediaQueryList === void 0 ? void 0 : mediaQueryList.removeEventListener('change', handleChange);
+                mediaQueryList?.removeEventListener('change', handleChange);
             }
-            catch (_b) {
+            catch {
                 // Safari 13 fallback
-                (_a = mediaQueryList === null || mediaQueryList === void 0 ? void 0 : mediaQueryList.removeListener) === null || _a === void 0 ? void 0 : _a.call(mediaQueryList, handleChange);
+                mediaQueryList?.removeListener?.(handleChange);
             }
         };
     }, [queryString]);

package/cjs/core/utils/hooks/useOverflow.js

@@ -75,9 +75,8 @@ const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
     }, [containerSize, disabled, items]);
     const mergedRefs = (0, useMergedRefs_js_1.useMergedRefs)(containerRef, resizeRef);
     (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
-        var _a;
         if (!containerRef.current || disabled) {
-            (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+            resizeObserverRef.current?.disconnect();
             return;
         }
         const dimension = orientation === 'horizontal' ? 'Width' : 'Height';

package/cjs/core/utils/hooks/useResizeObserver.js

@@ -45,14 +45,13 @@ const dom_js_1 = require("../functions/dom.js");
 const useResizeObserver = (onResize) => {
     const resizeObserver = React.useRef();
     const elementRef = React.useCallback((element) => {
-        var _a, _b, _c;
-        if (!((_a = (0, dom_js_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.ResizeObserver)) {
+        if (!(0, dom_js_1.getWindow)()?.ResizeObserver) {
             return;
         }
-        (_b = resizeObserver.current) === null || _b === void 0 ? void 0 : _b.disconnect();
+        resizeObserver.current?.disconnect();
         if (element) {
             resizeObserver.current = new ResizeObserver(([{ contentRect }]) => onResize(contentRect));
-            (_c = resizeObserver.current) === null || _c === void 0 ? void 0 : _c.observe(element);
+            resizeObserver.current?.observe(element);
         }
     }, [onResize]);
     return [elementRef, resizeObserver.current];

package/cjs/styles.d.ts

@@ -0,0 +1,5 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export default styles as Record<string, string>;