Add stable state hook

Author: compulim

packages/component/src/Attachment/Text/private/ActivityCopyButton.tsx

@@ -8,7 +8,7 @@ import { instance, nullable, object, optional, pipe, readonly, string, type Infe
 import useStyleSet from '../../../hooks/useStyleSet';
 import ClipboardWritePermissionComposer, {
   useClipboardWritePermissionHooks
-} from '../../../providers/ClipboardWritePermission/ClipboardWritePermissionComposer';
+} from '../../../providers/ClipboardWritePermissionWithStable/ClipboardWritePermissionComposer';
 import { useQueueStaticElement } from '../../../providers/LiveRegionTwin';
 import refObject from '../../../types/internal/refObject';
 import ActivityButton from './ActivityButton';

packages/component/src/providers/ClipboardWritePermissionWithStable/ClipboardWritePermissionComposer.tsx

@@ -0,0 +1,65 @@
+// import { reactNode, validateProps } from 'botframework-webchat-react-valibot';
+import { validateProps } from 'botframework-webchat-api/internal';
+import React, { createContext, memo, useContext, useEffect, useMemo, useState } from 'react';
+import { object, optional, pipe, readonly, type InferInput } from 'valibot';
+
+import reactNode from '../../types/internal/reactNode';
+import useStableStateHook from './private/useStableStateHook';
+
+const clipboardWritePermissionComposerPropsSchema = pipe(
+  object({
+    children: optional(reactNode())
+  }),
+  readonly()
+);
+
+type ClipboardWritePermissionComposerProps = InferInput<typeof clipboardWritePermissionComposerPropsSchema>;
+
+type ClipboardWritePermissionContextType = Readonly<{
+  usePermissionGranted: () => readonly [boolean];
+}>;
+
+const ClipboardWritePermissionContext = createContext<ClipboardWritePermissionContextType>({} as any);
+
+function ClipboardWritePermissionComposer(props: ClipboardWritePermissionComposerProps) {
+  const { children } = validateProps(clipboardWritePermissionComposerPropsSchema, props);
+
+  const [permissionGranted, setPermissionGranted] = useState(false);
+
+  const usePermissionGranted = useStableStateHook(permissionGranted);
+
+  const context = useMemo<ClipboardWritePermissionContextType>(
+    () =>
+      Object.freeze({
+        usePermissionGranted
+      }),
+    [usePermissionGranted]
+  );
+
+  useEffect(() => {
+    let unmounted = false;
+
+    (async function () {
+      if ((await navigator.permissions.query({ name: 'clipboard-write' as any })).state === 'granted') {
+        unmounted || setPermissionGranted(true);
+      }
+    })();
+
+    return () => {
+      unmounted = true;
+    };
+  }, [setPermissionGranted]);
+
+  return (
+    <ClipboardWritePermissionContext.Provider value={context}>{children}</ClipboardWritePermissionContext.Provider>
+  );
+}
+
+function useClipboardWritePermissionHooks(): Readonly<{
+  usePermissionGranted(): readonly [boolean];
+}> {
+  return useContext(ClipboardWritePermissionContext);
+}
+
+export default memo(ClipboardWritePermissionComposer);
+export { useClipboardWritePermissionHooks };

packages/component/src/providers/ClipboardWritePermissionWithStable/private/useStableStateHook.ts

@@ -0,0 +1,44 @@
+import { useCallback, useEffect, useMemo, useRef, useState, type Dispatch, type SetStateAction } from 'react';
+import { createPropagation } from 'use-propagate';
+import { useRefFrom } from 'use-ref-from';
+
+export default function useStableStateHook<T>(value: T): () => readonly [T];
+
+export default function useStableStateHook<T>(
+  value: T,
+  setValue: Dispatch<SetStateAction<T>>
+): () => readonly [T, Dispatch<SetStateAction<T>>];
+
+export default function useStableStateHook<T>(
+  value: T,
+  setValue?: Dispatch<SetStateAction<T>> | undefined
+): () => readonly [T, Dispatch<SetStateAction<T>>] | readonly [T] {
+  const propagationRef = useRef<ReturnType<typeof createPropagation<T>>>();
+  const valueRef = useRefFrom(value);
+
+  if (!propagationRef.current) {
+    propagationRef.current = createPropagation<T>();
+  }
+
+  const {
+    current: { usePropagate, useListen }
+  } = propagationRef;
+
+  const propagate = usePropagate();
+
+  useEffect(() => propagate(value), [propagate, value]);
+
+  const useHook = () => {
+    const [propagatedValue, setPropagatedValue] = useState<T>(valueRef.current);
+
+    useListen(setPropagatedValue);
+
+    return useMemo(
+      () => Object.freeze(setValue ? ([propagatedValue, setValue] as const) : ([propagatedValue] as const)),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [propagatedValue, setValue]
+    );
+  };
+
+  return useCallback(useHook, [useListen, setValue, valueRef]);
+}