@itwin/itwinui-react 1.37.3 → 1.38.0

package/esm/core/Toast/Toaster.js

@@ -9,6 +9,42 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -35,18 +71,21 @@ var Toaster = /** @class */ (function () {
             order: 'descending',
             placement: 'top',
         };
+        this.toastsRef = React.createRef();
+        this.isInitialized = false;
     }
     /**
      * Set global Toaster settings for toasts order and placement.
      * Settings will be applied to new toasts on the page.
      */
     Toaster.prototype.setSettings = function (newSettings) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         (_a = newSettings.placement) !== null && _a !== void 0 ? _a : (newSettings.placement = this.settings.placement);
         (_b = newSettings.order) !== null && _b !== void 0 ? _b : (newSettings.order = ((_c = newSettings.placement) === null || _c === void 0 ? void 0 : _c.startsWith('bottom'))
             ? 'ascending'
             : 'descending');
         this.settings = newSettings;
+        (_d = this.toastsRef.current) === null || _d === void 0 ? void 0 : _d.setPlacement((_e = this.settings.placement) !== null && _e !== void 0 ? _e : 'top');
     };
     Toaster.prototype.positive = function (content, options) {
         return this.createToast(content, 'positive', options);
@@ -78,12 +117,34 @@ var Toaster = /** @class */ (function () {
         this.toasts = this.toasts.filter(function (toast) { return toast.id !== id; });
         this.updateView();
     };
+    // Create container on demand.
+    // Cannot do it in constructor, because SSG/SSR apps would fail.
+    Toaster.prototype.createContainer = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var container;
+            return __generator(this, function (_a) {
+                container = getContainer(TOASTS_CONTAINER_ID);
+                if (!container) {
+                    return [2 /*return*/];
+                }
+                ReactDOM.render(React.createElement(ToastWrapper, { ref: this.toastsRef }), container);
+                return [2 /*return*/];
+            });
+        });
+    };
     Toaster.prototype.updateView = function () {
-        var container = getContainer(TOASTS_CONTAINER_ID);
-        if (!container) {
-            return;
+        var _this = this;
+        var _a;
+        if (!this.isInitialized) {
+            this.createContainer().then(function () {
+                var _a;
+                _this.isInitialized = true;
+                (_a = _this.toastsRef.current) === null || _a === void 0 ? void 0 : _a.setToasts(_this.toasts);
+            });
+        }
+        else {
+            (_a = this.toastsRef.current) === null || _a === void 0 ? void 0 : _a.setToasts(this.toasts);
         }
-        ReactDOM.render(React.createElement(ToastWrapper, { toasts: this.toasts, placement: this.settings.placement }), container);
     };
     Toaster.prototype.closeToast = function (toastId) {
         this.toasts = this.toasts.map(function (toast) {

package/esm/core/utils/components/Popover.d.ts

@@ -43,7 +43,7 @@ export declare const Popover: React.ForwardRefExoticComponent<Pick<{
      * @see [tippy.js placement prop](https://atomiks.github.io/tippyjs/v6/all-props/#placement).
      */
     placement?: import("@popperjs/core").Placement | undefined;
-} & Omit<TippyProps, "placement" | "trigger" | "visible">, "disabled" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "role" | "theme" | "zIndex" | "children" | "className" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
+} & Omit<TippyProps, "placement" | "trigger" | "visible">, "disabled" | "children" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "role" | "theme" | "zIndex" | "className" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
 /**
  * Plugin to hide Popover when either Esc key is pressed,
  * or when the content inside is not tabbable and Tab key is pressed.

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

@@ -6,3 +6,4 @@ export * from './useContainerWidth';
 export * from './useTheme';
 export * from './useIntersection';
 export * from './useMediaQuery';
+export * from './useSafeContext';

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

@@ -10,3 +10,4 @@ export * from './useContainerWidth';
 export * from './useTheme';
 export * from './useIntersection';
 export * from './useMediaQuery';
+export * from './useSafeContext';

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

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Wrapper hook around `useContext` that throws an error if the context is not provided.
+ * @param context Context to use. Must have a `displayName` for useful errors.
+ */
+export declare const useSafeContext: <T>(context: React.Context<T>) => NonNullable<T>;

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

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+/**
+ * Wrapper hook around `useContext` that throws an error if the context is not provided.
+ * @param context Context to use. Must have a `displayName` for useful errors.
+ */
+export var useSafeContext = function (context) {
+    var value = React.useContext(context);
+    if (!value) {
+        throw new Error("".concat(context.displayName, " is undefined"));
+    }
+    return value; // eslint-disable-line @typescript-eslint/no-non-null-assertion -- we already checked for undefined
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.37.3",
+  "version": "1.38.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -38,15 +38,14 @@
     "createComponent": "node scripts/createComponent.js",
     "format": "prettier --config .prettierrc **/*.{tsx,ts,js} --ignore-path .gitignore --write",
     "lint": "eslint \"**/*.{js,ts,tsx}\" --max-warnings=0",
-    "lint:fix": "yarn lint --fix && yarn lint:copyright --fix */**/*.{js,ts,tsx}",
-    "lint:copyright": "node scripts/copyrightLinter.js",
-    "copy-files": "cpx \"../../{README,LICENSE}.md\" .",
+    "lint:fix": "yarn lint --fix && node ../configs/copyrightLinter.js --fix \"*/**/*.{js,ts,tsx}\"",
+    "copy-files": "cpy \"../../{README,LICENSE}.md\" .",
     "storybook": "start-storybook -p 6006",
     "dev": "yarn storybook",
     "build-storybook": "yarn copy-files && build-storybook"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.55.0",
+    "@itwin/itwinui-css": "^0.58.0",
     "@itwin/itwinui-icons-react": "^1.5.0",
     "@itwin/itwinui-illustrations-react": "^1.0.1",
     "@tippyjs/react": "^4.2.5",
@@ -84,20 +83,14 @@
     "babel-loader": "^8.2.2",
     "concurrently": "^5.3.0",
     "configs": "*",
-    "cpx": "^1.5.0",
     "creevey": "^0.8.0-beta.0",
-    "fast-glob": "^3.2.5",
-    "husky": "^4.0.0",
     "inquirer": "^6.2.2",
     "jest": "^27.0.6",
     "jest-cli": "^27.0.6",
     "jest-junit": "^12.0.0",
-    "lint-staged": "^12.1.2",
     "markdown-to-jsx": "6.11.4",
-    "mkdirp": "^1.0.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "rimraf": "^2.6.2",
     "storybook-dark-mode": "^1.0.9",
     "tippy.js": "^6.3.1",
     "ts-jest": "^27.0.4",
@@ -110,32 +103,11 @@
     "react": "^16.8.6 || ^17.0.0",
     "react-dom": "^16.8.6 || ^17.0.0"
   },
-  "resolutions": {
-    "braces": "^2.3.1",
-    "hosted-git-info": ">=3.0.8",
-    "trim": "^0.0.3",
-    "browserslist": "^4.16.6",
-    "glob-parent": "^5.1.2",
-    "css-what": "^5.0.1",
-    "immer": "^9.0.6",
-    "set-value": "^4.1.0",
-    "prismjs": "^1.25.0",
-    "nth-check": "^2.0.1",
-    "ansi-regex": "^5.0.1",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
-    "postcss": "8",
-    "nanoid": "^3.1.31"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "lint-staged": {
     "*.{tsx,ts,jsx,js}": [
       "prettier --write",
       "eslint --max-warnings=0 --fix",
-      "yarn lint:copyright --fix"
+      "node ../configs/copyrightLinter.js --fix"
     ]
   },
   "prettier": "configs/prettier-config",