intelicoreact 1.5.40 → 1.6.0

package/dist/Atomic/UI/TagList/TagList.js

@@ -1,187 +1,231 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _reactFeather = require("react-feather");
-var _utils = require("../../../Functions/utils");
-var _Tag = _interopRequireDefault(require("../Tag/Tag"));
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _reactfeather = require("react-feather");
+const _utils = require("../../../Functions/utils");
+const _Tag = /*#__PURE__*/ _interop_require_default(require("../Tag/Tag"));
 require("./TagList.scss");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && {}.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; }
-const TagList = _ref => {
-  let {
-    disabled,
-    className,
-    onTagClick,
-    removeItem = null,
-    items = [],
-    withToggle = true,
-    disableShowMore = false,
-    shownItemsCount = "auto",
-    testId = "test-taglist",
-    refProp,
-    renderOrder,
-    onEditClick,
-    onToggleRenderAll
-  } = _ref;
-  const wrapperRef = (0, _react.useRef)(null);
-  const [tagList, setTagList] = (0, _react.useState)([]);
-  const [staticTagsCount, setStaticTagsCount] = (0, _react.useState)(-1);
-  const [renderItemsCount, setRenderItemsCount] = (0, _react.useState)(-1);
-  const [renderAll, setRenderAll] = (0, _react.useState)(!withToggle);
-  const wrapperWidth = wrapperRef?.current?.getBoundingClientRect()?.width ?? -1;
-  const setRenderAllInterceptor = v => {
-    setRenderAll(v);
-    onToggleRenderAll?.(v);
-  };
-  const getStaticTagsCount = computedWidth => {
-    if (typeof shownItemsCount === "number") return shownItemsCount;
-    const delta = typeof onEditClick === "function" ? 60 : 32;
-    const result = tagList.reduce((result, _ref2, index) => {
-      let {
-        itemRef
-      } = _ref2;
-      if (result.skip) return result;
-      const itemStyle = itemRef?.current && window.getComputedStyle(itemRef.current);
-      const itemWidth = [parseInt(itemRef.current?.getBoundingClientRect()?.width, 10), parseInt(itemStyle?.marginLeft, 10), parseInt(itemStyle?.marginRight, 10)].reduce((result, item) => {
-        if (!isNaN(item)) result += item;
-        return result;
-      }, 0);
-      if (!isNaN(itemWidth) && itemWidth > 0 && itemWidth + result.width < computedWidth - delta || index === 0) {
-        result = {
-          count: result.count + 1,
-          width: result.width + itemWidth,
-          items: [...result.items, {
-            w: itemWidth,
-            r: itemRef?.current
-          }]
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
         };
-      } else {
-        result.skip = true;
-      }
-      return result;
-    }, {
-      count: 0,
-      width: 0,
-      items: [],
-      skip: false
-    });
-    if (result?.items?.length === 1 && tagList.length > 1) {
-      result.items[0].r.style.maxWidth = `${computedWidth - delta - 8}px`;
     }
-    return result?.count;
-  };
-  const cancelDefault = function (e) {
-    let cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
-    e?.preventDefault();
-    e?.stopPropagation();
-    cb(e);
-  };
-  const renderTags = () => {
-    const tagsRenderOrder = renderOrder ?? tagList.map(_ref3 => {
-      let {
-        value,
-        id
-      } = _ref3;
-      return value ?? id;
-    });
-    return tagsRenderOrder.map((v, i) => {
-      const item = tagList.find(_ref4 => {
-        let {
-          value,
-          id
-        } = _ref4;
-        return (value ?? id) === v;
-      });
-      if (!item) return null;
-      const isHidden = renderItemsCount !== -1 && staticTagsCount !== -1 ? i >= renderItemsCount : false;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: `tag-list_wrapper_item ${isHidden ? "tag-list_wrapper_item--hidden" : ""}`,
-        key: `tag-list-item-${item?.id ?? item?.value}`,
-        ref: (0, _utils.checkedRef)(item?.itemRef)
-      }, /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({
-        testId: `test-taglist-item-${item?.id ?? item?.value}`
-      }, item, {
-        onClick: onTagClick,
-        removeItem: removeItem
-      })));
-    });
-  };
-  const renderMoreTags = () => {
-    if (tagList?.length < shownItemsCount || !tagList?.length || disableShowMore) return null;
-    const restItems = tagList.length - renderItemsCount;
-    if (restItems === 0 || !withToggle || staticTagsCount === -1) return null;
-    return /*#__PURE__*/_react.default.createElement(_Tag.default, {
-      label: `+${restItems}`,
-      className: "tag-list_wrapper_render-more",
-      onClick: disableShowMore ? () => {} : e => cancelDefault(e, () => setRenderAllInterceptor(true))
-    });
-  };
-  const renderHideTags = () => {
-    if (renderItemsCount !== tagList?.length || !withToggle || staticTagsCount === -1 || staticTagsCount === tagList?.length) return null;
-    return /*#__PURE__*/_react.default.createElement(_Tag.default, {
-      label: "...",
-      className: "tag-list_wrapper_hide-more",
-      onClick: e => cancelDefault(e, () => setRenderAllInterceptor(false))
-    });
-  };
-
-  // Set TagList Items
-  (0, _react.useEffect)(() => {
-    setStaticTagsCount(-1);
-    setRenderItemsCount(-1);
-    setRenderAllInterceptor(false);
-    setTagList(items.map(item => ({
-      ...item,
-      itemRef: /*#__PURE__*/(0, _react.createRef)()
-    })));
-  }, [items]);
-
-  // Count Row Tags
-  (0, _react.useLayoutEffect)(() => {
-    if (withToggle && wrapperWidth !== -1 && staticTagsCount === -1) {
-      let computedWidth = wrapperWidth;
-      if (computedWidth === 0) {
-        computedWidth = parseInt(wrapperRef?.current ? window.getComputedStyle(wrapperRef?.current)?.width : 0);
-      }
-      if (!isNaN(computedWidth)) {
-        setStaticTagsCount(getStaticTagsCount(computedWidth));
-      }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
     }
-  }, [tagList, wrapperWidth, wrapperRef?.current]);
-
-  //
-  (0, _react.useLayoutEffect)(() => {
-    setRenderItemsCount(staticTagsCount);
-  }, [staticTagsCount]);
-
-  // Toggle Show/Hide More Tags
-  (0, _react.useEffect)(() => {
-    setRenderItemsCount(renderAll ? tagList?.length : staticTagsCount);
-  }, [renderAll]);
-  (0, _react.useEffect)(() => {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    if (wrapperRef?.current && refProp) refProp.current = wrapperRef?.current;
-  }, [wrapperRef?.current]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("tag-list_wrapper", `${renderItemsCount !== tagList?.length || !withToggle || staticTagsCount === -1 || staticTagsCount === tagList?.length ? "tag-list_wrapper--only-static-items" : "tag-list_wrapper--all-items"}`, className, {
-      "tag-list_wrapper--disabled": disabled
-    }),
-    style: {
-      visibility: staticTagsCount === -1 ? "hidden" : "visible",
-      zIndex: staticTagsCount === -1 ? "-1" : "auto"
-    },
-    ref: wrapperRef
-  }, renderTags(), renderMoreTags(), renderHideTags(), typeof onEditClick === "function" && /*#__PURE__*/_react.default.createElement("div", {
-    className: "tag-list__edit-trigger"
-  }, /*#__PURE__*/_react.default.createElement(_reactFeather.Edit3, {
-    onClick: onEditClick
-  })));
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const TagList = ({ disabled, className, onTagClick, removeItem = null, items = [], withToggle = true, disableShowMore = false, shownItemsCount = "auto", testId = "test-taglist", refProp, renderOrder, onEditClick, onToggleRenderAll })=>{
+    var _wrapperRef_current_getBoundingClientRect, _wrapperRef_current;
+    const wrapperRef = (0, _react.useRef)(null);
+    const [tagList, setTagList] = (0, _react.useState)([]);
+    const [staticTagsCount, setStaticTagsCount] = (0, _react.useState)(-1);
+    const [renderItemsCount, setRenderItemsCount] = (0, _react.useState)(-1);
+    const [renderAll, setRenderAll] = (0, _react.useState)(!withToggle);
+    var _wrapperRef_current_getBoundingClientRect_width;
+    const wrapperWidth = (_wrapperRef_current_getBoundingClientRect_width = wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef_current = wrapperRef.current) === null || _wrapperRef_current === void 0 ? void 0 : (_wrapperRef_current_getBoundingClientRect = _wrapperRef_current.getBoundingClientRect()) === null || _wrapperRef_current_getBoundingClientRect === void 0 ? void 0 : _wrapperRef_current_getBoundingClientRect.width) !== null && _wrapperRef_current_getBoundingClientRect_width !== void 0 ? _wrapperRef_current_getBoundingClientRect_width : -1;
+    const setRenderAllInterceptor = (v)=>{
+        setRenderAll(v);
+        onToggleRenderAll === null || onToggleRenderAll === void 0 ? void 0 : onToggleRenderAll(v);
+    };
+    const getStaticTagsCount = (computedWidth)=>{
+        var _result_items;
+        if (typeof shownItemsCount === "number") return shownItemsCount;
+        const delta = typeof onEditClick === "function" ? 60 : 32;
+        const result = tagList.reduce((result, { itemRef }, index)=>{
+            var _itemRef_current_getBoundingClientRect, _itemRef_current;
+            if (result.skip) return result;
+            const itemStyle = (itemRef === null || itemRef === void 0 ? void 0 : itemRef.current) && window.getComputedStyle(itemRef.current);
+            const itemWidth = [
+                parseInt((_itemRef_current = itemRef.current) === null || _itemRef_current === void 0 ? void 0 : (_itemRef_current_getBoundingClientRect = _itemRef_current.getBoundingClientRect()) === null || _itemRef_current_getBoundingClientRect === void 0 ? void 0 : _itemRef_current_getBoundingClientRect.width, 10),
+                parseInt(itemStyle === null || itemStyle === void 0 ? void 0 : itemStyle.marginLeft, 10),
+                parseInt(itemStyle === null || itemStyle === void 0 ? void 0 : itemStyle.marginRight, 10)
+            ].reduce((result, item)=>{
+                if (!isNaN(item)) result += item;
+                return result;
+            }, 0);
+            if (!isNaN(itemWidth) && itemWidth > 0 && itemWidth + result.width < computedWidth - delta || index === 0) {
+                result = {
+                    count: result.count + 1,
+                    width: result.width + itemWidth,
+                    items: [
+                        ...result.items,
+                        {
+                            w: itemWidth,
+                            r: itemRef === null || itemRef === void 0 ? void 0 : itemRef.current
+                        }
+                    ]
+                };
+            } else {
+                result.skip = true;
+            }
+            return result;
+        }, {
+            count: 0,
+            width: 0,
+            items: [],
+            skip: false
+        });
+        if ((result === null || result === void 0 ? void 0 : (_result_items = result.items) === null || _result_items === void 0 ? void 0 : _result_items.length) === 1 && tagList.length > 1) {
+            result.items[0].r.style.maxWidth = `${computedWidth - delta - 8}px`;
+        }
+        return result === null || result === void 0 ? void 0 : result.count;
+    };
+    const cancelDefault = (e, cb = ()=>{})=>{
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        cb(e);
+    };
+    const renderTags = ()=>{
+        const tagsRenderOrder = renderOrder !== null && renderOrder !== void 0 ? renderOrder : tagList.map(({ value, id })=>value !== null && value !== void 0 ? value : id);
+        return tagsRenderOrder.map((v, i)=>{
+            const item = tagList.find(({ value, id })=>(value !== null && value !== void 0 ? value : id) === v);
+            if (!item) return null;
+            const isHidden = renderItemsCount !== -1 && staticTagsCount !== -1 ? i >= renderItemsCount : false;
+            var _item_id, _item_id1;
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: `tag-list_wrapper_item ${isHidden ? "tag-list_wrapper_item--hidden" : ""}`,
+                ref: (0, _utils.checkedRef)(item === null || item === void 0 ? void 0 : item.itemRef),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+                    testId: `test-taglist-item-${(_item_id = item === null || item === void 0 ? void 0 : item.id) !== null && _item_id !== void 0 ? _item_id : item === null || item === void 0 ? void 0 : item.value}`,
+                    ...item,
+                    onClick: onTagClick,
+                    removeItem: removeItem
+                })
+            }, `tag-list-item-${(_item_id1 = item === null || item === void 0 ? void 0 : item.id) !== null && _item_id1 !== void 0 ? _item_id1 : item === null || item === void 0 ? void 0 : item.value}`);
+        });
+    };
+    const renderMoreTags = ()=>{
+        if ((tagList === null || tagList === void 0 ? void 0 : tagList.length) < shownItemsCount || !(tagList === null || tagList === void 0 ? void 0 : tagList.length) || disableShowMore) return null;
+        const restItems = tagList.length - renderItemsCount;
+        if (restItems === 0 || !withToggle || staticTagsCount === -1) return null;
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+            label: `+${restItems}`,
+            className: "tag-list_wrapper_render-more",
+            onClick: disableShowMore ? ()=>{} : (e)=>cancelDefault(e, ()=>setRenderAllInterceptor(true))
+        });
+    };
+    const renderHideTags = ()=>{
+        if (renderItemsCount !== (tagList === null || tagList === void 0 ? void 0 : tagList.length) || !withToggle || staticTagsCount === -1 || staticTagsCount === (tagList === null || tagList === void 0 ? void 0 : tagList.length)) return null;
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+            label: "...",
+            className: "tag-list_wrapper_hide-more",
+            onClick: (e)=>cancelDefault(e, ()=>setRenderAllInterceptor(false))
+        });
+    };
+    // Set TagList Items
+    (0, _react.useEffect)(()=>{
+        setStaticTagsCount(-1);
+        setRenderItemsCount(-1);
+        setRenderAllInterceptor(false);
+        setTagList(items.map((item)=>({
+                ...item,
+                itemRef: /*#__PURE__*/ (0, _react.createRef)()
+            })));
+    }, [
+        items
+    ]);
+    // Count Row Tags
+    (0, _react.useLayoutEffect)(()=>{
+        if (withToggle && wrapperWidth !== -1 && staticTagsCount === -1) {
+            let computedWidth = wrapperWidth;
+            if (computedWidth === 0) {
+                var _window_getComputedStyle;
+                computedWidth = parseInt((wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) ? (_window_getComputedStyle = window.getComputedStyle(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) === null || _window_getComputedStyle === void 0 ? void 0 : _window_getComputedStyle.width : 0);
+            }
+            if (!isNaN(computedWidth)) {
+                setStaticTagsCount(getStaticTagsCount(computedWidth));
+            }
+        }
+    }, [
+        tagList,
+        wrapperWidth,
+        wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current
+    ]);
+    //
+    (0, _react.useLayoutEffect)(()=>{
+        setRenderItemsCount(staticTagsCount);
+    }, [
+        staticTagsCount
+    ]);
+    // Toggle Show/Hide More Tags
+    (0, _react.useEffect)(()=>{
+        setRenderItemsCount(renderAll ? tagList === null || tagList === void 0 ? void 0 : tagList.length : staticTagsCount);
+    }, [
+        renderAll
+    ]);
+    (0, _react.useEffect)(()=>{
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        if ((wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) && refProp) refProp.current = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current;
+    }, [
+        wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: (0, _classnames.default)("tag-list_wrapper", `${renderItemsCount !== (tagList === null || tagList === void 0 ? void 0 : tagList.length) || !withToggle || staticTagsCount === -1 || staticTagsCount === (tagList === null || tagList === void 0 ? void 0 : tagList.length) ? "tag-list_wrapper--only-static-items" : "tag-list_wrapper--all-items"}`, className, {
+            "tag-list_wrapper--disabled": disabled
+        }),
+        style: {
+            visibility: staticTagsCount === -1 ? "hidden" : "visible",
+            zIndex: staticTagsCount === -1 ? "-1" : "auto"
+        },
+        ref: wrapperRef,
+        children: [
+            renderTags(),
+            renderMoreTags(),
+            renderHideTags(),
+            typeof onEditClick === "function" && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "tag-list__edit-trigger",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Edit3, {
+                    onClick: onEditClick
+                })
+            })
+        ]
+    });
 };
-var _default = exports.default = TagList;
+const _default = TagList;

package/dist/Atomic/UI/TagList/TagList.scss

@@ -1,17 +1,16 @@
 .tag-list_wrapper {
   display: flex;
   flex-wrap: wrap;
+  gap: 4px;
 
   width: 100%;
   min-width: 100%;
   max-width: 100%;
 
-  gap: 4px;
-
   &--disabled {
     filter: grayscale(0.2);
     * {
-      pointer-events: none!important;
+      pointer-events: none !important;
     }
   }
 
@@ -25,16 +24,18 @@
 
   &_item {
     display: inline-block;
+
     box-sizing: border-box;
     width: auto;
 
     .tag {
-      max-width: 100%;
-      margin: 0!important;
       box-sizing: border-box;
+      max-width: 100%;
+      margin: 0 !important;
 
       &__label {
         overflow: hidden;
+
         text-overflow: ellipsis;
       }
     }
@@ -46,7 +47,8 @@
 
   &_render-more,
   &_hide-more {
-    margin: 0!important;
+    margin: 0 !important;
+
     cursor: pointer;
 
     background: #ffedc8;
@@ -61,14 +63,16 @@
   display: flex;
   align-items: center;
   align-self: stretch;
-  padding: 2px;
+
   box-sizing: border-box;
+  padding: 2px;
+
   cursor: pointer;
 
   svg {
     width: 16px;
     height: 16px;
-    color: #6B81DD;
+
+    color: #6b81dd;
   }
 }
-

package/dist/Atomic/UI/UserBox/UserBox.js

@@ -1,62 +1,86 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _utils = require("../../../Functions/utils");
-var _Label = _interopRequireDefault(require("../../FormElements/Label/Label"));
-var _Button = _interopRequireDefault(require("../Button/Button"));
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _utils = require("@/Functions/utils");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _Label = /*#__PURE__*/ _interop_require_default(require("../../FormElements/Label/Label"));
+const _Button = /*#__PURE__*/ _interop_require_default(require("../Button/Button"));
 require("./UserBox.scss");
-const UserBox = _ref => {
-  let {
-    name = "Username",
-    role,
-    id,
-    onClick,
-    isModal,
-    className,
-    colors,
-    testId = "userbox"
-  } = _ref;
-  const getNameFirstLetter = name.charAt(0).toUpperCase();
-  const renderUser = () => {
-    if (isModal) {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const UserBox = ({ name = 'Username', role, id, onClick, isModal, className, colors, testId = 'userbox' })=>{
+    const getNameFirstLetter = name.charAt(0).toUpperCase();
+    const renderUser = ()=>{
+        if (isModal) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            backgroundColor: (0, _utils.getColorById)(id, colors)
+                        },
+                        className: "td-user-box__avatar",
+                        children: getNameFirstLetter
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "td-user-box__user-data",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                className: "p0 no-shadow",
+                                onClick: onClick,
+                                label: name,
+                                variant: "link"
+                            }),
+                            role && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                children: role
+                            })
+                        ]
+                    })
+                ]
+            });
+        } else {
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            backgroundColor: (0, _utils.getColorById)(id)
+                        },
+                        className: "td-user-box__avatar",
+                        children: getNameFirstLetter
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "td-user-box__user-data",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                                label: name
+                            }),
+                            role && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                "aria-label": `User role: ${role}`,
+                                children: role
+                            })
+                        ]
+                    })
+                ]
+            });
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         "data-testid": testId,
-        style: {
-          backgroundColor: (0, _utils.getColorById)(id, colors)
-        },
-        className: "td-user-box__avatar"
-      }, getNameFirstLetter), /*#__PURE__*/_react.default.createElement("div", {
-        className: "td-user-box__user-data",
-        "data-testid": `${testId}-data`
-      }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-        className: "p0 no-shadow",
-        onClick: onClick,
-        label: name,
-        variant: "link"
-      }), role && /*#__PURE__*/_react.default.createElement("span", null, role)));
-    } else {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-        "data-testid": testId,
-        style: {
-          backgroundColor: (0, _utils.getColorById)(id)
-        },
-        className: "td-user-box__avatar"
-      }, getNameFirstLetter), /*#__PURE__*/_react.default.createElement("div", {
-        className: "td-user-box__user-data",
-        "data-testid": `${testId}-data`
-      }, /*#__PURE__*/_react.default.createElement(_Label.default, {
-        label: name
-      }), role && /*#__PURE__*/_react.default.createElement("span", null, role)));
-    }
-  };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("td-user-box", className)
-  }, renderUser());
+        className: (0, _classnames.default)('td-user-box', className),
+        role: "region",
+        "aria-label": `User box for ${name}`,
+        children: renderUser()
+    });
 };
-var _default = exports.default = UserBox;
+const _default = UserBox;