@abtnode/ux 1.16.20 → 1.16.21-beta-edf184e1

package/lib/contexts/domain.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DomainContext = exports.DomainConsumer = void 0;
+exports.DomainProvider = DomainProvider;
+exports.useDomainContext = useDomainContext;
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _trim = _interopRequireDefault(require("lodash/trim"));
+var _react = require("react");
+var _useSetState = _interopRequireDefault(require("react-use/lib/useSetState"));
+var _util = require("../util");
+var _node = require("./node");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const DomainContext = exports.DomainContext = /*#__PURE__*/(0, _react.createContext)({});
+const {
+  Provider,
+  Consumer
+} = DomainContext;
+
+// eslint-disable-next-line react/prop-types
+exports.DomainConsumer = Consumer;
+function DomainProvider(_ref) {
+  let {
+    children
+  } = _ref;
+  const [state, setState] = (0, _useSetState.default)({
+    domain: '',
+    error: null
+  });
+  const {
+    locale,
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const value = {
+    error: state.error,
+    domain: state.domain,
+    setError: error => {
+      setState({
+        error
+      });
+    },
+    setDomain: domain => {
+      const tmpDomain = (0, _trim.default)(domain);
+      const errMessage = (0, _util.validateDomain)(tmpDomain, locale);
+      setState({
+        domain: tmpDomain,
+        error: errMessage
+      });
+    },
+    validateDomain: async domain => {
+      if (!state.error) {
+        const result = await api.isDidDomain({
+          input: {
+            domain
+          }
+        });
+        if (result.value === true) {
+          setState({
+            error: t('router.domainAlias.add.isDidDomainError')
+          });
+          return false;
+        }
+      }
+      return true;
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
+    value: {
+      value
+    },
+    children: children
+  });
+}
+function useDomainContext() {
+  const {
+    value
+  } = (0, _react.useContext)(DomainContext);
+  return value;
+}

package/lib/form/form-autocomplete-input.js

@@ -0,0 +1,295 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FormAutocompleteInput;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+var _Done = _interopRequireDefault(require("@mui/icons-material/Done"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
+var _FormHelperText = _interopRequireDefault(require("@mui/material/FormHelperText"));
+var _Autocomplete = _interopRequireWildcard(require("@mui/material/Autocomplete"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
+var _required = _interopRequireDefault(require("./required"));
+var _formWrapper = _interopRequireDefault(require("./form-wrapper"));
+var _inputTriggers = _interopRequireDefault(require("./input-triggers"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+const _excluded = ["label", "disabled", "required", "initialValue", "onChange", "style", "onSubmit", "triggers", "options", "formatterBeforeSubmit", "helperText", "placeholder", "renderImage", "filterKeys", "noEmpty"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function FormAutocompleteInput(_ref) {
+  let {
+      label,
+      disabled,
+      required,
+      initialValue,
+      onChange,
+      style,
+      onSubmit,
+      triggers,
+      options,
+      formatterBeforeSubmit,
+      helperText,
+      placeholder,
+      renderImage,
+      filterKeys,
+      noEmpty
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const [editing, setEditing] = (0, _react.useState)(false);
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [inputValue, setInputValue] = _react.default.useState('');
+  const [defaultValue, setDefaultValue] = (0, _react.useState)(initialValue);
+  const [value, setValue] = (0, _react.useState)(defaultValue);
+  const optionsMap = (0, _react.useMemo)(() => {
+    if (!options) {
+      return {};
+    }
+    const cache = {};
+    options.forEach(v => {
+      cache[v.code] = v;
+    });
+    return cache;
+  }, [options]);
+  const filterOptions = () => {
+    if (!options) {
+      return [];
+    }
+    if (!inputValue) {
+      return options.map(v => v.code);
+    }
+    const reg = new RegExp(inputValue.toLowerCase());
+
+    // name 或者其他字段被检索到, 都可以被搜出
+    return options.filter(v => {
+      for (let i = 0; i < filterKeys.length; i++) {
+        var _v$key;
+        const key = filterKeys[i];
+        if (reg.test((_v$key = v[key]) === null || _v$key === void 0 ? void 0 : _v$key.toLowerCase())) {
+          return true;
+        }
+      }
+      return false;
+    }).map(v => v.code);
+  };
+  const handleSubmit = async () => {
+    setLoading(true);
+    try {
+      const shouldUpdate = await onSubmit(typeof formatterBeforeSubmit === 'function' ? formatterBeforeSubmit(value) : value);
+      if (shouldUpdate === false) {
+        setValue(defaultValue);
+      } else if (noEmpty && !value.length) {
+        setValue(initialValue);
+        setDefaultValue(initialValue);
+      } else {
+        setValue(value);
+        setDefaultValue(value);
+      }
+    } catch (err) {
+      setValue(defaultValue);
+    } finally {
+      setLoading(false);
+      setEditing(false);
+    }
+  };
+  const onSelectChange = (_, newValue) => {
+    // 确保 newValue 是数组, 并且每个元素都在 options 中
+    if (!Array.isArray(newValue)) {
+      setValue([]);
+      onChange([]);
+      return;
+    }
+    const nextValue = newValue.filter(x => optionsMap[x]);
+    if (!nextValue.length) {
+      setValue([]);
+      onChange([]);
+      return;
+    }
+    setValue(nextValue);
+    onChange(nextValue);
+  };
+  const input = editing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, _objectSpread({
+    options: options,
+    value: value,
+    onChange: onSelectChange,
+    inputValue: inputValue,
+    onInputChange: (_, newInputValue) => {
+      setInputValue(newInputValue);
+    }
+    // eslint-disable-next-line no-use-before-define
+    ,
+    PopperComponent: StyledPopper,
+    fullWidth: true,
+    multiple: true,
+    variant: "outlined",
+    margin: "dense"
+    // size="small"
+    ,
+    filterOptions: filterOptions,
+    getOptionLabel: option => {
+      var _optionsMap$option;
+      return (_optionsMap$option = optionsMap[option]) === null || _optionsMap$option === void 0 ? void 0 : _optionsMap$option.name;
+    },
+    renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, _objectSpread(_objectSpread({}, params), {}, {
+      label: "",
+      placeholder: placeholder
+    })),
+    renderOption: (props, code) => {
+      var _optionsMap$code;
+      const selected = value.indexOf(code) !== -1;
+      return /*#__PURE__*/(0, _react.createElement)(Row, _objectSpread(_objectSpread({
+        component: "li"
+      }, props), {}, {
+        key: code
+      }), renderImage(optionsMap[code] || {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        sx: {
+          '& > img': {
+            mr: 2,
+            flexShrink: 0
+          }
+        },
+        style: {
+          flex: 1,
+          fontWeight: selected ? '700' : 'normal'
+        },
+        children: (_optionsMap$code = optionsMap[code]) === null || _optionsMap$code === void 0 ? void 0 : _optionsMap$code.name
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        component: _Close.default,
+        sx: {
+          opacity: 0.5,
+          width: 18,
+          height: 18
+        },
+        style: {
+          visibility: selected ? 'visible' : 'hidden'
+        }
+      }));
+    }
+  }, rest)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    px: 1,
+    className: "form-item-input slot",
+    style: {
+      whiteSpace: 'pre-wrap'
+    },
+    children: value.filter(x => options.some(o => o.code === x)).map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+      label: options.find(o => o.code === x).name,
+      style: {
+        marginRight: 8
+      },
+      size: "small"
+    }, x))
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_formWrapper.default, {
+    className: "form",
+    style: style,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      className: "form-item",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        className: "form-item-label",
+        children: [label, required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_required.default, {})]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        className: "form-item-body",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          className: "form-item-input",
+          children: input
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          className: "form-item-action",
+          children: editing ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+              "data-cy": "schema-form-item-confirm",
+              onClick: handleSubmit,
+              disabled: disabled || loading,
+              size: "large",
+              children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+                size: 24
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Done.default, {})
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+              "data-cy": "schema-form-item-cancel",
+              onClick: () => {
+                setValue(defaultValue);
+                setEditing(false);
+              },
+              disabled: disabled || loading,
+              size: "large",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {})
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputTriggers.default, {
+            triggers: triggers,
+            onEnterEdit: () => setEditing(true),
+            disabled: disabled
+          })
+        })]
+      }), editing && helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormHelperText.default, {
+        children: helperText
+      })]
+    })
+  });
+}
+FormAutocompleteInput.propTypes = {
+  style: _propTypes.default.object,
+  onSubmit: _propTypes.default.func,
+  onChange: _propTypes.default.func,
+  label: _propTypes.default.string,
+  initialValue: _propTypes.default.string,
+  required: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  triggers: _propTypes.default.array,
+  options: _propTypes.default.array,
+  helperText: _propTypes.default.string,
+  formatterBeforeSubmit: _propTypes.default.func,
+  placeholder: _propTypes.default.string,
+  renderImage: _propTypes.default.func,
+  filterKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+  noEmpty: _propTypes.default.bool
+};
+FormAutocompleteInput.defaultProps = {
+  style: {},
+  onSubmit: () => {},
+  onChange: () => {},
+  label: '',
+  initialValue: '',
+  required: false,
+  disabled: false,
+  triggers: [],
+  options: [],
+  helperText: '',
+  formatterBeforeSubmit: x => x.join(','),
+  placeholder: '',
+  filterKeys: ['name'],
+  renderImage: () => null,
+  noEmpty: false
+};
+const Row = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: 48px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n  font-size: 1.1em;\n"])));
+const StyledPopper = (0, _styled.default)(_Popper.default)(() => ({
+  ["& .".concat(_Autocomplete.autocompleteClasses.paper)]: {
+    boxShadow: '0px 8px 12px rgba(92, 92, 92, 0.04), 0px -10px 12px rgba(92, 92, 92, 0.04)',
+    borderRadius: '6px',
+    width: '100%',
+    border: '1px solid rgba(0, 0, 0, 0.12)',
+    color: 'inherit',
+    fontSize: 13,
+    position: 'absolute',
+    left: 0,
+    top: 0
+  },
+  ["& .".concat(_Autocomplete.autocompleteClasses.listbox)]: {
+    padding: 0
+  }
+}));

package/lib/hooks/use-snackbar.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _notistack = require("notistack");
+var _default = exports.default = _notistack.useSnackbar;

package/lib/hooks/use-width.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styles = require("@mui/styles");
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function useWidth() {
+  const theme = (0, _styles.useTheme)();
+  const keys = [...theme.breakpoints.keys].reverse();
+  return keys.reduce((output, key) => {
+    // eslint-disable-next-line
+    const matches = (0, _useMediaQuery.default)(theme.breakpoints.up(key));
+    return !output && matches ? key : output;
+  }, null) || 'xs';
+}
+var _default = exports.default = useWidth;

package/lib/locales/en.js

@@ -941,8 +941,8 @@ var _default = exports.default = {
         description: 'Please provide a valid site domain'
       },
       setup: {
-        tipStart: 'Please ensure that the domain name',
-        tipEnd: 'has been correctly resolved',
+        tipStart: 'Add the DNS records for the domain',
+        tipEnd: 'as per the following guidelines',
         recordType: 'Record Type',
         recordValue: 'Record Value'
       },
@@ -963,25 +963,27 @@ var _default = exports.default = {
     domainAlias: {
       inputDomain: 'Manually config domain',
       nftDomain: 'Automatic config with DID Domain',
+      showTipHint: 'How do I configure domain name resolution?',
       add: {
         title: 'Add Additional Domain',
         domainDescription: 'Please provide a valid domain name',
         forceTip: 'Force add if domain name already exists',
-        helperText: 'If an HTTP or HTTPS URL is entered, it will be automatically converted into a domain name.'
+        helperText: 'If an HTTP or HTTPS URL is entered, it will be automatically converted into a domain name.',
+        isDidDomainError: 'This domain is a DID Domain. Please add it using the method for automatic domain configuration.'
       },
       addCustomDomain: {
         name: 'Custom Domain'
       },
       addDomainNFT: {
-        showNFT: 'Show NFT',
-        tips: 'NFT Domain will do the domain name resolution automatically, no need to configure it manually, and the application will update the resolution record of the domain name automatically when needed.',
+        showNFT: 'Configure domain automatically',
+        tips: 'DID Domain will do the domain name resolution automatically, no need to configure it manually, and the application will update the resolution record of the domain name automatically when needed.',
         connect: {
           title: 'Please show your Domain NFT',
           scan: 'Scan following QR code with DID Wallet to authorize to blocklet to use your domain',
           confirm: 'Confirm on your DID Wallet',
           success: 'Authorization Successfully'
         },
-        buyTip: "If your don't have domain yet, ",
+        buyTip: "If your don't have DID Domain NFT yet, ",
         buy: 'buy it now!'
       },
       delete: {

package/lib/locales/zh.js

@@ -944,8 +944,8 @@ var _default = exports.default = {
         description: '请填写你所拥有的合法的站点域名'
       },
       setup: {
-        tipStart: '请确保',
-        tipEnd: '域名已经被正确解析',
+        tipStart: '请将',
+        tipEnd: '域名的 DNS 记录按照下面的提示添加',
         recordType: '记录类型',
         recordValue: '记录值'
       },
@@ -966,26 +966,28 @@ var _default = exports.default = {
     domainAlias: {
       inputDomain: '手动配置域名',
       nftDomain: '通过 DID Domain 自动配置域名',
+      showTipHint: '如何配置域名解析？',
       add: {
         title: '添加额外域名',
         domainDescription: '请填写有效的域名',
         forceTip: '当域名已存在时强制添加',
-        helperText: '如果输入 HTTP 或者 HTTPS URL, 则会被自动转换为域名。'
+        helperText: '如果输入 HTTP 或者 HTTPS URL, 则会被自动转换为域名。',
+        isDidDomainError: '该域名是 DID Domain, 请使用自动配置域名的方式添加该域名。'
       },
       addCustomDomain: {
         name: '自定义域名'
       },
       addDomainNFT: {
         name: 'NFT 域名',
-        showNFT: '出示 NFT',
-        tips: 'NFT 域名会自动完成域名解析，无需手动配置，并且应用会在需要的时候自动更新该域名的解析记录。',
+        showNFT: '自动配置域名',
+        tips: 'DID 域名会自动完成域名解析，无需手动配置，并且应用会在需要的时候自动更新该域名的解析记录。',
         connect: {
           title: '请出示域名 NFT',
           scan: '用 DID 钱包扫描下面的二维码, 出示域名 NFT',
           confirm: '在您的 DID 钱包上确认',
           success: '授权成功'
         },
-        buyTip: '如果还没有域名 NFT, ',
+        buyTip: '如果还没有 DID 域名 NFT, ',
         buy: '现在购买!'
       },
       delete: {

package/lib/notifications/addon.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NotificationAddon;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAwayListener"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
+var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
+var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
+var _Notification = _interopRequireDefault(require("@arcblock/icons/lib/Notification"));
+var _list = _interopRequireDefault(require("./list"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable import/no-unresolved */
+/* eslint-disable react/jsx-one-expression-per-line */
+
+function NotificationAddon(_ref) {
+  let {
+    api,
+    notifications,
+    updateNotifications,
+    viewAllUrl,
+    teamDid
+  } = _ref;
+  const [notificationOpen, setNotificationOpen] = (0, _react.useState)(false);
+  const notificationAnchorRef = (0, _react.useRef)(null);
+  const onToggleNotification = () => {
+    setNotificationOpen(prevOpen => !prevOpen);
+  };
+  const onCloseNotification = e => {
+    if (notificationAnchorRef.current && notificationAnchorRef.current.contains(e.target)) {
+      return;
+    }
+    setNotificationOpen(false);
+  };
+  const unreadCount = notifications.filter(x => x.read === false).length;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "notification-addon",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      ref: notificationAnchorRef,
+      "aria-controls": "notify-list-grow",
+      "aria-haspopup": "true",
+      "data-cy": "toggle-notification-btn",
+      onClick: onToggleNotification,
+      children: unreadCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+        badgeContent: unreadCount,
+        max: 99,
+        color: "primary",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Notification.default, {
+          style: {
+            width: 'auto',
+            height: 24
+          }
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Notification.default, {
+        style: {
+          width: 'auto',
+          height: 24
+        }
+      })
+    }), notificationOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popper.default, {
+      open: true,
+      anchorEl: notificationAnchorRef.current,
+      disablePortal: true,
+      placement: "bottom-end",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paper.default, {
+        id: "notify-list-grow",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayListener.default, {
+          onClickAway: onCloseNotification,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_list.default, {
+              notifications: notifications,
+              updateNotifications: updateNotifications,
+              api: api,
+              viewAllUrl: viewAllUrl,
+              onHide: onCloseNotification,
+              teamDid: teamDid
+            })
+          })
+        })
+      })
+    })]
+  });
+}
+NotificationAddon.propTypes = {
+  notifications: _propTypes.default.arrayOf(_propTypes.default.object),
+  viewAllUrl: _propTypes.default.string.isRequired,
+  api: _propTypes.default.object.isRequired,
+  updateNotifications: _propTypes.default.func.isRequired,
+  teamDid: _propTypes.default.string
+};
+NotificationAddon.defaultProps = {
+  notifications: [],
+  teamDid: ''
+};

package/lib/notifications/default-icon-variants.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _SvgIcon = _interopRequireDefault(require("@mui/material/SvgIcon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function CheckIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
+    })
+  }));
+}
+function WarningIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"
+    })
+  }));
+}
+function ErrorIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2, 6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12, 13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
+    })
+  }));
+}
+function InfoIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12A10,10 0 0,0 12,2Z"
+    })
+  }));
+}
+const iconStyles = {
+  fontSize: 20,
+  marginInlineEnd: 8
+};
+const defaultIconVariants = {
+  success: /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckIcon, {
+    style: iconStyles
+  }),
+  warning: /*#__PURE__*/(0, _jsxRuntime.jsx)(WarningIcon, {
+    style: iconStyles
+  }),
+  error: /*#__PURE__*/(0, _jsxRuntime.jsx)(ErrorIcon, {
+    style: iconStyles
+  }),
+  info: /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoIcon, {
+    style: iconStyles
+  })
+};
+var _default = exports.default = defaultIconVariants;