feat(react): add alert dialog component (#739)

packages/react/src/ui/create-context-part.tsx

@@ -12,22 +12,25 @@ interface ContextPartConfig<Props extends object, State extends object> {
   tag: keyof React.JSX.IntrinsicElements;
   useContext: () => { state: State; stateAttrMap: StateAttrMap<State> };
   staticProps?: Partial<Props>;
+  /** Derive props from state on each render (e.g. `id` from a state field). */
+  getProps?: (state: State) => Record<string, unknown>;
 }
 
 export function createContextPart<Props extends UIComponentProps<any, any>, State extends object>(
   config: ContextPartConfig<Props, State>
 ): ForwardRefExoticComponent<Props> {
-  const { displayName, tag, useContext, staticProps } = config;
+  const { displayName, tag, useContext, staticProps, getProps } = config;
 
   const Component = forwardRef<HTMLElement, Props>(function ContextPart(componentProps, forwardedRef) {
     const { render, className, style, ...elementProps } = componentProps;
     const context = useContext();
+    const dynamicProps = getProps?.(context.state);
 
     return renderElement(tag, { render, className, style } as renderElementFn.ComponentProps<State>, {
       state: context.state,
       stateAttrMap: context.stateAttrMap,
       ref: forwardedRef,
-      props: staticProps ? [staticProps, elementProps] : [elementProps],
+      props: [staticProps, dynamicProps, elementProps].filter(Boolean),
     });
   });