@ssa-ui-kit/core 2.31.0 → 2.32.0

package/dist/index.js

@@ -1102,6 +1102,7 @@ __webpack_require__.d(Field_index_parts_namespaceObject, {
 var JsonSchemaForm_namespaceObject = {};
 __webpack_require__.r(JsonSchemaForm_namespaceObject);
 __webpack_require__.d(JsonSchemaForm_namespaceObject, {
+  DEFAULT_AVATAR_SIZE: () => (DEFAULT_AVATAR_SIZE),
   Fields: () => (fields),
   Form: () => (JsonSchemaForm_Form),
   Templates: () => (templates),
@@ -8226,7 +8227,8 @@ const useTooltip = props => {
     size = 'small',
     hasArrow = true,
     arrowProps = {},
-    isOpen: isInitOpen = false
+    isOpen: isInitOpen = false,
+    allowHoverContent = false
   } = props || {};
   const [isOpen, setIsOpen] = (0,external_react_namespaceObject.useState)(isInitOpen || false);
   const arrowRef = (0,external_react_namespaceObject.useRef)(null);
@@ -8244,7 +8246,8 @@ const useTooltip = props => {
   } = floatingData;
   const hover = (0,external_floating_ui_react_namespaceObject.useHover)(context, {
     enabled: enableHover,
-    move: true
+    move: true,
+    handleClose: allowHoverContent ? (0,external_floating_ui_react_namespaceObject.safePolygon)() : undefined
   });
   const click = (0,external_floating_ui_react_namespaceObject.useClick)(context, {
     enabled: enableClick
@@ -14350,54 +14353,72 @@ function PersonInfo_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have t
 
 
 const PersonInfoBase = /*#__PURE__*/base_default()("div",  true ? {
-  target: "ej2kihb12"
+  target: "ej2kihb15"
 } : 0)( true ? {
   name: "3w0yoi",
   styles: "display:flex;flex-direction:column;gap:8px"
 } : 0);
 const PersonInfoHeader = /*#__PURE__*/base_default()("div",  true ? {
-  target: "ej2kihb11"
+  target: "ej2kihb14"
 } : 0)( true ? {
   name: "1ocjxm6",
   styles: "display:flex;align-items:flex-start;gap:8px"
 } : 0);
 const styles_IconWrapper = /*#__PURE__*/base_default()("div",  true ? {
-  target: "ej2kihb10"
+  target: "ej2kihb13"
 } : 0)( true ? {
   name: "13ltyg2",
   styles: "display:flex;align-items:flex-start;flex-shrink:0"
 } : 0);
 const styles_TitleWrapper = /*#__PURE__*/base_default()("div",  true ? {
-  target: "ej2kihb9"
+  target: "ej2kihb12"
 } : 0)( true ? {
   name: "1tcizyl",
   styles: "display:flex;flex-direction:column;gap:4px;flex:1"
 } : 0);
 const Title = /*#__PURE__*/base_default()("div",  true ? {
-  target: "ej2kihb8"
+  target: "ej2kihb11"
 } : 0)( true ? {
   name: "edklr6",
   styles: "font-size:14px;font-weight:600;line-height:19px"
 } : 0);
+const Row = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb10"
+} : 0)( true ? {
+  name: "1j5vobt",
+  styles: "display:flex;align-items:center;gap:4px"
+} : 0);
 const TextBase = /*#__PURE__*/base_default()("div",  true ? {
-  target: "ej2kihb7"
+  target: "ej2kihb9"
 } : 0)( true ? {
   name: "1bzpq77",
   styles: "font-size:14px;font-weight:400;line-height:19px"
 } : 0);
 const ValueWithCounter = /*#__PURE__*/base_default()("div",  true ? {
-  target: "ej2kihb6"
+  target: "ej2kihb8"
 } : 0)( true ? {
   name: "1j5vobt",
   styles: "display:flex;align-items:center;gap:4px"
 } : 0);
 const Counter = /*#__PURE__*/base_default()(TextBase.withComponent('span',  true ? {
-  target: "ej2kihb13"
+  target: "ej2kihb16"
 } : 0),  true ? {
-  target: "ej2kihb5"
+  target: "ej2kihb7"
 } : 0)("color:", ({
   theme
-}) => theme.colors.greyDropdownFocused, ";margin-left:5px;" + ( true ? "" : 0));
+}) => theme.colors.greyDropdownFocused, ";margin-left:5px;cursor:pointer;" + ( true ? "" : 0));
+const CounterTooltipContent = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb6"
+} : 0)( true ? {
+  name: "1oeds5o",
+  styles: "min-width:220px;padding:12px"
+} : 0);
+const CounterTooltipList = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb5"
+} : 0)( true ? {
+  name: "1acx518",
+  styles: "display:flex;flex-direction:column;gap:8px;height:auto;max-height:220px;overflow:hidden;overflow-y:auto;padding-right:4px"
+} : 0);
 const AttributesList = /*#__PURE__*/base_default()("div",  true ? {
   target: "ej2kihb4"
 } : 0)( true ? {
@@ -14441,6 +14462,29 @@ const CustomBadge = /*#__PURE__*/base_default()("div",  true ? {
   } = BADGE_COLORS(theme)[colorName];
   return bg;
 }, ";" + ( true ? "" : 0));
+const personInfoValueLinkStyles = theme => ({
+  textDecoration: 'none',
+  color: theme.colors.greyDarker,
+  cursor: 'pointer',
+  transition: 'color 0.2s ease',
+  display: 'inline-flex',
+  alignItems: 'center',
+  '&:hover': {
+    color: theme.colors.blue
+  }
+});
+const avatarWrapperLinkStyles = theme => ({
+  textDecoration: 'none',
+  color: theme.colors.greyDarker,
+  cursor: 'pointer',
+  transition: 'color 0.2s ease',
+  '&:hover': {
+    color: theme.colors.blue,
+    '& > div:last-child': {
+      color: theme.colors.blue
+    }
+  }
+});
 ;// ./src/components/PersonInfo/PersonInfoIcon.tsx
 
 
@@ -14465,17 +14509,25 @@ const PersonInfoIcon = ({
 
 const PersonInfoValue = ({
   value,
-  counter,
   css,
-  counterCss
+  linkAttributes
 }) => {
-  return (0,jsx_runtime_namespaceObject.jsxs)(TextBase, {
-    css: css,
-    children: [value, counter && (0,jsx_runtime_namespaceObject.jsxs)(Counter, {
-      css: counterCss,
-      children: [" ", counter]
-    })]
-  });
+  const isLink = Boolean(linkAttributes?.href);
+  return (0,jsx_runtime_namespaceObject.jsx)(TextBase, {
+    css: [isLink ? personInfoValueLinkStyles : undefined, css,  true ? "" : 0,  true ? "" : 0],
+    ...(linkAttributes ?? {}),
+    children: value
+  });
+};
+;// ./src/components/PersonInfo/helpers.ts
+const getLinkAttributes = (link, openLinkInNewTab) => {
+  const isLink = Boolean(link);
+  return isLink ? {
+    as: 'a',
+    href: link,
+    target: openLinkInNewTab ? '_blank' : undefined,
+    rel: openLinkInNewTab ? 'noreferrer' : undefined
+  } : {};
 };
 ;// ./src/components/PersonInfo/PersonInfoAvatar.tsx
 
@@ -14483,22 +14535,34 @@ const PersonInfoValue = ({
 
 
 
+
 const PersonInfoAvatar = ({
   avatar,
   value,
-  counter,
-  styles
+  styles,
+  link,
+  openLinkInNewTab
 }) => {
+  const hasAvatar = Boolean(avatar);
+  const hasValue = Boolean(value);
+  const isLink = Boolean(link);
+  const linkAttributes = getLinkAttributes(link, openLinkInNewTab);
+  if (!hasAvatar && !hasValue) return null;
+  const valueNode = hasValue ? (0,jsx_runtime_namespaceObject.jsx)(PersonInfoValue, {
+    value: value,
+    css: hasAvatar ? styles?.avatarName : styles?.value,
+    linkAttributes: !hasAvatar ? linkAttributes : undefined
+  }) : null;
+  if (!hasAvatar) {
+    return valueNode;
+  }
   return (0,jsx_runtime_namespaceObject.jsxs)(styles_AvatarWrapper, {
+    css: isLink ? avatarWrapperLinkStyles : undefined,
+    ...linkAttributes,
     children: [(0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
       size: 24,
       image: avatar
-    }), value && (0,jsx_runtime_namespaceObject.jsx)(PersonInfoValue, {
-      value: value,
-      counter: counter,
-      css: styles?.avatarName,
-      counterCss: styles?.counter
-    })]
+    }), valueNode]
   });
 };
 ;// ./src/components/PersonInfo/PersonInfoBadges.tsx
@@ -14535,6 +14599,100 @@ const PersonInfoBadges = ({
     })
   });
 };
+;// ./src/components/ImageItem/ImageItem.tsx
+function ImageItem_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+
+var ImageItem_ref =  true ? {
+  name: "c5ejfv",
+  styles: "gap:8px;text-decoration:none"
+} : 0;
+const ImageItem = ({
+  children,
+  image,
+  avatarSize = 24,
+  link = '',
+  openLinkInNewTab = false,
+  className
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const additionalProps = link ? {
+    href: link,
+    target: openLinkInNewTab ? '_blank' : undefined
+  } : {};
+  return (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+    css: ImageItem_ref,
+    as: link ? 'a' : 'div',
+    className: className,
+    "data-testid": "image-item",
+    ...additionalProps,
+    children: [(0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
+      size: avatarSize,
+      image: image
+    }), (0,jsx_runtime_namespaceObject.jsx)("span", {
+      css: /*#__PURE__*/(0,react_namespaceObject.css)({
+        color: theme.colors.greyDarker,
+        fontSize: 14,
+        fontWeight: 500,
+        cursor: link ? 'pointer' : 'default',
+        '&:hover': {
+          color: link ? theme.colors.blue : theme.colors.greyDarker
+        }
+      },  true ? "" : 0,  true ? "" : 0),
+      children: children
+    })]
+  });
+};
+;// ./src/components/PersonInfo/PersonInfoCounter.tsx
+
+
+
+
+
+
+
+const PersonInfoCounter = ({
+  counterTooltip,
+  css
+}) => {
+  const tooltipUsers = counterTooltip?.users ?? [];
+  const hasTooltipUsers = tooltipUsers.length > 0;
+  const counterValue = hasTooltipUsers ? `+${tooltipUsers.length}` : null;
+  if (!counterValue) {
+    return null;
+  }
+  const tooltipBody = (0,jsx_runtime_namespaceObject.jsx)(CounterTooltipList, {
+    "data-testid": "person-info-counter-tooltip-list",
+    children: tooltipUsers.map(user => (0,jsx_runtime_namespaceObject.jsx)(ImageItem, {
+      image: user.avatar,
+      link: user.link,
+      openLinkInNewTab: user.openLinkInNewTab,
+      children: user.name
+    }, user.id))
+  });
+  const counterNode = (0,jsx_runtime_namespaceObject.jsx)(Counter, {
+    css: css,
+    "data-testid": "person-info-counter",
+    children: counterValue
+  });
+  return (0,jsx_runtime_namespaceObject.jsxs)(Tooltip_Tooltip, {
+    enableHover: true,
+    enableClick: false,
+    allowHoverContent: true,
+    placement: "top",
+    size: "medium",
+    hasArrow: true,
+    children: [(0,jsx_runtime_namespaceObject.jsx)(TooltipTrigger_TooltipTrigger, {
+      children: counterNode
+    }), (0,jsx_runtime_namespaceObject.jsx)(TooltipContent_TooltipContent, {
+      children: (0,jsx_runtime_namespaceObject.jsx)(CounterTooltipContent, {
+        children: tooltipBody
+      })
+    })]
+  });
+};
 ;// ./src/components/PersonInfo/PersonInfo.tsx
 
 
@@ -14549,11 +14707,13 @@ const PersonInfo = /*#__PURE__*/external_react_default().forwardRef(function Per
   value,
   badges,
   avatar,
-  counter,
+  counterTooltip,
   attributes,
   description,
   styles,
   className,
+  link,
+  openLinkInNewTab,
   ...props
 }, ref) {
   return (0,jsx_runtime_namespaceObject.jsx)(PersonInfoBase, {
@@ -14567,16 +14727,17 @@ const PersonInfo = /*#__PURE__*/external_react_default().forwardRef(function Per
         children: [(0,jsx_runtime_namespaceObject.jsx)(Title, {
           css: styles?.title,
           children: title
-        }), avatar && (0,jsx_runtime_namespaceObject.jsx)(PersonInfoAvatar, {
-          avatar: avatar,
-          value: value,
-          counter: counter,
-          styles: styles
-        }), !avatar && value && (0,jsx_runtime_namespaceObject.jsx)(PersonInfoValue, {
-          value: value,
-          counter: counter,
-          css: styles?.value,
-          counterCss: styles?.counter
+        }), (0,jsx_runtime_namespaceObject.jsxs)(Row, {
+          children: [(0,jsx_runtime_namespaceObject.jsx)(PersonInfoAvatar, {
+            avatar: avatar,
+            value: value,
+            styles: styles,
+            link: link,
+            openLinkInNewTab: openLinkInNewTab
+          }), counterTooltip && (0,jsx_runtime_namespaceObject.jsx)(PersonInfoCounter, {
+            counterTooltip: counterTooltip,
+            css: styles?.counter
+          })]
         }), badges && (0,jsx_runtime_namespaceObject.jsx)(PersonInfoBadges, {
           badges: badges,
           styles: styles
@@ -18173,52 +18334,6 @@ const FiltersMultiSelectOptions = ({
 ;// ./src/components/Icon/index.ts
 
 
-;// ./src/components/ImageItem/ImageItem.tsx
-function ImageItem_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
-
-
-
-var ImageItem_ref =  true ? {
-  name: "c5ejfv",
-  styles: "gap:8px;text-decoration:none"
-} : 0;
-const ImageItem = ({
-  children,
-  image,
-  avatarSize = 24,
-  link = '',
-  openLinkInNewTab = false,
-  className
-}) => {
-  const theme = (0,react_namespaceObject.useTheme)();
-  const additionalProps = link ? {
-    href: link,
-    target: openLinkInNewTab ? '_blank' : undefined
-  } : {};
-  return (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
-    css: ImageItem_ref,
-    as: link ? 'a' : 'div',
-    className: className,
-    "data-testid": "image-item",
-    ...additionalProps,
-    children: [(0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
-      size: avatarSize,
-      image: image
-    }), (0,jsx_runtime_namespaceObject.jsx)("span", {
-      css: /*#__PURE__*/(0,react_namespaceObject.css)({
-        color: theme.colors.greyDarker,
-        fontSize: 14,
-        fontWeight: 500,
-        cursor: link ? 'pointer' : 'default',
-        '&:hover': {
-          color: link ? theme.colors.blue : theme.colors.greyDarker
-        }
-      },  true ? "" : 0,  true ? "" : 0),
-      children: children
-    })]
-  });
-};
 ;// ./src/components/ImageItem/index.ts
 
 ;// ./src/components/LinksTabBar/LinksTabBarBase.tsx
@@ -21132,10 +21247,22 @@ const RadioWidget = props => {
     }, i)) : undefined
   });
 };
+;// ./src/components/JsonSchemaForm/constants.ts
+const DEFAULT_AVATAR_SIZE = 24;
 ;// ./src/components/JsonSchemaForm/widgets/SelectWidget.tsx
 
 
 
+
+const getAvatarNode = (option, uiOptions) => {
+  const avatar = option.schema?.avatar;
+  if (!avatar) return;
+  const avatarSize = uiOptions.typeaheadAvatarSize ?? DEFAULT_AVATAR_SIZE;
+  return (0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
+    size: avatarSize,
+    image: avatar
+  });
+};
 const SelectWidget = props => {
   const {
     id,
@@ -21156,6 +21283,7 @@ const SelectWidget = props => {
     enumDisabled = []
   } = options;
   const customPlaceholder = placeholder || uiSchema?.['ui:placeholder'];
+  const selectUiOptions = uiSchema?.['ui:options'] || {};
   const isMultiple = !!multiple || Array.isArray(value);
   const items = Array.isArray(enumOptions) ? enumOptions : [];
   const handleChange = onChangeOverride ? onChangeOverride : value => {
@@ -21183,8 +21311,7 @@ const SelectWidget = props => {
   };
   const handleTypeaheadChange = (changedValue, isAdded) => {
     if (isMultiple) {
-      const currentSelected = Array.isArray(selectedItems) ? selectedItems : [];
-      const newSelected = isAdded ? [...currentSelected, changedValue] : currentSelected.filter(item => item !== changedValue);
+      const newSelected = isAdded ? [...selectedItems, changedValue] : selectedItems.filter(item => item !== changedValue);
       handleFormChange(newSelected);
     } else {
       const newValue = isAdded ? changedValue : undefined;
@@ -21207,8 +21334,7 @@ const SelectWidget = props => {
   };
   const onRemoveSelectedClick = removedValue => {
     if (isMultiple) {
-      const currentSelected = Array.isArray(selectedItems) ? selectedItems : [];
-      const newSelected = currentSelected.filter(item => item !== removedValue);
+      const newSelected = selectedItems.filter(item => item !== removedValue);
       handleChange(newSelected);
     } else {
       handleChange(undefined);
@@ -21233,15 +21359,13 @@ const SelectWidget = props => {
         label,
         input
       }) => highlightInputMatch(label, input),
-      children: items.map(({
-        label,
-        value
-      }) => (0,jsx_runtime_namespaceObject.jsx)(TypeaheadOption_TypeaheadOption, {
-        value: value,
-        label: label || value,
-        isDisabled: disabled || Array.isArray(enumDisabled) && enumDisabled.includes(value),
-        children: label || value
-      }, value))
+      children: items.map(item => (0,jsx_runtime_namespaceObject.jsx)(TypeaheadOption_TypeaheadOption, {
+        value: item.value,
+        label: item.label || item.value,
+        avatar: getAvatarNode(item, selectUiOptions),
+        isDisabled: disabled || Array.isArray(enumDisabled) && enumDisabled.includes(item.value),
+        children: item.label || item.value
+      }, item.value))
     })
   });
 };
@@ -21579,6 +21703,7 @@ const JsonSchemaForm_Form = /*#__PURE__*/base_default()(UnstyledForm,  true ? {
   styles: ".form-group{margin-bottom:16px;}.form-group:last-child{margin-bottom:0;}"
 } : 0);
 
+
 ;// ./src/components/index.ts