@agilemotion/oui-react-js 1.8.70 → 1.8.72

package/dist/components/AlertBar.css

@@ -0,0 +1,15 @@
+.alert-fade {
+    opacity: 0;
+    transform: translateY(-8px);
+    transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
+}
+
+.alert-fade.alert-show {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.alert-fade.alert-hide {
+    opacity: 0;
+    transform: translateY(-6px);
+}

package/dist/components/AlertBar.js

@@ -9,12 +9,14 @@ var _Utils = _interopRequireDefault(require("../Utils"));
 var _Alert = _interopRequireDefault(require("react-bootstrap/Alert"));
 var _EventType = _interopRequireDefault(require("../event/EventType"));
 var _Observable = _interopRequireDefault(require("../event/Observable"));
-var _OverlayTrigger = _interopRequireDefault(require("react-bootstrap/OverlayTrigger"));
-var _Tooltip = _interopRequireDefault(require("react-bootstrap/Tooltip"));
+require("./AlertBar.css");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const AlertBar = /*#__PURE__*/_react.default.memo(props => {
+  var _props$config;
   const [message, setMessage] = _react.default.useState(props.config.message);
-  const [variant, setVariant] = _react.default.useState(props.config.variant ? props.config.variant : 'info');
+  const [variant, setVariant] = _react.default.useState(props.config.variant || 'info');
+  const [visible, setVisible] = _react.default.useState(false);
+  const placement = ((_props$config = props.config) === null || _props$config === void 0 || (_props$config = _props$config.attributes) === null || _props$config === void 0 ? void 0 : _props$config.placement) || "overlay";
   _react.default.useEffect(() => {
     props.handle.api = api();
     let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
@@ -26,21 +28,15 @@ const AlertBar = /*#__PURE__*/_react.default.memo(props => {
       }
     };
     if (_Utils.default.isNull(eventHandlingConfig.subscriptions)) {
-      // Add default subscription
-      eventHandlingConfig.subscriptions = [];
-      let subscription = {
+      eventHandlingConfig.subscriptions = [{
         publisher: 'applicationManager',
         eventType: _EventType.default.MESSAGE_ARRIVED,
         actions: [defaultAction]
-      };
-      eventHandlingConfig.subscriptions.push(subscription);
+      }];
     } else {
       for (const subscription of eventHandlingConfig.subscriptions) {
-        if (_Utils.default.isNull(subscription.actions)) {
-          subscription.actions = [];
-        }
-        if (subscription.actions.length === 0) {
-          subscription.actions.push(defaultAction);
+        if (_Utils.default.isNull(subscription.actions) || subscription.actions.length === 0) {
+          subscription.actions = [defaultAction];
         }
       }
     }
@@ -49,6 +45,41 @@ const AlertBar = /*#__PURE__*/_react.default.memo(props => {
       _Observable.default.clearComponentEventListeners(props.handle);
     };
   }, []);
+
+  /*
+     Show animation when message arrives
+     (hidden first, then visible next frame)
+  */
+  _react.default.useEffect(() => {
+    if (message) {
+      setVisible(false);
+      const frame = requestAnimationFrame(() => {
+        setVisible(true);
+      });
+      return () => cancelAnimationFrame(frame);
+    }
+  }, [message]);
+
+  /*
+     Auto close non-error messages
+  */
+  _react.default.useEffect(() => {
+    if (!message) return;
+    if (variant === "danger") return;
+    const timeout = variant === "warning" ? 6000 : 3000;
+    const timer = setTimeout(() => {
+      closeAlert();
+    }, timeout);
+    return () => clearTimeout(timer);
+  }, [message, variant]);
+  const closeAlert = () => {
+    setVisible(false);
+
+    // allow fade-out animation to complete
+    setTimeout(() => {
+      setMessage(null);
+    }, 250);
+  };
   const api = () => {
     return {
       get id() {
@@ -57,31 +88,43 @@ const AlertBar = /*#__PURE__*/_react.default.memo(props => {
       set message(message) {
         setMessage(message);
       },
-      getChildren: () => {
-        return [];
-      },
       set variant(variant) {
         setVariant(variant);
-      }
+      },
+      getChildren: () => []
     };
   };
+  const overlayStyle = {
+    position: "absolute",
+    top: "calc(var(--view-header-h) + 24px)",
+    left: "50%",
+    transform: "translateX(-50%)",
+    width: "calc(100% - 320px)",
+    maxWidth: "60dvw",
+    zIndex: 1050,
+    pointerEvents: "none"
+  };
+  const strictStyle = {
+    padding: "0 32px",
+    maxHeight: "64px"
+  };
+  const containerStyle = placement === "strict" ? strictStyle : overlayStyle;
   return !_Utils.default.isNull(props.config) ? /*#__PURE__*/_react.default.createElement("div", {
-    style: _Utils.default.mergeStyles({
-      padding: '0 32px 0 32px',
-      maxHeight: '64px'
-    }, props.config)
-  }, /*#__PURE__*/_react.default.createElement(_Alert.default, {
+    style: _Utils.default.mergeStyles(containerStyle, props.config)
+  }, message && /*#__PURE__*/_react.default.createElement(_Alert.default, {
+    className: "alert-fade ".concat(visible ? "alert-show" : "alert-hide"),
     variant: variant,
-    show: !_Utils.default.isNull(message),
-    onClose: () => setMessage(null),
+    onClose: closeAlert,
     dismissible: true,
     style: {
-      width: '100%'
+      width: '100%',
+      pointerEvents: 'auto',
+      boxShadow: '0 6px 16px rgba(0,0,0,0.18)'
     }
   }, /*#__PURE__*/_react.default.createElement("p", {
     title: message,
     style: {
-      color: 'rgba(255, 255, 255, 0.8)',
+      color: 'rgba(255,255,255,0.9)',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',

package/dist/components/TabPage.js

@@ -43,7 +43,9 @@ const TabPage = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.for
   return /*#__PURE__*/_react.default.createElement("div", {
     style: _Utils.default.mergeStyles({
       width: "100%",
-      height: '100%'
+      height: '100%',
+      borderRadius: '4px',
+      padding: '8px'
     }, props.config)
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, _extends({
     component: "div",

package/dist/components/TabPanel.js

@@ -149,7 +149,8 @@ const TabPanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
   return !_Utils.default.isNull(visibleTabPages) && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '100%',
-      height: '100%'
+      height: '100%',
+      borderBottom: '1px solid #d1d1d1'
     }
   }, /*#__PURE__*/_react.default.createElement(_AppBar.default, {
     position: "static",
@@ -157,7 +158,7 @@ const TabPanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
     style: {
       background: 'transparent',
       boxShadow: 'none',
-      border: '1px solid #d1d1d1'
+      borderBottom: '1px solid #e1e1e1'
     }
   }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
     value: tabValue,

package/dist/components/Toolbar.js

@@ -119,6 +119,8 @@ const Toolbar = props => {
     setConfig(props.tableRow ? _objectSpread(_objectSpread({}, props.config), {}, {
       id: props.config.id + '_' + ((_props$tableRow$id = props.tableRow.id) === null || _props$tableRow$id === void 0 ? void 0 : _props$tableRow$id.replaceAll('-', ''))
     }) : props.config);
+    let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+    setVisible(_Utils.default.evaluateBooleanExpression(parsedConfig.visible, parsedConfig.id, true));
   }, []);
   function createButtonItemHandle(id) {
     var _props$tableRow$id2;

package/dist/components/layout/View.css

@@ -59,7 +59,6 @@
 }
 
 .view .sticky-header {
-    position: sticky;
     top: 0;
     z-index: 10;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.8.70",
+  "version": "1.8.72",
   "description": "AgileMotion React UI Component Library - A comprehensive collection of dashboard components, forms, media controls, and more",
   "license": "ISC",
   "author": "",