@itwin/itwinui-react 3.0.4 → 3.0.6

package/cjs/core/Tag/Tag.js

@@ -1,15 +1,15 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = 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 classnames_1 = tslib_1.__importDefault(require('classnames'));
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
-const IconButton_js_1 = require('../Buttons/IconButton.js');
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const IconButton_js_1 = require("../Buttons/IconButton.js");
 /**
  * Tag for showing categories, filters etc.
  * @example
@@ -17,40 +17,13 @@ const IconButton_js_1 = require('../Buttons/IconButton.js');
  * <Tag variant='basic'>Basic tag</Tag>
  */
 exports.Tag = React.forwardRef((props, forwardedRef) => {
-  const { className, variant = 'default', children, onRemove, ...rest } = props;
-  return React.createElement(
-    index_js_1.Box,
-    {
-      as: 'span',
-      className: (0, classnames_1.default)(
-        {
-          'iui-tag-basic': variant === 'basic',
-          'iui-tag': variant === 'default',
-        },
-        className,
-      ),
-      ref: forwardedRef,
-      ...rest,
-    },
-    variant === 'default'
-      ? React.createElement(
-          index_js_1.Box,
-          { as: 'span', className: 'iui-tag-label' },
-          children,
-        )
-      : children,
-    onRemove &&
-      React.createElement(
-        IconButton_js_1.IconButton,
-        {
-          styleType: 'borderless',
-          size: 'small',
-          onClick: onRemove,
-          'aria-label': 'Delete tag',
-          className: 'iui-tag-button',
-        },
-        React.createElement(index_js_1.SvgCloseSmall, { 'aria-hidden': true }),
-      ),
-  );
+    const { className, variant = 'default', children, onRemove, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)({
+            'iui-tag-basic': variant === 'basic',
+            'iui-tag': variant === 'default',
+        }, className), ref: forwardedRef, ...rest },
+        variant === 'default' ? (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-tag-label' }, children)) : (children),
+        onRemove && (React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag', className: 'iui-tag-button' },
+            React.createElement(index_js_1.SvgCloseSmall, { "aria-hidden": true })))));
 });
 exports.default = exports.Tag;

package/cjs/core/Tag/TagContainer.js

@@ -1,14 +1,14 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.TagContainer = 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 index_js_1 = require('../utils/index.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
 /**
  * TagContainer for grouping tags.
  * @example
@@ -16,22 +16,10 @@ const index_js_1 = require('../utils/index.js');
  * <TagContainer><Tag variant='basic'>Basic tag</Tag><Tag variant='basic'>Basic tag 2</Tag></TagContainer>
  */
 exports.TagContainer = React.forwardRef((props, forwardedRef) => {
-  const { className, children, overflow, background = 'none', ...rest } = props;
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)(
-        'iui-tag-container',
-        {
-          [`iui-${overflow}`]: !!overflow,
-          'iui-visible': background !== 'none',
-        },
-        className,
-      ),
-      ref: forwardedRef,
-      ...rest,
-    },
-    children,
-  );
+    const { className, children, overflow, background = 'none', ...rest } = props;
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tag-container', {
+            [`iui-${overflow}`]: !!overflow,
+            'iui-visible': background !== 'none',
+        }, className), ref: forwardedRef, ...rest }, children));
 });
 exports.default = exports.TagContainer;

package/cjs/core/Textarea/Textarea.js

@@ -1,13 +1,13 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Textarea = 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 Input_js_1 = require('../Input/Input.js');
+const React = tslib_1.__importStar(require("react"));
+const Input_js_1 = require("../Input/Input.js");
 /**
  * Basic textarea component
  * @example
@@ -15,11 +15,6 @@ const Input_js_1 = require('../Input/Input.js');
  * <Textarea disabled={true} placeholder='This is a disabled textarea' />
  */
 exports.Textarea = React.forwardRef((props, forwardedRef) => {
-  return React.createElement(Input_js_1.Input, {
-    as: 'textarea',
-    rows: 3,
-    ref: forwardedRef,
-    ...props,
-  });
+    return React.createElement(Input_js_1.Input, { as: 'textarea', rows: 3, ref: forwardedRef, ...props });
 });
 exports.default = exports.Textarea;

package/cjs/core/ThemeProvider/ThemeContext.js

@@ -1,10 +1,10 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeContext = 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 React = tslib_1.__importStar(require("react"));
 exports.ThemeContext = React.createContext(undefined);

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -1,17 +1,17 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeProvider = 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 classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
-const ThemeContext_js_1 = require('./ThemeContext.js');
-const Toaster_js_1 = require('../Toast/Toaster.js');
+const React = tslib_1.__importStar(require("react"));
+const ReactDOM = tslib_1.__importStar(require("react-dom"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
+const ThemeContext_js_1 = require("./ThemeContext.js");
+const Toaster_js_1 = require("../Toast/Toaster.js");
 /**
  * This component provides global state and applies theme to the entire tree
  * that it is wrapping around.
@@ -41,95 +41,43 @@ const Toaster_js_1 = require('../Toast/Toaster.js');
  * </ThemeProvider>
  */
 exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
-  const {
-    theme: themeProp = 'inherit',
-    children,
-    themeOptions = {},
-    portalContainer: portalContainerProp,
-    ...rest
-  } = props;
-  const [parentTheme, rootRef, parentContext] = useParentTheme();
-  const theme = themeProp === 'inherit' ? parentTheme || 'light' : themeProp;
-  // default apply background only for topmost ThemeProvider
-  themeOptions.applyBackground ?? (themeOptions.applyBackground = !parentTheme);
-  // default inherit highContrast option from parent if also inheriting base theme
-  themeOptions.highContrast ??
-    (themeOptions.highContrast =
-      themeProp === 'inherit'
+    const { theme: themeProp = 'inherit', children, themeOptions = {}, portalContainer: portalContainerProp, ...rest } = props;
+    const [parentTheme, rootRef, parentContext] = useParentTheme();
+    const theme = themeProp === 'inherit' ? parentTheme || 'light' : themeProp;
+    // default apply background only for topmost ThemeProvider
+    themeOptions.applyBackground ?? (themeOptions.applyBackground = !parentTheme);
+    // default inherit highContrast option from parent if also inheriting base theme
+    themeOptions.highContrast ?? (themeOptions.highContrast = themeProp === 'inherit'
         ? parentContext?.themeOptions?.highContrast
         : undefined);
-  /**
-   * We will portal our portal container into `portalContainer` prop (if specified),
-   * or inherit `portalContainer` from context (if also inheriting theme).
-   */
-  const portaledPortalContainer =
-    portalContainerProp ||
-    (themeProp === 'inherit' ? parentContext?.portalContainer : undefined);
-  const [portalContainer, setPortalContainer] = (0,
-  index_js_1.useControlledState)(null, portaledPortalContainer);
-  const contextValue = React.useMemo(
-    () => ({ theme, themeOptions, portalContainer }),
+    /**
+     * We will portal our portal container into `portalContainer` prop (if specified),
+     * or inherit `portalContainer` from context (if also inheriting theme).
+     */
+    const portaledPortalContainer = portalContainerProp ||
+        (themeProp === 'inherit' ? parentContext?.portalContainer : undefined);
+    const [portalContainer, setPortalContainer] = (0, index_js_1.useControlledState)(null, portaledPortalContainer);
+    const contextValue = React.useMemo(() => ({ theme, themeOptions, portalContainer }), 
     // we do include all dependencies below, but we want to stringify the objects as they could be different on each render
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [theme, JSON.stringify(themeOptions), portalContainer],
-  );
-  return React.createElement(
-    ThemeContext_js_1.ThemeContext.Provider,
-    { value: contextValue },
-    React.createElement(
-      Root,
-      {
-        theme: theme,
-        themeOptions: themeOptions,
-        ref: (0, index_js_1.useMergedRefs)(forwardedRef, rootRef),
-        ...rest,
-      },
-      React.createElement(
-        Toaster_js_1.ToastProvider,
-        null,
-        children,
-        portaledPortalContainer
-          ? ReactDOM.createPortal(
-              React.createElement(Toaster_js_1.Toaster, null),
-              portaledPortalContainer,
-            )
-          : React.createElement(
-              'div',
-              { ref: setPortalContainer, style: { display: 'contents' } },
-              React.createElement(Toaster_js_1.Toaster, null),
-            ),
-      ),
-    ),
-  );
+    [theme, JSON.stringify(themeOptions), portalContainer]);
+    return (React.createElement(ThemeContext_js_1.ThemeContext.Provider, { value: contextValue },
+        React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: (0, index_js_1.useMergedRefs)(forwardedRef, rootRef), ...rest },
+            React.createElement(Toaster_js_1.ToastProvider, null,
+                children,
+                portaledPortalContainer ? (ReactDOM.createPortal(React.createElement(Toaster_js_1.Toaster, null), portaledPortalContainer)) : (React.createElement("div", { ref: setPortalContainer, style: { display: 'contents' } },
+                    React.createElement(Toaster_js_1.Toaster, null)))))));
 });
 exports.default = exports.ThemeProvider;
 // ----------------------------------------------------------------------------
 const Root = React.forwardRef((props, forwardedRef) => {
-  const { theme, children, themeOptions, className, ...rest } = props;
-  const prefersDark = (0, index_js_1.useMediaQuery)(
-    '(prefers-color-scheme: dark)',
-  );
-  const prefersHighContrast = (0, index_js_1.useMediaQuery)(
-    '(prefers-contrast: more)',
-  );
-  const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
-  const shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
-  const shouldApplyBackground = themeOptions?.applyBackground;
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)(
-        'iui-root',
-        { 'iui-root-background': shouldApplyBackground },
-        className,
-      ),
-      'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
-      'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
-      ref: forwardedRef,
-      ...rest,
-    },
-    children,
-  );
+    const { theme, children, themeOptions, className, ...rest } = props;
+    const prefersDark = (0, index_js_1.useMediaQuery)('(prefers-color-scheme: dark)');
+    const prefersHighContrast = (0, index_js_1.useMediaQuery)('(prefers-contrast: more)');
+    const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
+    const shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
+    const shouldApplyBackground = themeOptions?.applyBackground;
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-root', { 'iui-root-background': shouldApplyBackground }, className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: forwardedRef, ...rest }, children));
 });
 // ----------------------------------------------------------------------------
 /**
@@ -137,19 +85,18 @@ const Root = React.forwardRef((props, forwardedRef) => {
  * data-iui-theme attribute if context is not found.
  */
 const useParentTheme = () => {
-  const parentContext = React.useContext(ThemeContext_js_1.ThemeContext);
-  const rootRef = React.useRef(null);
-  const [parentThemeState, setParentTheme] = React.useState(
-    parentContext?.theme,
-  );
-  (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-    setParentTheme(
-      (old) =>
-        old ||
-        rootRef.current?.parentElement
-          ?.closest('[data-iui-theme]')
-          ?.getAttribute('data-iui-theme'),
-    );
-  }, []);
-  return [parentContext?.theme ?? parentThemeState, rootRef, parentContext];
+    const parentContext = React.useContext(ThemeContext_js_1.ThemeContext);
+    const rootRef = React.useRef(null);
+    const [parentThemeState, setParentTheme] = React.useState(parentContext?.theme);
+    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+        setParentTheme((old) => old ||
+            rootRef.current?.parentElement
+                ?.closest('[data-iui-theme]')
+                ?.getAttribute('data-iui-theme'));
+    }, []);
+    return [
+        parentContext?.theme ?? parentThemeState,
+        rootRef,
+        parentContext,
+    ];
 };