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

package/esm/core/Typography/Small/index.d.ts

@@ -1,4 +0,0 @@
-export { Small } from './Small.js';
-export type { SmallProps } from './Small.js';
-declare const _default: "./Small";
-export default _default;

package/esm/core/Typography/Small/index.js

@@ -1,6 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-export { Small } from './Small.js';
-export default './Small';

package/esm/core/Typography/Subheading/Subheading.d.ts

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import '@itwin/itwinui-css/css/text.css';
-export declare type SubheadingProps = {
-    /**
-     * Set text to muted.
-     * @default false
-     */
-    isMuted?: boolean;
-} & React.HTMLAttributes<HTMLHeadingElement>;
-/**
- * @deprecated Since v2, use `Text` with variant 'subheading'.
- * @example
- * <Text variant='subheading' as='h3'>I'm a subheading!</Text>
- */
-export declare const Subheading: React.ForwardRefExoticComponent<{
-    /**
-     * Set text to muted.
-     * @default false
-     */
-    isMuted?: boolean | undefined;
-} & React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
-export default Subheading;

package/esm/core/Typography/Subheading/Subheading.js

@@ -1,19 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-import cx from 'classnames';
-import * as React from 'react';
-import { useTheme } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/text.css';
-/**
- * @deprecated Since v2, use `Text` with variant 'subheading'.
- * @example
- * <Text variant='subheading' as='h3'>I'm a subheading!</Text>
- */
-export const Subheading = React.forwardRef((props, ref) => {
-    const { className, isMuted = false, ...rest } = props;
-    useTheme();
-    return (React.createElement("h3", { ref: ref, className: cx('iui-text-subheading', 'iui-text-spacing', { 'iui-text-muted': isMuted }, className), ...rest }));
-});
-export default Subheading;

package/esm/core/Typography/Subheading/index.d.ts

@@ -1,4 +0,0 @@
-export { Subheading } from './Subheading.js';
-export type { SubheadingProps } from './Subheading.js';
-declare const _default: "./Subheading";
-export default _default;

package/esm/core/Typography/Subheading/index.js

@@ -1,6 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-export { Subheading } from './Subheading.js';
-export default './Subheading';

package/esm/core/Typography/Title/Title.d.ts

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import '@itwin/itwinui-css/css/text.css';
-export declare type TitleProps = {
-    /**
-     * Set text to muted.
-     * @default false
-     */
-    isMuted?: boolean;
-} & React.HTMLAttributes<HTMLHeadingElement>;
-/**
- * @deprecated Since v2, use `Text` with variant 'title'.
- * @example
- * <Text variant='title' as='h2'>I'm a title!</Text>
- */
-export declare const Title: React.ForwardRefExoticComponent<{
-    /**
-     * Set text to muted.
-     * @default false
-     */
-    isMuted?: boolean | undefined;
-} & React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
-export default Title;

package/esm/core/Typography/Title/Title.js

@@ -1,19 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-import cx from 'classnames';
-import * as React from 'react';
-import { useTheme } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/text.css';
-/**
- * @deprecated Since v2, use `Text` with variant 'title'.
- * @example
- * <Text variant='title' as='h2'>I'm a title!</Text>
- */
-export const Title = React.forwardRef((props, ref) => {
-    const { className, isMuted = false, ...rest } = props;
-    useTheme();
-    return (React.createElement("h2", { ref: ref, className: cx('iui-text-title', 'iui-text-spacing', { 'iui-text-muted': isMuted }, className), ...rest }));
-});
-export default Title;

package/esm/core/Typography/Title/index.d.ts

@@ -1,4 +0,0 @@
-export { Title } from './Title.js';
-export type { TitleProps } from './Title.js';
-declare const _default: "./Title";
-export default _default;

package/esm/core/Typography/Title/index.js

@@ -1,6 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-export { Title } from './Title.js';
-export default './Title';

package/esm/core/utils/hooks/useTheme.d.ts

@@ -1,39 +0,0 @@
-import '@itwin/itwinui-css/css/global.css';
-import '@itwin/itwinui-variables/index.css';
-export declare type ThemeOptions = {
-    /**
-     * Document to which the theme will be applied.
-     * Can be specified to handle popup windows.
-     * @default document
-     *
-     * @deprecated This prop will continue to work in `useTheme` but
-     * we recommend rendering `ThemeProvider` in the correct document instead.
-     */
-    ownerDocument?: Document;
-    /**
-     * Whether to apply high-contrast versions of light and dark themes.
-     * Will default to user preference if browser supports it.
-     */
-    highContrast?: boolean;
-};
-export declare type ThemeType = 'light' | 'dark' | 'os';
-export declare type UseThemeProps = {
-    /**
-     * Theme to be applied. If not set, light theme will be used.
-     */
-    theme?: ThemeType;
-    /**
-     * Options that can be specified to override default theming behavior.
-     */
-    themeOptions?: ThemeOptions;
-};
-/**
- * Hook that conditionally applies styling and theme to all components.
- * Defaults to light theme if none provided.
- *
- * If ThemeProvider is used as an ancestor, this hook will not do anything.
- *
- * @param theme Light, dark, or based on OS setting.
- * @param themeOptions Options that override default theming behavior.
- */
-export declare const useTheme: (theme?: UseThemeProps['theme'], themeOptions?: UseThemeProps['themeOptions']) => void;

package/esm/core/utils/hooks/useTheme.js

@@ -1,100 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * 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 { getDocument, getWindow } from '../functions/index.js';
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
-import { useIsThemeAlreadySet } from './useIsThemeAlreadySet.js';
-import '@itwin/itwinui-css/css/global.css';
-import '@itwin/itwinui-variables/index.css';
-/**
- * Hook that conditionally applies styling and theme to all components.
- * Defaults to light theme if none provided.
- *
- * If ThemeProvider is used as an ancestor, this hook will not do anything.
- *
- * @param theme Light, dark, or based on OS setting.
- * @param themeOptions Options that override default theming behavior.
- */
-export const useTheme = (theme, themeOptions) => {
-    var _a;
-    const ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : getDocument();
-    const isThemeAlreadySet = useIsThemeAlreadySet(ownerDocument);
-    useCorrectRootFontSize();
-    useIsomorphicLayoutEffect(() => {
-        if (!ownerDocument || isThemeAlreadySet.current) {
-            return;
-        }
-        // do nothing if using v1 for the main page (incremental migration)
-        if (ownerDocument.documentElement.className.includes('iui-theme-') ||
-            ownerDocument.body.classList.contains('iui-body')) {
-            return;
-        }
-        ownerDocument.body.classList.toggle('iui-root', true);
-        switch (theme) {
-            case 'light':
-            case 'dark':
-            case 'os': {
-                return handleTheme(theme, ownerDocument, themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast);
-            }
-            default: {
-                // set light theme by default
-                if (ownerDocument.documentElement.dataset.iuiTheme == null) {
-                    return handleTheme('light', ownerDocument, themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast);
-                }
-                return;
-            }
-        }
-    }, [theme, themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast, ownerDocument]);
-};
-/**
- * Helper function to apply the specified theme, or detect the OS theme.
- * Returns a cleanup function to remove the change handlers.
- */
-const handleTheme = (theme, ownerDocument, highContrast) => {
-    var _a, _b, _c, _d, _e;
-    const root = ownerDocument.documentElement;
-    const _window = (_a = ownerDocument.defaultView) !== null && _a !== void 0 ? _a : getWindow();
-    const applyThemeAttributes = (isDark = false, isHC = false) => {
-        root.dataset.iuiTheme = isDark ? 'dark' : 'light';
-        root.dataset.iuiContrast = isHC ? 'high' : 'default';
-    };
-    const prefersDarkQuery = (_b = _window === null || _window === void 0 ? void 0 : _window.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_window, '(prefers-color-scheme: dark)');
-    const prefersHCQuery = (_c = _window === null || _window === void 0 ? void 0 : _window.matchMedia) === null || _c === void 0 ? void 0 : _c.call(_window, '(prefers-contrast: more)');
-    const changeHandler = () => {
-        const isDark = theme === 'dark' || (theme === 'os' && (prefersDarkQuery === null || prefersDarkQuery === void 0 ? void 0 : prefersDarkQuery.matches));
-        const isHC = highContrast !== null && highContrast !== void 0 ? highContrast : prefersHCQuery === null || prefersHCQuery === void 0 ? void 0 : prefersHCQuery.matches;
-        applyThemeAttributes(isDark, isHC);
-    };
-    // call handler once to set initial theme
-    changeHandler();
-    // add listeners in supported browsers
-    (_d = prefersDarkQuery === null || prefersDarkQuery === void 0 ? void 0 : prefersDarkQuery.addEventListener) === null || _d === void 0 ? void 0 : _d.call(prefersDarkQuery, 'change', changeHandler);
-    (_e = prefersHCQuery === null || prefersHCQuery === void 0 ? void 0 : prefersHCQuery.addEventListener) === null || _e === void 0 ? void 0 : _e.call(prefersHCQuery, 'change', changeHandler);
-    // return cleanup function to remove event listeners (should be returned from useEffect)
-    return () => {
-        var _a, _b;
-        (_a = prefersDarkQuery === null || prefersDarkQuery === void 0 ? void 0 : prefersDarkQuery.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(prefersDarkQuery, 'change', changeHandler);
-        (_b = prefersHCQuery === null || prefersHCQuery === void 0 ? void 0 : prefersHCQuery.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(prefersHCQuery, 'change', changeHandler);
-    };
-};
-let didLogWarning = false;
-let isDev = false;
-// wrapping in try-catch because process might be undefined
-try {
-    isDev = process.env.NODE_ENV !== 'production';
-}
-catch (_a) { }
-/** Shows console error if the page changes the root font size */
-const useCorrectRootFontSize = () => {
-    React.useEffect(() => {
-        if (isDev && !didLogWarning) {
-            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 = true;
-            }
-        }
-    }, []);
-};