@itwin/itwinui-react 2.0.0-dev.2 → 2.0.0-dev.4

package/cjs/core/Tag/Tag.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,24 +8,24 @@ exports.Tag = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var classnames_1 = __importDefault(require("classnames"));
-var react_1 = __importDefault(require("react"));
-var utils_1 = require("../utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/tag.css");
-var Buttons_1 = require("../Buttons");
+const Buttons_1 = require("../Buttons");
 /**
  * Tag for showing categories, filters etc.
  * @example
  * <Tag onRemove={() => alert('Closed a tag!')}>I'm a tag</Tag>
  * <Tag variant='basic'>Basic tag</Tag>
  */
-var Tag = function (props) {
-    var className = props.className, _a = props.variant, variant = _a === void 0 ? 'default' : _a, children = props.children, onRemove = props.onRemove, rest = __rest(props, ["className", "variant", "children", "onRemove"]);
+const Tag = (props) => {
+    const { className, variant = 'default', children, onRemove, ...rest } = props;
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement("span", __assign({ className: (0, classnames_1.default)({
+    return (react_1.default.createElement("span", { className: (0, classnames_1.default)({
             'iui-tag-basic': variant === 'basic',
             'iui-tag': variant === 'default',
-        }, className) }, rest),
+        }, className), ...rest },
         variant === 'default' ? (react_1.default.createElement("span", { className: 'iui-tag-label' }, children)) : (children),
         onRemove && (react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag', className: 'iui-tag-button' },
             react_1.default.createElement(utils_1.SvgCloseSmall, { "aria-hidden": true })))));

package/cjs/core/Tag/TagContainer.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,9 +8,9 @@ exports.TagContainer = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var utils_1 = require("../utils");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/tag.css");
 /**
  * TagContainer for grouping tags.
@@ -40,14 +18,13 @@ require("@itwin/itwinui-css/css/tag.css");
  * <TagContainer><Tag>Tag 1</Tag><Tag>Tag 2</Tag></TagContainer>
  * <TagContainer><Tag variant='basic'>Basic tag</Tag><Tag variant='basic'>Basic tag 2</Tag></TagContainer>
  */
-var TagContainer = function (props) {
-    var _a;
-    var className = props.className, children = props.children, overflow = props.overflow, _b = props.background, background = _b === void 0 ? 'none' : _b, rest = __rest(props, ["className", "children", "overflow", "background"]);
+const TagContainer = (props) => {
+    const { className, children, overflow, background = 'none', ...rest } = props;
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-tag-container', (_a = {},
-            _a["iui-".concat(overflow)] = !!overflow,
-            _a['iui-visible'] = background !== 'none',
-            _a), className) }, rest), children));
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tag-container', {
+            [`iui-${overflow}`]: !!overflow,
+            'iui-visible': background !== 'none',
+        }, className), ...rest }, children));
 };
 exports.TagContainer = TagContainer;
 exports.default = exports.TagContainer;

package/cjs/core/Textarea/Textarea.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,9 +8,9 @@ exports.Textarea = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var classnames_1 = __importDefault(require("classnames"));
-var react_1 = __importDefault(require("react"));
-var utils_1 = require("../utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/input.css");
 /**
  * Basic textarea component
@@ -40,16 +18,16 @@ require("@itwin/itwinui-css/css/input.css");
  * <Textarea setFocus={true} placeholder='This is a textarea' />
  * <Textarea disabled={true} placeholder='This is a disabled textarea' />
  */
-exports.Textarea = react_1.default.forwardRef(function (props, ref) {
-    var className = props.className, _a = props.rows, rows = _a === void 0 ? 3 : _a, _b = props.setFocus, setFocus = _b === void 0 ? false : _b, rest = __rest(props, ["className", "rows", "setFocus"]);
+exports.Textarea = react_1.default.forwardRef((props, ref) => {
+    const { className, rows = 3, setFocus = false, ...rest } = props;
     (0, utils_1.useTheme)();
-    var textAreaRef = react_1.default.useRef(null);
-    var refs = (0, utils_1.useMergedRefs)(ref, textAreaRef);
-    react_1.default.useEffect(function () {
+    const textAreaRef = react_1.default.useRef(null);
+    const refs = (0, utils_1.useMergedRefs)(ref, textAreaRef);
+    react_1.default.useEffect(() => {
         if (textAreaRef.current && setFocus) {
             textAreaRef.current.focus();
         }
     }, [setFocus]);
-    return (react_1.default.createElement("textarea", __assign({ className: (0, classnames_1.default)('iui-input', className), rows: rows, ref: refs }, rest)));
+    return (react_1.default.createElement("textarea", { className: (0, classnames_1.default)('iui-input', className), rows: rows, ref: refs, ...rest }));
 });
 exports.default = exports.Textarea;

package/cjs/core/ThemeProvider/ThemeProvider.d.ts

@@ -28,4 +28,5 @@ export default ThemeProvider;
 export declare const ThemeContext: React.Context<{
     theme?: ThemeType | undefined;
     themeOptions?: ThemeOptions | undefined;
+    rootRef: React.RefObject<HTMLElement>;
 } | undefined>;

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,9 +8,9 @@ exports.ThemeContext = exports.ThemeProvider = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var utils_1 = require("../utils");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/global.css");
 require("@itwin/itwinui-variables/index.css");
 /**
@@ -55,25 +33,26 @@ require("@itwin/itwinui-variables/index.css");
  *   <App />
  * </ThemeProvider>
  */
-exports.ThemeProvider = react_1.default.forwardRef(function (props, ref) {
+exports.ThemeProvider = react_1.default.forwardRef((props, ref) => {
     var _a;
-    var theme = props.theme, children = props.children, themeOptions = props.themeOptions, _b = props.as, Element = _b === void 0 ? 'div' : _b, className = props.className, rest = __rest(props, ["theme", "children", "themeOptions", "as", "className"]);
-    var hasChildren = react_1.default.Children.count(children) > 0;
-    var parentContext = react_1.default.useContext(exports.ThemeContext);
-    var prefersDark = (0, utils_1.useMediaQuery)('(prefers-color-scheme: dark)');
-    var prefersHighContrast = (0, utils_1.useMediaQuery)('(prefers-contrast: more)');
-    var shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
-    var shouldApplyHC = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast;
+    const { theme, children, themeOptions, as: Element = 'div', className, ...rest } = props;
+    const rootRef = react_1.default.useRef(null);
+    const mergedRefs = (0, utils_1.useMergedRefs)(rootRef, ref);
+    const hasChildren = react_1.default.Children.count(children) > 0;
+    const parentContext = react_1.default.useContext(exports.ThemeContext);
+    const prefersDark = (0, utils_1.useMediaQuery)('(prefers-color-scheme: dark)');
+    const prefersHighContrast = (0, utils_1.useMediaQuery)('(prefers-contrast: more)');
+    const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
+    const shouldApplyHC = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast;
     // only provide context if wrapped around children
-    return hasChildren ? (react_1.default.createElement(exports.ThemeContext.Provider, { value: { theme: theme, themeOptions: themeOptions } },
-        react_1.default.createElement(Element, __assign({ className: (0, classnames_1.default)('iui-root', className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: ref }, rest), children))) : (
+    return hasChildren ? (react_1.default.createElement(exports.ThemeContext.Provider, { value: { theme, themeOptions, rootRef } },
+        react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-root', className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: mergedRefs, ...rest }, children))) : (
     // otherwise just apply theme on the root using this wrapper component
     react_1.default.createElement(ThemeLogicWrapper, { theme: theme !== null && theme !== void 0 ? theme : parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
 });
 exports.default = exports.ThemeProvider;
 exports.ThemeContext = react_1.default.createContext(undefined);
-var ThemeLogicWrapper = function (_a) {
-    var theme = _a.theme, themeOptions = _a.themeOptions;
+const ThemeLogicWrapper = ({ theme, themeOptions }) => {
     (0, utils_1.useTheme)(theme, themeOptions);
     return react_1.default.createElement(react_1.default.Fragment, null);
 };

package/cjs/core/Tile/Tile.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,13 +8,13 @@ exports.Tile = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var utils_1 = require("../utils");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/tile.css");
-var DropdownMenu_1 = require("../DropdownMenu");
-var Buttons_1 = require("../Buttons");
-var ProgressIndicators_1 = require("../ProgressIndicators");
+const DropdownMenu_1 = require("../DropdownMenu");
+const Buttons_1 = require("../Buttons");
+const ProgressIndicators_1 = require("../ProgressIndicators");
 /**
  * Tile component that displays content and actions in a card-like format.
  * @example
@@ -54,24 +32,22 @@ var ProgressIndicators_1 = require("../ProgressIndicators");
  *  isNew={false}
  * />
  */
-var Tile = function (props) {
-    var _a;
-    var className = props.className, name = props.name, description = props.description, metadata = props.metadata, thumbnail = props.thumbnail, buttons = props.buttons, leftIcon = props.leftIcon, rightIcon = props.rightIcon, badge = props.badge, isNew = props.isNew, isSelected = props.isSelected, moreOptions = props.moreOptions, _b = props.variant, variant = _b === void 0 ? 'default' : _b, children = props.children, isActionable = props.isActionable, status = props.status, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, _d = props.isDisabled, isDisabled = _d === void 0 ? false : _d, rest = __rest(props, ["className", "name", "description", "metadata", "thumbnail", "buttons", "leftIcon", "rightIcon", "badge", "isNew", "isSelected", "moreOptions", "variant", "children", "isActionable", "status", "isLoading", "isDisabled"]);
+const Tile = (props) => {
+    const { className, name, description, metadata, thumbnail, buttons, leftIcon, rightIcon, badge, isNew, isSelected, moreOptions, variant = 'default', children, isActionable, status, isLoading = false, isDisabled = false, ...rest } = props;
     (0, utils_1.useTheme)();
-    var _e = react_1.default.useState(false), isMenuVisible = _e[0], setIsMenuVisible = _e[1];
-    var showMenu = react_1.default.useCallback(function () { return setIsMenuVisible(true); }, []);
-    var hideMenu = react_1.default.useCallback(function () { return setIsMenuVisible(false); }, []);
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-tile', (_a = {
-                'iui-folder': variant === 'folder',
-                'iui-new': isNew,
-                'iui-selected': isSelected,
-                'iui-actionable': isActionable
-            },
-            _a["iui-".concat(status)] = !!status,
-            _a['iui-loading'] = isLoading,
-            _a), className), "aria-disabled": isDisabled, tabIndex: isActionable && !isDisabled ? 0 : undefined }, rest),
+    const [isMenuVisible, setIsMenuVisible] = react_1.default.useState(false);
+    const showMenu = react_1.default.useCallback(() => setIsMenuVisible(true), []);
+    const hideMenu = react_1.default.useCallback(() => setIsMenuVisible(false), []);
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tile', {
+            'iui-folder': variant === 'folder',
+            'iui-new': isNew,
+            'iui-selected': isSelected,
+            'iui-actionable': isActionable,
+            [`iui-${status}`]: !!status,
+            'iui-loading': isLoading,
+        }, className), "aria-disabled": isDisabled, tabIndex: isActionable && !isDisabled ? 0 : undefined, ...rest },
         thumbnail && (react_1.default.createElement("div", { className: 'iui-tile-thumbnail' },
-            typeof thumbnail === 'string' ? (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: "url(".concat(thumbnail, ")") } })) : thumbnail && thumbnail.type === 'img' ? (react_1.default.cloneElement(thumbnail, {
+            typeof thumbnail === 'string' ? (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: `url(${thumbnail})` } })) : thumbnail && thumbnail.type === 'img' ? (react_1.default.cloneElement(thumbnail, {
                 className: 'iui-tile-thumbnail-picture',
             })) : react_1.default.isValidElement(thumbnail) ? (react_1.default.cloneElement(thumbnail, {
                 className: (0, classnames_1.default)('iui-thumbnail-icon', thumbnail.props.className),
@@ -93,17 +69,13 @@ var Tile = function (props) {
                 react_1.default.createElement("span", { className: 'iui-tile-name-label' }, name)),
             description != undefined && (react_1.default.createElement("div", { className: 'iui-tile-description' }, description)),
             metadata != undefined && (react_1.default.createElement("div", { className: 'iui-tile-metadata' }, metadata)),
-            moreOptions && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: function (close) {
-                    return moreOptions.map(function (option) {
-                        return react_1.default.cloneElement(option, {
-                            onClick: function (value) {
-                                var _a, _b;
-                                close();
-                                (_b = (_a = option.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, value);
-                            },
-                        });
-                    });
-                } },
+            moreOptions && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: (close) => moreOptions.map((option) => react_1.default.cloneElement(option, {
+                    onClick: (value) => {
+                        var _a, _b;
+                        close();
+                        (_b = (_a = option.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+                    },
+                })) },
                 react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tile-more-options', {
                         'iui-visible': isMenuVisible,
                     }) },
@@ -113,9 +85,8 @@ var Tile = function (props) {
         buttons && react_1.default.createElement("div", { className: 'iui-tile-buttons' }, buttons)));
 };
 exports.Tile = Tile;
-var TitleIcon = function (_a) {
-    var _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.isNew, isNew = _d === void 0 ? false : _d, status = _a.status;
-    var StatusIcon = !!status && utils_1.StatusIconMap[status];
+const TitleIcon = ({ isLoading = false, isSelected = false, isNew = false, status, }) => {
+    const StatusIcon = !!status && utils_1.StatusIconMap[status];
     if (isLoading) {
         return (react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { className: 'iui-tile-status-icon', "aria-hidden": true, indeterminate: true }));
     }