@jetbrains/ring-ui-built 7.0.22 → 7.0.24

package/components/tabs/collapsible-more.js

@@ -48,6 +48,8 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
+import '../_helpers/avatar-info.js';
+import '../avatar/avatar-size.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-12px';

package/components/tabs/collapsible-tabs.d.ts

@@ -4,6 +4,7 @@ export interface CollapsibleTabsProps {
     children: ReactElement<TabProps>[];
     selected?: string | undefined;
     onSelect?: ((key: string) => () => void) | undefined;
+    onLastVisibleIndexChange?: ((index: number) => void) | null | undefined;
     moreClassName?: string | null | undefined;
     moreActiveClassName?: string | null | undefined;
     morePopupClassName?: string | null | undefined;
@@ -11,6 +12,6 @@ export interface CollapsibleTabsProps {
     initialVisibleItems?: number | null | undefined;
     morePopupBeforeEnd?: ReactNode;
 }
-export declare const CollapsibleTabs: ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems, }: CollapsibleTabsProps) => import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems, }: CollapsibleTabsProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const CollapsibleTabs: ({ children, selected, onSelect, onLastVisibleIndexChange, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems, }: CollapsibleTabsProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<({ children, selected, onSelect, onLastVisibleIndexChange, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems, }: CollapsibleTabsProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/components/tabs/collapsible-tabs.js

@@ -47,6 +47,8 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
+import '../_helpers/avatar-info.js';
+import '../avatar/avatar-size.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-12px';
@@ -78,6 +80,7 @@ const CollapsibleTabs = _ref => {
     children,
     selected,
     onSelect,
+    onLastVisibleIndexChange,
     moreClassName,
     moreActiveClassName,
     morePopupClassName,
@@ -116,6 +119,15 @@ const CollapsibleTabs = _ref => {
       onSelect
     });
   }, [initialVisibleItems, children, preparedElements.ready, preparedElements.visible, onSelect, selected]);
+  const hiddenElements = useMemo(() => {
+    if (preparedElements.ready) {
+      return preparedElements.hidden;
+    } else if (initialVisibleItems) {
+      return children.filter(item => !visibleElements.some(visibleItem => visibleItem.props.child === item));
+    } else {
+      return [];
+    }
+  }, [children, preparedElements.hidden, preparedElements.ready, visibleElements, initialVisibleItems]);
   const adjustTabs = useCallback(entry => {
     const containerWidth = entry.contentRect.width;
     const {
@@ -157,10 +169,12 @@ const CollapsibleTabs = _ref => {
         }
       }
     }
-    if (elements.lastVisibleIndex !== tabsToRender.length - 1) {
-      setLastVisibleIndex(tabsToRender.length - 1);
+    const newLastVisibleIndex = tabsToRender.length - 1;
+    if (elements.lastVisibleIndex !== newLastVisibleIndex) {
+      setLastVisibleIndex(newLastVisibleIndex);
+      onLastVisibleIndexChange === null || onLastVisibleIndexChange === undefined || onLastVisibleIndexChange(newLastVisibleIndex);
     }
-  }, [children, elements.lastVisibleIndex, elements.sizes, selectedIndex]);
+  }, [children, elements.lastVisibleIndex, elements.sizes, onLastVisibleIndexChange, selectedIndex]);
   // Prepare list of visible and hidden elements
   useEffect(() => {
     const timeout = setTimeout(() => {
@@ -269,7 +283,7 @@ const CollapsibleTabs = _ref => {
         morePopupClassName: morePopupClassName,
         morePopupBeforeEnd: morePopupBeforeEnd,
         morePopupItemClassName: morePopupItemClassName,
-        items: preparedElements.hidden,
+        items: hiddenElements,
         selected: selected,
         onSelect: onSelect
       })]
@@ -277,7 +291,7 @@ const CollapsibleTabs = _ref => {
       ref: measureRef,
       className: classNames(className, styles.measure),
       children: [childrenToMeasure, jsx(FakeMoreButton, {
-        hasActiveChildren: preparedElements.hidden.some(item => item.props.alwaysHidden && item.props.id === selected),
+        hasActiveChildren: hiddenElements.some(item => item.props.alwaysHidden && item.props.id === selected),
         moreClassName: moreClassName,
         moreActiveClassName: moreActiveClassName
       })]

package/components/tabs/dumb-tabs.d.ts

@@ -8,6 +8,7 @@ export type Children = readonly (Children | null | boolean)[] | ReactElement<Tab
 export interface TabsProps extends Omit<CollapsibleTabsProps, 'onSelect' | 'children'> {
     children: Children;
     onSelect?: ((key: string) => void) | null | undefined;
+    onLastVisibleIndexChange?: ((index: number) => void) | null | undefined;
     className?: string | null | undefined;
     tabContainerClassName?: string | null | undefined;
     autoCollapse?: boolean | null | undefined;

package/components/tabs/dumb-tabs.js

@@ -49,6 +49,8 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
+import '../_helpers/avatar-info.js';
+import '../avatar/avatar-size.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-12px';

package/components/tabs/smart-tabs.js

@@ -48,6 +48,8 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
+import '../_helpers/avatar-info.js';
+import '../avatar/avatar-size.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-12px';

package/components/tabs/tabs.js

@@ -51,6 +51,8 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
+import '../_helpers/avatar-info.js';
+import '../avatar/avatar-size.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-12px';

package/components/tags-input/tags-input.js

@@ -34,6 +34,8 @@ import '../_helpers/button__classes.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
 import '../global/dom.js';
+import '../_helpers/avatar-info.js';
+import '../avatar/avatar-size.js';
 import '../avatar/fallback-avatar.js';
 import '../popup/popup.js';
 import 'react-dom';

package/components/user-card/card.js

@@ -12,6 +12,7 @@ import '../icon/icon.js';
 import '../i18n/i18n-context.js';
 import '../tooltip/tooltip.js';
 export { U as default } from '../_helpers/card.js';
+import '../avatar/avatar-size.js';
 import '../icon/icon__constants.js';
 import 'util-deprecate';
 import '../global/url.js';
@@ -19,6 +20,7 @@ import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.replace.js';
 import '../global/dom.js';
 import '../global/memoize.js';
+import '../_helpers/avatar-info.js';
 import '../avatar/fallback-avatar.js';
 import '../global/get-uid.js';
 import '../global/data-tests.js';

package/components/user-card/smart-user-card-tooltip.js

@@ -41,6 +41,8 @@ import '../popup/popup.target.js';
 import '@jetbrains/icons/copy';
 import '../avatar/avatar.js';
 import '../global/url.js';
+import '../_helpers/avatar-info.js';
+import '../avatar/avatar-size.js';
 import '../avatar/fallback-avatar.js';
 import '../link/link.js';
 import '../_helpers/link.js';

package/components/user-card/tooltip.js

@@ -39,6 +39,8 @@ import '../popup/popup.target.js';
 import '@jetbrains/icons/copy';
 import '../avatar/avatar.js';
 import '../global/url.js';
+import '../_helpers/avatar-info.js';
+import '../avatar/avatar-size.js';
 import '../avatar/fallback-avatar.js';
 import '../link/link.js';
 import '../_helpers/link.js';

package/components/user-card/user-card.js

@@ -14,6 +14,8 @@ import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.replace.js';
 import '../global/dom.js';
 import '../global/memoize.js';
+import '../_helpers/avatar-info.js';
+import '../avatar/avatar-size.js';
 import '../avatar/fallback-avatar.js';
 import '../global/get-uid.js';
 import '../link/link.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui-built",
-  "version": "7.0.22",
+  "version": "7.0.24",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"

package/components/avatar/avatar-example-datauri.d.ts

@@ -1 +0,0 @@
-export declare const avatarDataUri: string;

package/components/avatar/avatar-example-datauri.js

@@ -1,4 +0,0 @@
-// Taken from https://hub.jetbrains.com/api/rest/avatar/default?username=Jet%20Brains&dpr=2&size=56
-const avatarDataUri = "data:image/svg+xml,".concat(encodeURIComponent("\n<svg viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\">\n    <defs>\n        <linearGradient id=\"gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop stop-color=\"#D50F6B\" offset=\"0\"/>\n            <stop stop-color=\"#E73AE8\" offset=\"1\"/>\n        </linearGradient>\n    </defs>\n    <g>\n        <rect fill=\"url(#gradient)\"\n              x=\"0\" y=\"0\" width=\"40\" height=\"40\"\n              rx=\"3\" ry=\"3\"/>\n        <text x=\"5\" y=\"19\"\n              font-family=\"Arial, Helvetica, sans-serif\"\n              font-size=\"15px\"\n              letter-spacing=\"1\"\n              fill=\"#FFFFFF\">\n            <tspan>JB</tspan>\n            <tspan x=\"6\" y=\"28\">_</tspan>\n        </text>\n    </g>\n</svg>\n"));
-
-export { avatarDataUri };