@jetbrains/ring-ui-built 8.0.0-beta.3 → 8.0.0-beta.4

package/components/expand/collapsible-group.js

@@ -1,382 +1,51 @@
 import { c } from 'react/compiler-runtime';
-import { useState, use } from 'react';
-import classNames from 'classnames';
-import chevronRightIcon from '@jetbrains/icons/chevron-12px-right';
-import chevron12pxDown from '@jetbrains/icons/chevron-12px-down';
-import Icon from '../icon/icon.js';
-import { Collapse } from '../collapse/collapse.js';
-import { CollapseContent } from '../collapse/collapse-content.js';
-import { CollapseContext } from '../collapse/collapse-context.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import 'util-deprecate';
+import { forwardRef } from 'react';
+import deprecate from 'util-deprecate';
+import CollapsibleGroup from '../collapsible-group/collapsible-group.js';
+import { jsx } from 'react/jsx-runtime';
+import 'classnames';
+import '@jetbrains/icons/chevron-12px-right';
+import '@jetbrains/icons/chevron-12px-down';
+import '../icon/icon.js';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
 import '../global/memoize.js';
+import '../collapse/collapse.js';
+import '../collapse/collapse-context.js';
 import '../collapse/consts.js';
+import '../collapse/collapse-content.js';
 import '../global/data-tests.js';
 import '../global/dom.js';
 import '../collapse/utils.js';
 
-var styles = {"expand":"ring-collapsible-group-expand","collapseRoot":"ring-collapsible-group-collapseRoot","hovered":"ring-collapsible-group-hovered","expanded":"ring-collapsible-group-expanded","focused":"ring-collapsible-group-focused","header":"ring-collapsible-group-header","headerButton":"ring-collapsible-group-headerButton","headerStatic":"ring-collapsible-group-headerStatic","headerContent":"ring-collapsible-group-headerContent","avatarGroup":"ring-collapsible-group-avatarGroup","title":"ring-collapsible-group-title","subtitleGroup":"ring-collapsible-group-subtitleGroup","subtitle":"ring-collapsible-group-subtitle","subtitleChevron":"ring-collapsible-group-subtitleChevron","toggle":"ring-collapsible-group-toggle","toggleIcon":"ring-collapsible-group-toggleIcon","body":"ring-collapsible-group-body"};
-
-function CollapsibleGroupHeaderContent(t0) {
-  const $ = c(16);
-  if ($[0] !== "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768") {
-    for (let $i = 0; $i < 16; $i += 1) {
-      $[$i] = Symbol.for("react.memo_cache_sentinel");
-    }
-    $[0] = "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768";
-  }
-  const {
-    avatar,
-    titleContent,
-    subtitle
-  } = t0;
-  const {
-    collapsed
-  } = use(CollapseContext);
-  let t1;
-  if ($[1] !== titleContent) {
-    t1 = /*#__PURE__*/jsx("span", {
-      className: styles.title,
-      children: titleContent
-    });
-    $[1] = titleContent;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  let t2;
-  if ($[3] !== avatar || $[4] !== t1) {
-    t2 = /*#__PURE__*/jsxs("span", {
-      className: styles.avatarGroup,
-      children: [avatar, t1]
-    });
-    $[3] = avatar;
-    $[4] = t1;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  let t3;
-  if ($[6] !== subtitle) {
-    t3 = subtitle ? /*#__PURE__*/jsxs("span", {
-      className: styles.subtitleGroup,
-      children: [/*#__PURE__*/jsx(Icon, {
-        className: styles.subtitleChevron,
-        glyph: chevronRightIcon,
-        "aria-hidden": true
-      }), /*#__PURE__*/jsx("span", {
-        className: styles.subtitle,
-        children: subtitle
-      })]
-    }) : null;
-    $[6] = subtitle;
-    $[7] = t3;
-  } else {
-    t3 = $[7];
-  }
-  let t4;
-  if ($[8] !== t2 || $[9] !== t3) {
-    t4 = /*#__PURE__*/jsxs("span", {
-      className: styles.headerContent,
-      children: [t2, t3]
-    });
-    $[8] = t2;
-    $[9] = t3;
-    $[10] = t4;
-  } else {
-    t4 = $[10];
-  }
-  const t5 = collapsed ? chevronRightIcon : chevron12pxDown;
-  let t6;
-  if ($[11] !== t5) {
-    t6 = /*#__PURE__*/jsx("span", {
-      className: styles.toggle,
-      "aria-hidden": true,
-      children: /*#__PURE__*/jsx(Icon, {
-        className: styles.toggleIcon,
-        glyph: t5
-      })
-    });
-    $[11] = t5;
-    $[12] = t6;
-  } else {
-    t6 = $[12];
-  }
-  let t7;
-  if ($[13] !== t4 || $[14] !== t6) {
-    t7 = /*#__PURE__*/jsxs("span", {
-      className: styles.header,
-      children: [t4, t6]
-    });
-    $[13] = t4;
-    $[14] = t6;
-    $[15] = t7;
-  } else {
-    t7 = $[15];
-  }
-  return t7;
-}
-function CollapsibleGroupHeader(t0) {
-  const $ = c(16);
-  if ($[0] !== "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768") {
-    for (let $i = 0; $i < 16; $i += 1) {
-      $[$i] = Symbol.for("react.memo_cache_sentinel");
-    }
-    $[0] = "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768";
-  }
-  let avatar;
-  let buttonProps;
-  let subtitle;
-  let titleContent;
-  if ($[1] !== t0) {
-    ({
-      avatar,
-      titleContent,
-      subtitle,
-      ...buttonProps
-    } = t0);
-    $[1] = t0;
-    $[2] = avatar;
-    $[3] = buttonProps;
-    $[4] = subtitle;
-    $[5] = titleContent;
-  } else {
-    avatar = $[2];
-    buttonProps = $[3];
-    subtitle = $[4];
-    titleContent = $[5];
-  }
-  const {
-    setCollapsed,
-    collapsed,
-    id
-  } = use(CollapseContext);
-  const t1 = `collapse-content-${id}`;
-  const t2 = !collapsed;
-  let t3;
-  if ($[6] !== avatar || $[7] !== subtitle || $[8] !== titleContent) {
-    t3 = /*#__PURE__*/jsx(CollapsibleGroupHeaderContent, {
-      avatar: avatar,
-      titleContent: titleContent,
-      subtitle: subtitle
-    });
-    $[6] = avatar;
-    $[7] = subtitle;
-    $[8] = titleContent;
-    $[9] = t3;
-  } else {
-    t3 = $[9];
-  }
-  let t4;
-  if ($[10] !== buttonProps || $[11] !== setCollapsed || $[12] !== t1 || $[13] !== t2 || $[14] !== t3) {
-    t4 = /*#__PURE__*/jsx("button", {
-      type: "button",
-      ...buttonProps,
-      className: styles.headerButton,
-      onClick: setCollapsed,
-      "aria-controls": t1,
-      "aria-expanded": t2,
-      children: t3
-    });
-    $[10] = buttonProps;
-    $[11] = setCollapsed;
-    $[12] = t1;
-    $[13] = t2;
-    $[14] = t3;
-    $[15] = t4;
-  } else {
-    t4 = $[15];
-  }
-  return t4;
-}
-function CollapsibleGroupHeaderStatic(t0) {
-  const $ = c(5);
-  if ($[0] !== "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768") {
-    for (let $i = 0; $i < 5; $i += 1) {
-      $[$i] = Symbol.for("react.memo_cache_sentinel");
-    }
-    $[0] = "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768";
-  }
-  const {
-    avatar,
-    titleContent,
-    subtitle
-  } = t0;
-  let t1;
-  if ($[1] !== avatar || $[2] !== subtitle || $[3] !== titleContent) {
-    t1 = /*#__PURE__*/jsx("span", {
-      className: styles.headerStatic,
-      children: /*#__PURE__*/jsx(CollapsibleGroupHeaderContent, {
-        avatar: avatar,
-        titleContent: titleContent,
-        subtitle: subtitle
-      })
-    });
-    $[1] = avatar;
-    $[2] = subtitle;
-    $[3] = titleContent;
-    $[4] = t1;
-  } else {
-    t1 = $[4];
-  }
-  return t1;
-}
-const CollapsibleGroup = t0 => {
-  const $ = c(29);
-  if ($[0] !== "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768") {
-    for (let $i = 0; $i < 29; $i += 1) {
+const warnDeprecation = deprecate(() => {}, '`CollapsibleGroup` from `@jetbrains/ring-ui/components/expand/collapsible-group` is deprecated and will be removed in Ring UI 8.0. Import it from `@jetbrains/ring-ui/components/collapsible-group/collapsible-group` instead.');
+/**
+ * @deprecated The `expand` module has been renamed to `collapsible-group`. This re-export will be removed in
+ * Ring UI 8.0. Use `CollapsibleGroup` from `@jetbrains/ring-ui/components/collapsible-group/collapsible-group` instead.
+ */
+const DeprecatedCollapsibleGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  const $ = c(4);
+  if ($[0] !== "dc9f603c6e591e91f020cc5faed8f169e693dd93fe948fc345146a82715c1a34") {
+    for (let $i = 0; $i < 4; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "0b0104270833ca27f2118e72fd68547a84ef5bf33921c0d276e95941f6f80768";
-  }
-  const {
-    ref,
-    avatar,
-    title,
-    subtitle,
-    children,
-    className,
-    defaultExpanded: t1,
-    expanded: t2,
-    onChange: t3,
-    disableAnimation: t4,
-    interactive: t5,
-    "data-test": dataTest
-  } = t0;
-  const defaultExpanded = t1 === undefined ? false : t1;
-  const expanded = t2 === undefined ? null : t2;
-  const onChange = t3 === undefined ? _temp : t3;
-  const disableAnimation = t4 === undefined ? false : t4;
-  const interactive = t5 === undefined ? true : t5;
-  const [innerExpanded, setInnerExpanded] = useState(defaultExpanded);
-  const [hovered, setHovered] = useState(false);
-  const [focused, setFocused] = useState(false);
-  const isExpanded = expanded !== null && expanded !== void 0 ? expanded : innerExpanded;
-  let t6;
-  if ($[1] !== expanded || $[2] !== onChange) {
-    t6 = collapsed => {
-      const nextExpanded = !collapsed;
-      if (expanded == null) {
-        setInnerExpanded(nextExpanded);
-      }
-      onChange(nextExpanded);
-    };
-    $[1] = expanded;
-    $[2] = onChange;
-    $[3] = t6;
-  } else {
-    t6 = $[3];
-  }
-  const handleChange = t6;
-  let t7;
-  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = event => {
-      const nextTarget = event.relatedTarget;
-      if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
-        return;
-      }
-      setFocused(false);
-    };
-    $[4] = t7;
-  } else {
-    t7 = $[4];
-  }
-  const onBlur = t7;
-  let t8;
-  if ($[5] !== className || $[6] !== focused || $[7] !== hovered || $[8] !== isExpanded) {
-    t8 = classNames(styles.expand, className, {
-      [styles.hovered]: hovered,
-      [styles.expanded]: isExpanded,
-      [styles.focused]: focused
-    });
-    $[5] = className;
-    $[6] = focused;
-    $[7] = hovered;
-    $[8] = isExpanded;
-    $[9] = t8;
-  } else {
-    t8 = $[9];
-  }
-  const classes = t8;
-  const t9 = !defaultExpanded;
-  const t10 = expanded == null ? null : !expanded;
-  let t11;
-  if ($[10] !== avatar || $[11] !== interactive || $[12] !== subtitle || $[13] !== title) {
-    t11 = interactive ? /*#__PURE__*/jsx(CollapsibleGroupHeader, {
-      avatar: avatar,
-      titleContent: title,
-      subtitle: subtitle,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      onFocus: () => setFocused(true),
-      onBlur: onBlur
-    }) : /*#__PURE__*/jsx(CollapsibleGroupHeaderStatic, {
-      avatar: avatar,
-      titleContent: title,
-      subtitle: subtitle
-    });
-    $[10] = avatar;
-    $[11] = interactive;
-    $[12] = subtitle;
-    $[13] = title;
-    $[14] = t11;
-  } else {
-    t11 = $[14];
-  }
-  let t12;
-  if ($[15] !== children) {
-    t12 = /*#__PURE__*/jsx(CollapseContent, {
-      children: /*#__PURE__*/jsx("div", {
-        className: styles.body,
-        children: children
-      })
-    });
-    $[15] = children;
-    $[16] = t12;
-  } else {
-    t12 = $[16];
-  }
-  let t13;
-  if ($[17] !== disableAnimation || $[18] !== handleChange || $[19] !== t10 || $[20] !== t11 || $[21] !== t12 || $[22] !== t9) {
-    t13 = /*#__PURE__*/jsxs(Collapse, {
-      defaultCollapsed: t9,
-      collapsed: t10,
-      onChange: handleChange,
-      disableAnimation: disableAnimation,
-      className: styles.collapseRoot,
-      children: [t11, t12]
-    });
-    $[17] = disableAnimation;
-    $[18] = handleChange;
-    $[19] = t10;
-    $[20] = t11;
-    $[21] = t12;
-    $[22] = t9;
-    $[23] = t13;
-  } else {
-    t13 = $[23];
+    $[0] = "dc9f603c6e591e91f020cc5faed8f169e693dd93fe948fc345146a82715c1a34";
   }
-  let t14;
-  if ($[24] !== classes || $[25] !== dataTest || $[26] !== ref || $[27] !== t13) {
-    t14 = /*#__PURE__*/jsx("div", {
+  warnDeprecation();
+  let t0;
+  if ($[1] !== props || $[2] !== ref) {
+    t0 = /*#__PURE__*/jsx(CollapsibleGroup, {
       ref: ref,
-      className: classes,
-      "data-test": dataTest,
-      children: t13
+      ...props
     });
-    $[24] = classes;
-    $[25] = dataTest;
-    $[26] = ref;
-    $[27] = t13;
-    $[28] = t14;
+    $[1] = props;
+    $[2] = ref;
+    $[3] = t0;
   } else {
-    t14 = $[28];
+    t0 = $[3];
   }
-  return t14;
-};
-CollapsibleGroup.displayName = 'CollapsibleGroup';
-function _temp() {}
+  return t0;
+});
+DeprecatedCollapsibleGroup.displayName = 'CollapsibleGroup';
 
-export { CollapsibleGroup as default };
+export { DeprecatedCollapsibleGroup as default };

package/components/global/compose-refs.d.ts

@@ -1,2 +1,3 @@
 import { type Ref } from 'react';
-export declare function createComposedRef<T>(): import("memoize-one").MemoizedFn<(...refs: (Ref<T> | undefined)[]) => (value: T | null) => void>;
+export declare function createComposedRef<T>(): import("memoize-one").MemoizedFn<(...refs: (Ref<T> | undefined)[]) => (value: T | null) => () => void>;
+export declare function useComposedRef<T>(...refs: (Ref<T> | undefined)[]): Ref<T>;

package/components/global/compose-refs.js

@@ -1,16 +1,52 @@
+import { c } from 'react/compiler-runtime';
+import 'react';
 import memoizeOne from 'memoize-one';
 
 function composeRefs(...refs) {
-  return value => refs.forEach(ref => {
-    if (typeof ref === 'function') {
-      ref(value);
-    } else if (ref) {
-      ref.current = value;
-    }
-  });
+  return value => {
+    const cleanups = [];
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        const cleanup = ref(value);
+        if (typeof cleanup === 'function') {
+          cleanups.push(cleanup);
+        }
+      } else if (ref) {
+        ref.current = value;
+      }
+    });
+    return () => cleanups.forEach(cleanup => cleanup());
+  };
 }
 function createComposedRef() {
   return memoizeOne(composeRefs);
 }
+function useComposedRef(...t0) {
+  const $ = c(4);
+  if ($[0] !== "27d6e427dad1098fabcf040df3e7a3018e96f8cc69541f012bb950b976d64df8") {
+    for (let $i = 0; $i < 4; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "27d6e427dad1098fabcf040df3e7a3018e96f8cc69541f012bb950b976d64df8";
+  }
+  const refs = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = createComposedRef();
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const composer = t1;
+  let t2;
+  if ($[2] !== refs) {
+    t2 = composer(...refs);
+    $[2] = refs;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
 
-export { createComposedRef };
+export { createComposedRef, useComposedRef };

package/components/global/focus-sensor-hoc.js

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 import { createComposedRef } from './compose-refs.js';
 import { jsx } from 'react/jsx-runtime';
+import 'react/compiler-runtime';
 import 'memoize-one';
 
 function focusSensorHOC(ComposedComponent) {

package/components/global/focus-with-temporary-tabindex.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Focuses an element, temporarily adding `tabindex="0"` if necessary.
+ *
+ * If the element does not already have a `tabindex` attribute, one is
+ * added before focusing and automatically removed when the element loses
+ * focus.
+ *
+ * This is useful when implementing roving tabindex patterns on elements
+ * that are not normally focusable.
+ */
+export declare function focusWithTemporaryTabIndex(element: HTMLElement): void;

package/components/global/focus-with-temporary-tabindex.js

@@ -0,0 +1,23 @@
+/**
+ * Focuses an element, temporarily adding `tabindex="0"` if necessary.
+ *
+ * If the element does not already have a `tabindex` attribute, one is
+ * added before focusing and automatically removed when the element loses
+ * focus.
+ *
+ * This is useful when implementing roving tabindex patterns on elements
+ * that are not normally focusable.
+ */
+function focusWithTemporaryTabIndex(element) {
+  if (!element.hasAttribute('tabindex')) {
+    element.tabIndex = 0;
+    function onBlur() {
+      element.removeAttribute('tabindex');
+      element.removeEventListener('blur', onBlur);
+    }
+    element.addEventListener('blur', onBlur);
+  }
+  element.focus();
+}
+
+export { focusWithTemporaryTabIndex };

package/components/global/intersection-observer-context.d.ts

@@ -1,5 +1,21 @@
 import { type RefObject } from 'react';
 /**
+ * Provides access to a shared `IntersectionObserver` instance
+ * via the {@link IntersectionObserverContext} context.
+ *
+ * @see IntersectionObserverContext
+ */
+export interface IntersectionObserverHandle {
+    /**
+     * Starts observing an element.
+     *
+     * Returns a cleanup function that stops observing it.
+     */
+    observe(element: Element, isIntersecting: (isIntersecting: boolean) => void): () => void;
+}
+/**
+ * Multiple components can share a single `IntersectionObserver` instance through this context.
+ *
  * Usage:
  *
  * ```tsx
@@ -10,17 +26,21 @@ import { type RefObject } from 'react';
  * function YourComponent() {
  *   // Contains the current isIntersecting value
  *   const isIntersecting = useIsIntersecting(elementRef);
- *   // Or, to get updates instead:
- *   useIsIntersectingListener(elementRef, newIsIntersecting => {
- *     // ...
+ *
+ *   // Or, to manually work with the IntersectionObserverHandle:
+ *   const handle = use(IntersectionObserverContext);
+ *   useEffect(() => {
+ *     return handle.observe(elementRef.current, isIntersecting => { ... })
  *   })
  * }
  * ```
  */
-export declare const IntersectionObserverContext: import("react").Context<IntersectionObserverHandle | null>;
-export declare function useIntersectionObserverHandle(rootRef?: RefObject<HTMLElement | null>, rootMargin?: number, scrollMargin?: number): IntersectionObserverHandle | null;
-export interface IntersectionObserverHandle {
-    observe(element: Element, setIsIntersecting: (isIntersecting: boolean) => void): () => void;
-}
+export declare const IntersectionObserverContext: import("react").Context<IntersectionObserverHandle>;
+/**
+ * Creates an IntersectionObserverHandle suitable for {@link IntersectionObserverContext}.
+ */
+export declare function useIntersectionObserverHandle(rootRef?: RefObject<HTMLElement | null>, rootMargin?: number, scrollMargin?: number): IntersectionObserverHandle;
+/**
+ * Returns whether the referenced element is currently intersecting.
+ */
 export declare function useIsIntersecting(elementRef: RefObject<Element | null>): boolean;
-export declare function useIsIntersectingListener(elementRef: RefObject<Element | null>, onChange: (isIntersecting: boolean) => void): void;