feat: expose isVisibile and only render a portal's content if its vis…

…ible
pmndrs · Oct 1, 2024 · 3f76da1 · 3f76da1
1 parent 6e6b61a
commit 3f76da1
Show file tree

Hide file tree

Showing 11 changed files with 15 additions and 1 deletion.
diff --git a/packages/react/src/portal.tsx b/packages/react/src/portal.tsx
@@ -245,7 +245,7 @@ function ChildrenToFBO({
   useFrame((state) => {
     const currentFBO = fbo.peek()
     //we only render if we have a framebuffer to write to and if the portal is not clipped
-    if (currentFBO == null || imageRef.current?.isClipped?.peek() != false) {
+    if (currentFBO == null || imageRef.current?.isVisible?.peek() != true) {
       return
     }
     if (frames === Infinity || count < frames) {

diff --git a/packages/react/src/ref.ts b/packages/react/src/ref.ts
@@ -51,6 +51,10 @@ export type ComponentInternals<T = ContainerProperties> = {
    * exploses whether the element is fully clipped by some ancestor
    */
   isClipped?: ReadonlySignal<boolean>
+  /**
+   * exploses whether the element is not fully clipped, has a size greater then 0, is not set to invisible, or display unequal to "none" by itself and all ancestors
+   */
+  isVisible: ReadonlySignal<boolean>
   /**
    * set the styles of the element (the provided styles have a higher precedence then the element's properties)
    */
@@ -91,6 +95,7 @@ export function useComponentInternals<T, O = {}>(
     () => {
       const { scrollPosition, paddingInset, borderInset, relativeCenter, size, maxScrollPosition } = internals
       return {
+        isVisible: internals.isVisible,
         setStyle: (style: T | undefined, replace?: boolean) =>
           (styleSignal.value = replace ? style : ({ ...styleSignal.value, ...style } as T)),
         getStyle: () => styleSignal.peek(),

diff --git a/packages/uikit/src/components/container.ts b/packages/uikit/src/components/container.ts
@@ -156,6 +156,7 @@ export function createContainer(
 
   return Object.assign(flexState, {
     isClipped,
+    isVisible,
     mergedProperties,
     anyAncestorScrollable: computedAnyAncestorScrollable(flexState.scrollable, parentContext.anyAncestorScrollable),
     clippingRect: computedClippingRect(

diff --git a/packages/uikit/src/components/content.ts b/packages/uikit/src/components/content.ts
@@ -132,6 +132,7 @@ export function createContent(
 
   return Object.assign(flexState, {
     isClipped,
+    isVisible,
     mergedProperties,
     remeasureContent: createMeasureContent(
       mergedProperties,

diff --git a/packages/uikit/src/components/custom.ts b/packages/uikit/src/components/custom.ts
@@ -144,6 +144,7 @@ export function createCustomContainer(
 
   return Object.assign(flexState, {
     isClipped,
+    isVisible,
     mergedProperties,
     root: parentContext.root,
     handlers: computedHandlers(style, properties, defaultProperties, hoveredSignal, activeSignal),

diff --git a/packages/uikit/src/components/icon.ts b/packages/uikit/src/components/icon.ts
@@ -142,6 +142,7 @@ export function createIcon(
 
   return Object.assign(flexState, {
     isClipped,
+    isVisible,
     mergedProperties,
     initializers,
     iconGroup,

diff --git a/packages/uikit/src/components/image.ts b/packages/uikit/src/components/image.ts
@@ -196,6 +196,7 @@ export function createImage(
   return Object.assign(flexState, {
     scrollPosition,
     isClipped,
+    isVisible,
     mergedProperties,
     anyAncestorScrollable: computedAnyAncestorScrollable(flexState.scrollable, parentContext.anyAncestorScrollable),
     initializers,

diff --git a/packages/uikit/src/components/input.ts b/packages/uikit/src/components/input.ts
@@ -290,6 +290,7 @@ export function createInput(
 
   return Object.assign(flexState, {
     isClipped,
+    isVisible,
     mergedProperties,
     valueSignal,
     focus,

diff --git a/packages/uikit/src/components/root.ts b/packages/uikit/src/components/root.ts
@@ -219,6 +219,7 @@ export function createRoot(
   )
 
   return Object.assign(flexState, {
+    isVisible,
     scrollPosition,
     mergedProperties,
     anyAncestorScrollable: flexState.scrollable,

diff --git a/packages/uikit/src/components/svg.ts b/packages/uikit/src/components/svg.ts
@@ -210,6 +210,7 @@ export function createSvg(
   return Object.assign(flexState, {
     scrollPosition,
     isClipped,
+    isVisible,
     mergedProperties,
     anyAncestorScrollable: computedAnyAncestorScrollable(flexState.scrollable, parentContext.anyAncestorScrollable),
     clippingRect: computedClippingRect(

diff --git a/packages/uikit/src/components/text.ts b/packages/uikit/src/components/text.ts
@@ -142,6 +142,7 @@ export function createText(
 
   return Object.assign(flexState, {
     isClipped,
+    isVisible,
     mergedProperties,
     interactionPanel: createInteractionPanel(
       backgroundOrderInfo,