sanity 3.93.1-next.38.730d143834 → 3.93.1-next.40.6377c06e67

package/lib/_chunks-cjs/pane.js

@@ -5657,6 +5657,50 @@ function _temp$c(s) {
 function _temp2$4(action) {
   return !isRestoreAction(action);
 }
+function useChipScrollPosition(containerRef) {
+  const $ = reactCompilerRuntime.c(4), [showGradient, setShowGradient] = React.useState(!1);
+  let t0;
+  $[0] !== containerRef.current ? (t0 = () => {
+    const checkOverflow = () => {
+      const container = containerRef.current;
+      if (!container)
+        return;
+      const {
+        scrollWidth,
+        clientWidth
+      } = container;
+      if (!(scrollWidth > clientWidth)) {
+        setShowGradient(!1);
+        return;
+      }
+      const {
+        scrollLeft
+      } = container, isAtEnd = scrollLeft + clientWidth >= scrollWidth;
+      setShowGradient(!isAtEnd);
+    }, setupObservers = function() {
+      checkOverflow();
+      const container_0 = containerRef.current;
+      if (!container_0)
+        return {
+          observer: null
+        };
+      const observer = new IntersectionObserver((entries) => {
+        const entry = entries[0];
+        entry && setShowGradient(entry.isIntersecting);
+      }), lastChip = container_0.children[container_0.children.length - 1];
+      return observer.observe(lastChip), {
+        observer
+      };
+    }, {
+      observer: observer_0
+    } = setupObservers();
+    return () => {
+      observer_0?.disconnect();
+    };
+  }, $[0] = containerRef.current, $[1] = t0) : t0 = $[1];
+  let t1;
+  return $[2] !== containerRef ? (t1 = [containerRef], $[2] = containerRef, $[3] = t1) : t1 = $[3], React.useEffect(t0, t1), showGradient;
+}
 const TooltipContent$1 = (t0) => {
   const $ = reactCompilerRuntime.c(16), {
     release
@@ -5800,16 +5844,19 @@ const TooltipContent$1 = (t0) => {
       }
     }
 
-    &::after {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      width: ${theme$1.space[3]}px;
-      background: linear-gradient(to right, ${theme.rgba(theme$1.color.bg, 0)}, var(--card-bg-color));
-    }
+    ${props.$showGradient && styledComponents.css`
+      &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 150px;
+        background: linear-gradient(to right, ${theme.rgba(theme$1.color.bg, 0)}, var(--card-bg-color));
+        transition: 'opacity 300ms ease-out';
+      }
+    `}
   `;
 }), DocumentPanelHeader = React.memo(React.forwardRef(function(_props, ref) {
   const {
@@ -5834,7 +5881,7 @@ const TooltipContent$1 = (t0) => {
     hasGroupSiblings
   } = usePaneRouter(), {
     actions: fieldActions
-  } = sanity.useFieldActions(), [referenceElement, setReferenceElement] = React.useState(null), actions = React.useMemo(() => (allActions ?? []).filter((action) => !isRestoreAction(action)), [allActions]), menuNodes = React.useMemo(() => resolveMenuNodes({
+  } = sanity.useFieldActions(), [referenceElement, setReferenceElement] = React.useState(null), scrollContainerRef = React.useRef(null), showGradient = useChipScrollPosition(scrollContainerRef), actions = React.useMemo(() => (allActions ?? []).filter((action) => !isRestoreAction(action)), [allActions]), menuNodes = React.useMemo(() => resolveMenuNodes({
     actionHandler: onMenuAction,
     fieldActions,
     menuItems,
@@ -5874,7 +5921,7 @@ const TooltipContent$1 = (t0) => {
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipDelayGroupProvider.TooltipDelayGroupProvider, { children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(PaneHeader$1, { border: !0, ref, loading: connectionState === "connecting" && !editState?.draft && !editState?.published, title, tabIndex, backButton }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { hidden: collapsed, style: {
     lineHeight: 0
   }, borderBottom: !0, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 3, paddingY: 3, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(HorizontalScroller, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { flex: 1, gap: 1, overflow: "auto", paddingX: 3, "data-testid": "document-perspective-list", children: /* @__PURE__ */ jsxRuntime.jsx(DocumentPerspectiveList, {}) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(HorizontalScroller, { $showGradient: showGradient, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { flex: 1, gap: 1, overflow: "auto", paddingX: 3, "data-testid": "document-perspective-list", ref: scrollContainerRef, children: /* @__PURE__ */ jsxRuntime.jsx(DocumentPerspectiveList, {}) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: "none", paddingRight: 3, children: renderedActions })
   ] }) }) });
 })), DocumentPanelHeaderActionDialogDeferred = React.memo(function(props) {