musae 0.1.35 → 0.1.36

package/dist/components/button/button.mjs

@@ -21,6 +21,7 @@ const styles = {
     gap: "musae-vbka3v",
     rowGap: null,
     columnGap: null,
+    whiteSpace: "musae-uxw1ft",
     transition: "musae-2ortz2",
     transitionBehavior: null,
     transitionDelay: null,

package/dist/components/waterfall/hooks.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * @description
  * repaint child
@@ -9,4 +10,6 @@ export declare const useRepaint: ({ columns, rowGap }: {
     maxHeight: number;
     collect: (index: number, ref: HTMLDivElement | null) => void;
     getOrder: (index: number) => number | null;
+    items: import("react").MutableRefObject<Map<number, HTMLDivElement | null>>;
+    repaint: () => void;
 };

package/dist/components/waterfall/hooks.mjs

@@ -1,4 +1,5 @@
-import { useRef, useState, useCallback, useEffect } from 'react';
+import { useEvent, useUpdateEffect } from '@aiszlab/relax';
+import { useRef, useState, useCallback } from 'react';
 
 /**
  * @description
@@ -11,7 +12,7 @@ const useRepaint = ({ columns, rowGap }) => {
     const collect = useCallback((index, ref) => {
         items.current.set(index, ref);
     }, []);
-    useEffect(() => {
+    const repaint = useEvent(() => {
         // only 1 columns, no need to repaint, just display as flex
         if (columns <= 1)
             return;
@@ -28,7 +29,9 @@ const useRepaint = ({ columns, rowGap }) => {
         }, [new Array(columns).fill(0), new Map()]);
         setMaxHeight(Math.max(...columnHeights));
         setOrders(_orders);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+    });
+    useUpdateEffect(() => {
+        repaint();
     }, [rowGap]);
     const getOrder = useCallback((index) => {
         return orders.get(index) ?? null;
@@ -37,6 +40,8 @@ const useRepaint = ({ columns, rowGap }) => {
         maxHeight,
         collect,
         getOrder,
+        items,
+        repaint,
     };
 };
 

package/dist/components/waterfall/waterfall.mjs

@@ -3,6 +3,7 @@ import React from 'react';
 import { useRepaint } from './hooks.mjs';
 import clsx from 'clsx';
 import { useGutters } from '../../hooks/use-gutters.mjs';
+import { useMounted } from '@aiszlab/relax';
 
 const styles = {
   waterfall: props => [{
@@ -51,7 +52,9 @@ const Waterfall = ({
   const {
     collect,
     maxHeight,
-    getOrder
+    getOrder,
+    items,
+    repaint
   } = useRepaint({
     columns,
     rowGap
@@ -62,6 +65,19 @@ const Waterfall = ({
   }), maxHeight > 0 && styles.repainted({
     maxHeight: maxHeight
   }));
+  useMounted(() => {
+    // observer will be called when the component is mounted
+    // so in waterfall we use current time to first render
+    const resizer = new ResizeObserver(() => {
+      repaint();
+    });
+    Array.from(items.current.values()).forEach(node => {
+      node && resizer.observe(node);
+    });
+    return () => {
+      resizer.disconnect();
+    };
+  });
   if (children.length === 0) return null;
   return React.createElement("div", {
     className: clsx(props$1.className, styled.className),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",