@itwin/itwinui-react 1.18.0 → 1.19.0

package/esm/core/Toast/Toast.js

@@ -41,11 +41,19 @@ import { getWindow, StatusIconMap } from '../utils/common';
  * <Toast type='persisting' content='Job processing error.' category='negative' />
  */
 export var Toast = function (props) {
-    var content = props.content, category = props.category, _a = props.type, type = _a === void 0 ? 'temporary' : _a, isVisible = props.isVisible, link = props.link, _b = props.duration, duration = _b === void 0 ? 7000 : _b, hasCloseButton = props.hasCloseButton, onRemove = props.onRemove;
+    var content = props.content, category = props.category, _a = props.type, type = _a === void 0 ? 'temporary' : _a, isVisible = props.isVisible, link = props.link, _b = props.duration, duration = _b === void 0 ? 7000 : _b, hasCloseButton = props.hasCloseButton, onRemove = props.onRemove, animateOutTo = props.animateOutTo, placementPosition = props.placementPosition;
     useTheme();
     var closeTimeout = React.useRef(0);
     var _c = React.useState(isVisible), visible = _c[0], setVisible = _c[1];
     var _d = React.useState(0), height = _d[0], setHeight = _d[1];
+    var thisElement = React.useRef(null);
+    var _e = React.useState(0), margin = _e[0], setMargin = _e[1];
+    var marginStyle = function () {
+        if (placementPosition === 'top') {
+            return { marginBottom: margin };
+        }
+        return { marginTop: margin };
+    };
     React.useEffect(function () {
         if (type === 'temporary') {
             setCloseTimeout(duration);
@@ -58,8 +66,17 @@ export var Toast = function (props) {
     React.useEffect(function () {
         setVisible(isVisible);
     }, [isVisible]);
+    React.useEffect(function () {
+        // if we don't have animateOutTo point and not isVisible, set negative margin to move other toasts up.
+        // Close all and close on toasts with no anchor.
+        if (!isVisible && !animateOutTo) {
+            setMargin(-height);
+        }
+    }, [isVisible, animateOutTo, setMargin, height]);
     var close = function () {
         clearCloseTimeout();
+        // move element up when this element is closed.
+        setMargin(-height);
         setVisible(false);
     };
     var setCloseTimeout = function (timeout) {
@@ -81,12 +98,34 @@ export var Toast = function (props) {
             setHeight(height_1);
         }
     };
-    return (React.createElement(Transition, { timeout: { enter: 240, exit: 120 }, in: visible, appear: true, unmountOnExit: true, onExited: onRemove }, function (state) { return (React.createElement("div", { className: cx('iui-toast-all', "iui-toast-" + state), style: {
-            height: height,
-            marginBottom: visible ? '0' : -height,
-        } },
+    var calculateOutAnimation = function (node) {
+        // calculation translate x and y pixels.
+        var translateX = 0;
+        var translateY = 0;
+        if (animateOutTo && node) {
+            var _a = node.getBoundingClientRect(), startX = _a.x, startY = _a.y; // current element
+            var _b = animateOutTo.getBoundingClientRect(), endX = _b.x, endY = _b.y; // anchor point
+            translateX = endX - startX;
+            translateY = endY - startY;
+        }
+        return { translateX: translateX, translateY: translateY };
+    };
+    return (React.createElement(Transition, { timeout: { enter: 240, exit: animateOutTo ? 400 : 120 }, in: visible, appear: true, unmountOnExit: true, onEnter: function (node) {
+            node.style.transform = 'translateY(15%)';
+            node.style.transitionTimingFunction = 'ease';
+        }, onEntered: function (node) {
+            node.style.transform = 'translateY(0)';
+        }, onExiting: function (node) {
+            var _a = calculateOutAnimation(node), translateX = _a.translateX, translateY = _a.translateY;
+            node.style.transform = animateOutTo
+                ? "scale(0.9) translate(" + translateX + "px," + translateY + "px)"
+                : "scale(0.9)";
+            node.style.opacity = '0';
+            node.style.transitionDuration = animateOutTo ? '400ms' : '120ms';
+            node.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 1, 1)';
+        }, onExited: onRemove }, React.createElement("div", { ref: thisElement, className: 'iui-toast-all', style: __assign({ height: height }, marginStyle()) },
         React.createElement("div", { ref: onRef },
-            React.createElement(ToastPresentation, { category: category, content: content, link: link, type: type, hasCloseButton: hasCloseButton, onClose: close })))); }));
+            React.createElement(ToastPresentation, { category: category, content: content, link: link, type: type, hasCloseButton: hasCloseButton, onClose: close })))));
 };
 /**
  * The presentational part of a toast notification, without any animation or logic.

package/esm/core/Toast/ToastWrapper.js

@@ -19,7 +19,8 @@ import cx from 'classnames';
 import Toast from './Toast';
 export var ToastWrapper = function (props) {
     var toasts = props.toasts, _a = props.placement, placement = _a === void 0 ? 'top' : _a;
+    var placementPosition = placement.startsWith('top') ? 'top' : 'bottom';
     return (React.createElement("span", { className: cx("iui-toast-wrapper", "iui-placement-" + placement) }, toasts.map(function (toastProps) {
-        return React.createElement(Toast, __assign({ key: toastProps.id }, toastProps));
+        return (React.createElement(Toast, __assign({ key: toastProps.id, placementPosition: placementPosition }, toastProps)));
     })));
 };

package/esm/core/Toast/Toaster.js

@@ -9,10 +9,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+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)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
@@ -60,14 +64,13 @@ var Toaster = /** @class */ (function () {
         var _this = this;
         ++this.lastId;
         var currentId = this.lastId;
-        this.toasts = __spreadArray(__spreadArray(__spreadArray([], (this.settings.order === 'ascending' ? this.toasts : [])), [
-            __assign(__assign({}, options), { content: content,
-                category: category, onRemove: function () {
+        this.toasts = __spreadArray(__spreadArray(__spreadArray([], (this.settings.order === 'ascending' ? this.toasts : []), true), [
+            __assign(__assign({}, options), { content: content, category: category, onRemove: function () {
                     var _a;
                     _this.removeToast(currentId);
                     (_a = options === null || options === void 0 ? void 0 : options.onRemove) === null || _a === void 0 ? void 0 : _a.call(options);
                 }, id: currentId, isVisible: true })
-        ]), (this.settings.order === 'descending' ? this.toasts : []));
+        ], false), (this.settings.order === 'descending' ? this.toasts : []), true);
         this.updateView();
     };
     Toaster.prototype.removeToast = function (id) {

package/esm/core/utils/InputContainer.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare type InputContainerProps<T extends React.ElementType = 'div'> = {
+    as?: T;
+    label?: React.ReactNode;
+    disabled?: boolean;
+    required?: boolean;
+    status?: 'positive' | 'warning' | 'negative';
+    message?: React.ReactNode;
+    icon?: JSX.Element;
+    isLabelInline?: boolean;
+    isIconInline?: boolean;
+} & React.ComponentPropsWithoutRef<T>;
+/**
+ * Input container to wrap inputs with label, and add optional message and icon.
+ * @private
+ */
+export declare const InputContainer: <T extends React.ElementType<any> = "div">(props: InputContainerProps<T>) => JSX.Element;

package/esm/core/utils/InputContainer.js

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+ * 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';
+import cx from 'classnames';
+/**
+ * Input container to wrap inputs with label, and add optional message and icon.
+ * @private
+ */
+export var InputContainer = function (props) {
+    var _a;
+    var _b;
+    var _c = props.as, Element = _c === void 0 ? 'div' : _c, label = props.label, disabled = props.disabled, required = props.required, status = props.status, message = props.message, icon = props.icon, isLabelInline = props.isLabelInline, isIconInline = props.isIconInline, children = props.children, className = props.className, style = props.style;
+    return (React.createElement(Element, { className: cx('iui-input-container', (_a = {
+                'iui-disabled': disabled
+            },
+            _a["iui-" + status] = !!status,
+            _a['iui-inline-label'] = isLabelInline,
+            _a['iui-inline-icon'] = isIconInline,
+            _a['iui-with-message'] = !!message && !isLabelInline,
+            _a), className), style: style },
+        label && (React.createElement("div", { className: cx('iui-label', {
+                'iui-required': required,
+            }) }, label)),
+        children,
+        icon &&
+            React.cloneElement(icon, {
+                className: cx('iui-input-icon', (_b = icon.props) === null || _b === void 0 ? void 0 : _b.className),
+            }),
+        message && !isLabelInline && (React.createElement("div", { className: 'iui-message' }, message))));
+};

package/esm/core/utils/Popover.js

@@ -13,10 +13,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+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)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 import React from 'react';
 import Tippy from '@tippyjs/react';
@@ -53,7 +57,7 @@ export var Popover = React.forwardRef(function (props, ref) {
             lazyLoad,
             removeTabIndex,
             hideOnEscOrTab
-        ], (props.plugins || [])) });
+        ], (props.plugins || []), true) });
     if (props.render) {
         var render_1 = props.render;
         computedProps.render = function () {

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

@@ -1,7 +1,11 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+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)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
@@ -36,5 +40,5 @@ export var useMergedRefs = function () {
         refs[_i] = arguments[_i];
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    return React.useCallback(mergeRefs.apply(void 0, refs), __spreadArray([], refs));
+    return React.useCallback(mergeRefs.apply(void 0, refs), __spreadArray([], refs, true));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -40,7 +40,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.29.1",
+    "@itwin/itwinui-css": "^0.32.0",
     "@itwin/itwinui-icons-react": "^1.1.1",
     "@itwin/itwinui-illustrations-react": "^1.0.1",
     "@tippyjs/react": "^4.2.5",
@@ -69,16 +69,16 @@
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
     "@types/react-transition-group": "^2.9.2",
-    "@typescript-eslint/eslint-plugin": "^4.9.0",
-    "@typescript-eslint/parser": "^4.9.0",
+    "@typescript-eslint/eslint-plugin": "^4.31.1",
+    "@typescript-eslint/parser": "^4.31.1",
     "babel-loader": "^8.2.2",
     "concurrently": "^5.3.0",
     "cpx": "^1.5.0",
     "creevey": "^0.7.36",
-    "eslint": "^7.15.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-prettier": "^3.2.0",
-    "eslint-plugin-react": "^7.21.5",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "fast-glob": "^3.2.5",
     "husky": "^3.0.0",
@@ -97,7 +97,7 @@
     "ts-jest": "^27.0.4",
     "ts-loader": "^8.0.1",
     "ts-node": "^8.0.2",
-    "typescript": "^4.0.2",
+    "typescript": "^4.4.3",
     "webpack": "^4.46.0"
   },
   "peerDependencies": {
@@ -110,7 +110,11 @@
     "trim": "^0.0.3",
     "browserslist": "^4.16.6",
     "glob-parent": "^5.1.2",
-    "css-what": "^5.0.1"
+    "css-what": "^5.0.1",
+    "immer": "^9.0.6",
+    "set-value": "^4.1.0",
+    "prismjs": "^1.25.0",
+    "nth-check": "^2.0.1"
   },
   "husky": {
     "hooks": {