@nkootstra/block-kit 0.1.1 → 0.2.0

package/README.md

@@ -2,11 +2,11 @@
 
 `@nkootstra/block-kit` renders Slack [Block Kit](https://docs.slack.dev/block-kit/) JSON in React, pixel-for-pixel the way Slack does. Pass it the `blocks` your app sends to `chat.postMessage` or `views.open` and it draws the message, modal or Home tab, with working buttons, menus, date pickers and inputs.
 
-Documentation: **<https://block-kit.kootstra.io>**
+Documentation: **<https://docs.block-kit.dev>**
 
 ## Install
 
-The package needs React 19 or later.
+The package needs React 18 or later.
 
 ```sh
 bun add @nkootstra/block-kit @fontsource/lato @fontsource/roboto-mono
@@ -33,7 +33,7 @@ export function App() {
 }
 ```
 
-The [installation guide](https://block-kit.kootstra.io/installation) lists the remaining font weights and the entry points, and the [quickstart](https://block-kit.kootstra.io/quickstart) wires up an interactive approval message.
+The [installation guide](https://docs.block-kit.dev/installation) lists the remaining font weights and the entry points, and the [quickstart](https://docs.block-kit.dev/quickstart) wires up an interactive approval message.
 
 ## Entry points
 

package/dist/index.js

@@ -1228,6 +1228,13 @@ function actionTs(now = Date.now()) {
 	return (now / 1e3).toFixed(6);
 }
 //#endregion
+//#region src/useClientLayoutEffect.ts
+/**
+* `useLayoutEffect` in the browser and `useEffect` on the server, where neither runs. React 18
+* warns about every `useLayoutEffect` it meets while server rendering; React 19 doesn't.
+*/
+const useClientLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect;
+//#endregion
 //#region src/Tooltip.tsx
 /** How long the pointer rests on an anchor before its tooltip shows. */
 const SHOW_DELAY_MS = 300;
@@ -1245,7 +1252,7 @@ function Tooltip({ label, children, placement = "top" }) {
 	const tipRef = useRef(null);
 	const timer = useRef(void 0);
 	useEffect(() => () => clearTimeout(timer.current), []);
-	useLayoutEffect(() => {
+	useClientLayoutEffect(() => {
 		if (!open) {
 			setPosition(null);
 			return;
@@ -5623,7 +5630,7 @@ function UserMention({ id, name }) {
 	const anchorRef = useRef(null);
 	const cardRef = useRef(null);
 	const cardId = useId();
-	useLayoutEffect(() => {
+	useClientLayoutEffect(() => {
 		if (!open) {
 			setPosition(null);
 			return;
@@ -5979,7 +5986,9 @@ function Button({ element, blockId }) {
 * Slack's `focus_on_load`: the element takes focus when its modal or Home tab opens. Slack ignores
 * it in messages and allows it on only one element per view.
 *
-* Pass the element's own ref when it already has one; otherwise attach the returned ref.
+* Pass the element's own ref when it already has one; otherwise attach the returned ref. The return
+* type is `useRef`'s own, which differs between @types/react 18 and 19, so it fits a `ref` prop in
+* both.
 */
 function useFocusOnLoad(element, existing) {
 	const { surface } = useBlockKit();
@@ -6247,10 +6256,10 @@ function Popover({ anchorRef, onDismiss, gap = DEFAULT_GAP, children }) {
 	const layerRef = useRef(null);
 	const [position, setPosition] = useState(null);
 	const dismiss = useRef(onDismiss);
-	useLayoutEffect(() => {
+	useClientLayoutEffect(() => {
 		dismiss.current = onDismiss;
 	});
-	useLayoutEffect(() => {
+	useClientLayoutEffect(() => {
 		function place() {
 			const anchor = anchorRef.current;
 			const layer = layerRef.current;
@@ -8179,7 +8188,8 @@ function Collapse({ open, className, children }) {
 	const [shown, setShown] = useState(open);
 	if (open && !shown) setShown(true);
 	const was = useRef(open);
-	useLayoutEffect(() => {
+	useClientLayoutEffect(() => {
+		ref.current?.toggleAttribute("inert", !open);
 		if (was.current === open) return;
 		was.current = open;
 		const el = ref.current;
@@ -8197,7 +8207,6 @@ function Collapse({ open, className, children }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		className: className ? `sbk-collapse ${className}` : "sbk-collapse",
-		inert: !open,
 		onTransitionEnd: (e) => {
 			if (e.target !== e.currentTarget || e.propertyName !== "height") return;
 			if (open) e.currentTarget.style.height = "";